Added playlists overlay with playlists list and blank edit playlist overlay.

frontend/app/js/views/Station/Views/EditPlaylist.jsx

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import CustomInput from "components/CustomInput.jsx";
+import CustomErrors from "components/CustomMessages.jsx";
+
+import { connect } from "react-redux";
+
+import { closeOverlay2 } from "actions/stationOverlay";
+
+import io from "io";
+
+@connect(state => ({
+	stationId: state.station.get("id"),
+}))
+export default class EditPlaylist extends Component {
+	constructor(props) {
+		super(props);
+
+		CustomInput.initialize(this);
+
+		this.state = {
+
+		};
+
+		io.getSocket((socket) => {
+
+		});
+	}
+
+	close = () => {
+		this.props.dispatch(closeOverlay2());
+	};
+
+	render() {
+		return (
+			<div className="overlay">
+				<button onClick={ this.close }>Back</button>
+				<h1>Edit Playlist</h1>
+				<CustomErrors onRef={ ref => (this.messages = ref) } />
+			</div>
+		);
+	}
+}

frontend/app/js/views/Station/Views/Overlays.jsx

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
 import Settings from "./Settings";
+import Playlists from "./Playlists";
+import EditPlaylist from "./EditPlaylist";
 
 @connect(state => ({
 	overlay1: state.stationOverlay.get("overlay1"),
@@ -20,18 +22,24 @@ export default class Overlays extends Component {
 	}
 
 	getComponent = (type, key) => {
-		if (type === "settings") {
-			return <Settings t={ this.props.t } key={ key }/>;
-		} else return null;
+		let input = null;
+		if (type === "settings") input = <Settings t={ this.props.t } key={ key }/>;
+		else if (type === "playlists") input = <Playlists t={ this.props.t } key={ key }/>;
+		else if (type === "editPlaylist") input = <EditPlaylist t={ this.props.t } key={ key }/>;
+		return input;
 	};
 
 	componentDidUpdate(prevProps, prevState) {
-		console.log(111, prevProps.overlay1, this.props.overlay1);
 		if (this.props.overlay1 !== prevProps.overlay1) {
 			this.setState({
 				overlay1: this.getComponent(this.props.overlay1),
 			});
 		}
+		if (this.props.overlay2 !== prevProps.overlay2) {
+			this.setState({
+				overlay2: this.getComponent(this.props.overlay2),
+			});
+		}
 	}
 
 	render() {

frontend/app/js/views/Station/Views/Playlists.jsx

@@ -0,0 +1,62 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import CustomInput from "components/CustomInput.jsx";
+import CustomErrors from "components/CustomMessages.jsx";
+
+import { connect } from "react-redux";
+
+import { closeOverlay1, openOverlay2 } from "actions/stationOverlay";
+
+import io from "io";
+
+@connect(state => ({
+	stationId: state.station.get("id"),
+}))
+export default class Playlists extends Component {
+	constructor(props) {
+		super(props);
+
+		CustomInput.initialize(this);
+
+		this.state = {
+			playlists: [],
+		};
+
+		io.getSocket((socket) => {
+			socket.emit('playlists.indexForUser', res => {
+				res.data.push({
+					displayName: "Playlist",
+					_id: "RandomId",
+				});
+				console.log("Remove above dummy data.");
+				if (res.status === 'success') this.setState({
+					playlists: res.data,
+				});
+			});
+		});
+	}
+
+	close = () => {
+		this.props.dispatch(closeOverlay1());
+	};
+
+	render() {
+		return (
+			<div className="overlay">
+				<button onClick={ this.close }>Back</button>
+				<h1>Playlists</h1>
+				<CustomErrors onRef={ ref => (this.messages = ref) } />
+
+				<h2>Playlists</h2>
+				<ul>
+					{
+						this.state.playlists.map((playlist) => {
+							return <li key={ playlist._id }>{ playlist.displayName } - <span onClick={ () => { this.props.dispatch(openOverlay2("editPlaylist")) } }>Edit</span></li>;
+						})
+					}
+				</ul>
+			</div>
+		);
+	}
+}

frontend/app/js/views/Station/index.jsx

@@ -249,6 +249,7 @@ export default class Station extends Component {
 				<Overlays t={ this.props.t } />
 
 				<button onClick={ () => { this.props.dispatch(openOverlay1("settings")) } }>Open settings</button>
+				<button onClick={ () => { this.props.dispatch(openOverlay1("playlists")) } }>Open playlists</button>
 
 				<h1>{ this.props.station.displayName }</h1>