Fixed issues with homepage stations.

frontend/app/js/ducks/homepage.js

@@ -1,4 +1,4 @@
-import { Map, List } from "immutable";
+import { Map, List, fromJS } from "immutable";
 
 const STATION_INDEX = "HOMEPAGE::STATION_INDEX";
 const STATION_CREATE = "HOMEPAGE::STATION_CREATE";
@@ -71,11 +71,17 @@ function reducer(state = initialState, action) {
 
 	switch (action.type) {
 	case STATION_INDEX:
-		state.setIn(["stations", "official"], List([]));
-		state.setIn(["stations", "community"], List([]));
+		state = Map({
+			stations: Map({
+				official: List([]),
+				community: List([]),
+			}),
+		});
 		stations.forEach((station) => {
-			state = state.updateIn(["stations", station.type], function(list) {
-				return list.push(station);
+			station.stationId = station._id;
+			delete station._id;
+			state = state.updateIn(["stations", station.type], (stations) => {
+				return stations.push(fromJS(station));
 			});
 		});
 		return state;

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

@@ -3,38 +3,54 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 
+@connect(state => ({
+	user: {
+		loggedIn: state.session.get("loggedIn"),
+		userId: state.session.get("userId"),
+		role: state.session.get("role"),
+	},
+}))
 @translate(["home"], { wait: true })
 export default class StationCard extends Component {
+	isOwner = () => {
+		if (this.props.user.loggedIn) {
+			if (this.props.user.role === "admin") return true;
+			if (this.props.user.userId === this.props.station.get("stationOwner")) return true;
+		}
+
+		return false;
+	};
+
 	render() {
-		const { station, isOwner } = this.props;
+		const { station } = this.props;
 		let icon = null;
-		if (station.type === "official") {
-			if (station.privacy !== "public") icon =
+		if (station.get("type") === "official") {
+			if (station.get("privacy") !== "public") icon =
 				<i className="material-icons" title={ this.props.t("home:thisStationIsNotVisible") }>lock</i>;
 		} else {
-			if (isOwner) icon =
+			if (this.isOwner()) icon =
 				<i className="material-icons" title={ this.props.t("home:thisIsYourStation") }>home</i>;
-			if (station.privacy !== "public") icon =
+			if (station.get("privacy") !== "public") icon =
 				<i className="material-icons" title={ this.props.t("home:thisStationIsNotVisible") }>lock</i>;
 		}
 
 		return (
 			<div className="station-card">
 				<div className="station-media">
-					<img src={(station.currentSong) ? station.currentSong.thumbnail : ""}/>
+					<img src={(station.get("currentSong")) ? station.getIn(["currentSong", "thumbnail"]) : ""}/>
 				</div>
 				<div className="station-body">
-					<h3 className="displayName">{station.displayName}</h3>
-					<p className="description">{station.description}</p>
+					<h3 className="displayName">{station.get("displayName")}</h3>
+					<p className="description">{station.get("description")}</p>
 				</div>
 				<div className="station-footer">
 					<div className="user-count" title={ this.props.t("home:howManyOtherUsers") }>
 						<i className="material-icons">people</i>
-						<span>{station.userCount}</span>
+						<span>{station.get("userCount")}</span>
 					</div>
 					{ icon }
 				</div>
-				<a href={station.type + "/" + station.name}/>
+				<a href={station.get("type") + "/" + station.get("name")}/>
 			</div>
 		);
 	}

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

@@ -55,7 +55,6 @@ 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);
 				}
 			});
@@ -124,7 +123,7 @@ export default class Homepage extends Component {
 				<h2>{ t("home:officialStations") }</h2>
 				<div className="official-stations stations">
 					{ this.props.officialStations.map((station) => {
-						return <StationCard station={ station } />;
+						return <StationCard station={ station } key={ station.get("stationId") } />;
 					}) }
 				</div>
 				<h2>{ t("home:communityStations") }</h2>
@@ -151,7 +150,7 @@ export default class Homepage extends Component {
 						</div>
 					) : null }
 					{ this.props.communityStations.map((station) => {
-						return <StationCard station={ station } isOwner={ this.isOwner(station.ownerId) } key={ station.stationId }/>;
+						return <StationCard station={ station } key={ station.get("stationId") }/>;
 					}) }
 				</div>
 			</main>