Fixes issues with session and QueueList view.

frontend/app/js/app.jsx

@@ -40,7 +40,7 @@ class App extends Component { // eslint-disable-line react/no-multi-comp
 		io.init(config.serverDomain);
 		io.getSocket(socket => {
 			socket.on("ready", (loggedIn, role, username, userId) => {
-				this.props.onLogin(userId, username, role);
+				this.props.onLogin(loggedIn, userId, username, role);
 			});
 			socket.on("keep.event:banned", reason => this.props.banned(reason));
 

frontend/app/js/ducks/session.js

@@ -11,9 +11,10 @@ function logout() {
 	}
 }
 
-function login(userId, username, role) {
+function login(loggedIn, userId, username, role) {
 	return {
 		type: LOGIN,
+		loggedIn,
 		userId,
 		username,
 		role,
@@ -56,14 +57,20 @@ function reducer(state = initialState, action) {
 			authProcessed: false,
 		});
 	case LOGIN:
-		const { userId, username, role } = action;
-		return state.merge({
-			loggedIn: true,
-			userId,
-			username,
-			role,
-			authProcessed: true,
-		});
+		const { loggedIn, userId, username, role } = action;
+		if (loggedIn) {
+			return state.merge({
+				loggedIn: true,
+				userId,
+				username,
+				role,
+				authProcessed: true,
+			});
+		} else {
+			return state.merge({
+				authProcessed: true,
+			});
+		}
 	case BANNED:
 		const { reason } = action;
 		return state.merge({

frontend/app/js/ducks/stationInfo.js

@@ -12,6 +12,7 @@ const QUEUE_INDEX = "STATION_INFO::QUEUE_INDEX";
 const QUEUE_UPDATE = "STATION_INFO::QUEUE_UPDATE";
 const PAUSE = "STATION_INFO::PAUSE";
 const RESUME = "STATION_INFO::RESUME";
+const PLAYLISTS_UPDATE = "STATION_INFO::PLAYLISTS_UPDATE";
 
 function joinStation(station) {
 	return {
@@ -94,6 +95,13 @@ function resume() {
 	}
 }
 
+function playlistsUpdate(playlists) {
+	return {
+		type: PLAYLISTS_UPDATE,
+		playlists,
+	}
+}
+
 
 
 const initialState = Map({
@@ -110,6 +118,7 @@ const initialState = Map({
 	"userCount": 0,
 	"songList": List([]),
 	"privatePlaylist": "",
+	"playlists": List([]),
 });
 
 function reducer(state = initialState, action) {
@@ -195,6 +204,10 @@ function reducer(state = initialState, action) {
 		return state.merge({
 			paused: false,
 		});
+	case PLAYLISTS_UPDATE:
+		return state.merge({
+			playlists: action.playlists,
+		});
 	}
 	return state;
 }
@@ -212,6 +225,7 @@ const actionCreators = {
 	queueUpdate,
 	pause,
 	resume,
+	playlistsUpdate,
 };
 
 const actionTypes = {
@@ -227,6 +241,7 @@ const actionTypes = {
 	QUEUE_UPDATE,
 	PAUSE,
 	RESUME,
+	PLAYLISTS_UPDATE,
 };
 
 export {

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

@@ -55,6 +55,7 @@ export default class Homepage extends Component {
 		io.getSocket(socket => {
 			socket.emit("stations.index", data => {
 				if (data.status === "success") {
+					console.log(data.stations)
 					this.props.onStationIndex(data.stations);
 				}
 			});

frontend/app/js/views/Station/Views/QueueList/PlaylistItem.jsx

@@ -27,8 +27,8 @@ export default class PlaylistItem extends Component {
 		const { playlist } = this.props;
 
 		return (
-			<li key={ playlist._id }>
-				{ playlist.displayName } - { this.getPlaylistAction(playlist._id) }
+			<li style={{color: "black"}}>
+				{ playlist.get("displayName") } - { this.getPlaylistAction(playlist.get("_id")) }
 			</li>
 		);
 	}

frontend/app/js/views/Station/Views/QueueList/PlaylistList.jsx

@@ -16,13 +16,13 @@ export default class PlaylistList extends Component {
 	}
 
 	render() {
-		const { playlists } = this.props;
+		const { playlists } = this.props.station;
 
 		return (
 			<ul>
 				{
 					playlists.map((playlist) => {
-						return <PlaylistItem playlist={ playlist }/>;
+						return <PlaylistItem key={ playlist.get("displayName") } playlist={ playlist }/>;
 					})
 				}
 			</ul>

frontend/app/js/views/Station/Views/QueueList/SongItem.jsx

@@ -47,7 +47,7 @@ export default class SongItem extends Component {
 					<span className="duration">{ song.duration }</span>
 					<p className="title">{ song.title }</p>
 					<span className="title-artists-spacing"/>
-					<p className="artists">{ song.artists.toJS().join(", ") }</p>
+					<p className="artists">{ song.artists.join(", ") }</p>
 					{
 						(showRequestedBy) ?
 						<span>

frontend/app/js/views/Station/Views/QueueList/SongList.jsx

@@ -22,9 +22,14 @@ export default class SongList extends Component {
 			<ul>
 				{
 					songList.map((song) => {
-						return <SongItem song={ song }/>;
+						return <SongItem key={ song.songId } song={ song }/>;
 					})
 				}
+				{
+					(songList.length === 0)
+					? <li>No songs in queue.</li>
+					: null
+				}
 			</ul>
 		);
 	}

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

@@ -21,7 +21,7 @@ import io from "io";
 		role: state.session.get("role"),
 	},
 	station: {
-		stationId: state.station.info.get("id"),
+		stationId: state.station.info.get("stationId"),
 		owner: state.station.info.get("ownerId"),
 		playlistSelectedId: state.station.info.get("playlistSelected"),
 		songList: state.station.info.get("songList"),
@@ -69,7 +69,8 @@ export default class QueueList extends Component {
 	addSongToQueueCallback = (songId) => {
 		io.getSocket((socket) => {
 			// Add song to queue
-			socket.emit("stations.addToQueue", this.props.stationId, songId, res => {
+			console.log(this.props.station.stationId);
+			socket.emit("stations.addToQueue", this.props.station.stationId, songId, res => {
 				if (res.status === "success") {
 					this.messages.clearAddSuccess("Successfully added song.");
 				} else {

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

@@ -70,6 +70,7 @@ import config from "config";
 	onQueueIndex: bindActionCreators(stationInfoActionCreators.queueIndex, dispatch),
 	onQueueUpdate: bindActionCreators(stationInfoActionCreators.queueUpdate, dispatch),
 	onTimeElapsedUpdate: bindActionCreators(stationCurrentSongActionCreators.timeElapsedUpdate, dispatch),
+	onPlaylistsUpdate: bindActionCreators(stationInfoActionCreators.playlistsUpdate, dispatch),
 	openOverlay1: bindActionCreators(openOverlay1, dispatch),
 }))
 
@@ -124,6 +125,10 @@ export default class Station extends Component {
 						this.props.onNextSong(null);
 					}
 
+					socket.emit("playlists.indexForUser", res => {
+						if (res.status === "success") this.props.onPlaylistsUpdate(res.data);
+					});
+
 					socket.on("event:songs.next", data => {
 						//this.addTopToQueue();
 						if (data.currentSong) {
@@ -192,6 +197,16 @@ export default class Station extends Component {
 							this.props.onDislikedUpdate(data.disliked);
 						}
 					});
+					socket.on("event:playlist.create", () => {
+						socket.emit("playlists.indexForUser", res => {
+							if (res.status === "success") this.props.onPlaylistsUpdate(res.data);
+						});
+					});
+					socket.on("event:playlist.delete", () => {
+						socket.emit("playlists.indexForUser", res => {
+							if (res.status === "success") this.props.onPlaylistsUpdate(res.data);
+						});
+					});
 
 					if (this.props.station.type === "community") {
 						socket.emit("stations.getQueue", this.props.station.stationId, data => {