<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getActivePerformances } from '../../actions';
import { Link } from 'react-router';

import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import Divider from 'material-ui/lib/divider';
import Avatar from 'material-ui/lib/avatar';
import Colors from 'material-ui/lib/styles/colors';
import PlayCircleOutline from 'material-ui/lib/svg-icons/av/play-circle-outline';

export class StreamsUL extends Component {

  componentWillMount(){
    this.props.getActivePerformances()
  }

  render () {
    if (this.props.presentActiveStreams && this.props.presentActiveStreams.length) {
      return(
        <div>
          <ul className="sidebar-ul-landing">
            {this.renderEvents()}
          </ul>
        </div>
      )
    } else {
      return (
        <div>
          <span>Stream Yourself!</span>
        </div>
      )
    }
  }

  renderEvents () {
    return this.props.presentActiveStreams.map((performance)=> {
      return (
        <li className="sidebar-li" key={performance.room} style={{"marginTop": "1em"}}>
        <Link to={`/router/activeStream/${performance.room}`} style={{"color": "white"}}>
          {performance.title} by {performance.room}
        </Link>
        </li><commit_msg>(ENHANCE) Put artist on line below title in list of streams sidebar<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getActivePerformances } from '../../actions';
import { Link } from 'react-router';

import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import Divider from 'material-ui/lib/divider';
import Avatar from 'material-ui/lib/avatar';
import Colors from 'material-ui/lib/styles/colors';
import PlayCircleOutline from 'material-ui/lib/svg-icons/av/play-circle-outline';

export class StreamsUL extends Component {

  componentWillMount(){
    this.props.getActivePerformances()
  }

  render () {
    if (this.props.presentActiveStreams && this.props.presentActiveStreams.length) {
      return(
        <div>
          <ul className="sidebar-ul-landing">
            {this.renderEvents()}
          </ul>
        </div>
      )
    } else {
      return (
        <div>
          <span>Stream Yourself!</span>
        </div>
      )
    }
  }

  renderEvents () {
    return this.props.presentActiveStreams.map((performance)=> {
      return (
        <li className="sidebar-li" key={performance.room} style={{"marginTop": "1em"}}>
        <Link to={`/router/activeStream/${performance.room}`} style={{"color": "white"}}>
          {performance.title} <br />
          by {performance.room}
        </Link>
        </li>
{'fraction_non_alphanumeric': 0.14969632011432654, 'fraction_numerical': 0.0007145409074669524, 'mean_word_length': 2.8620689655172415, 'pattern_counts': {'":': 4, '<': 28, '<?xml version=': 0, '>': 30, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '248739', 'n_tokens_mistral': 862, 'n_tokens_neox': 856, 'n_words': 177}