text: import React from "react";
  import {connect} from "react-redux";
  import {Link} from "react-router-dom";
  import {fetchStreams} from "../../actions";
  
  class StreamList extends React.Component {
  	componentDidMount() {
  		this.props.fetchStreams();
  	}
  
  	renderAdmin(stream) {
  		if (stream.userId === this.props.currentUserId) {
  			return (
  				<div className="right floated content">
  					<Link to={`/streams/edit/${stream.id}`} className="ui button primary">
  						Edit
  					</Link>
  					<Link to={`/streams/delete/${stream.id}`} className="ui button negative">
  						Delete
  					</Link>
  				</div>
  			);
  		}
  	}
  
  	renderList() {
  		return this.props.streams.map(stream => {
  			return (
  				<div className="item" key={stream.id}>
  					{this.renderAdmin(stream)}
  					<i className="large middle aligned icon camera" />
  					<div className="content">
  						<Link to={`/streams/${stream.id}`} className="header">
  							{stream.title}
  						</Link>
  						<div className="description">{stream.description}</div>
  					</div>
  				</div>
  			);
  		});
  	}
  
  	renderCreate() {
  		if (this.props.isSignedIn) {
  			return (
  				<div style ={{textAlign: "right"}}>
  					<Link to="/streams/new" className="ui button primary">
  						Create Stream
  					</Link>
  				</div>
  			);
  		}
  	}
  
  	render() {
  		return (
  			<div>
  				<h2>Streams</h2>
  				<div className="ui celled list">{this.renderList()}</div>
  				{this.renderCreate()}
  			</div>
  		);
  	}
  }
  
  const mapStateToProps = (state) => {
  	return {
  		streams: Object.values(state.streams),
  		currentUserId: state.auth.userId,
  		isSignedIn: state.auth.isSignedIn
  	};
  }
  
  export default connect(mapStateToProps, {fetchStreams})(StreamList);