Added code to create playlists.

backend/logic/actions/playlists.js

@@ -163,7 +163,7 @@ let lib = {
 			}
 			cache.pub('playlist.create', playlist._id);
 			logger.success("PLAYLIST_CREATE", `Successfully created private playlist for user "${userId}".`);
-			cb({ 'status': 'success', 'message': 'Successfully created playlist' });
+			cb({ 'status': 'success', 'message': 'Successfully created playlist', 'playlistId': playlist._id });
 		});
 	}),
 

frontend/app/js/actions/stationOverlay.js

@@ -9,10 +9,11 @@ export function openOverlay1(overlay) {
 		overlay,
 	};
 }
-export function openOverlay2(overlay) {
+export function openOverlay2(overlay, extraProps) {
 	return {
 		type: OPEN_OVERLAY2,
 		overlay,
+		extraProps,
 	};
 }
 export function closeOverlay1() {
@@ -23,5 +24,6 @@ export function closeOverlay1() {
 export function closeOverlay2() {
 	return {
 		type: CLOSE_OVERLAY2,
+		extraValue: null,
 	};
 }

frontend/app/js/components/CustomInput.jsx

@@ -89,6 +89,17 @@ const dictionary = {
 		isTextarea: true,
 		errors: {},
 	},
+	playlistDescription: {
+		inputType: "text",
+		minLength: 1,
+		maxLength: 16,
+		isInput: true,
+		regex: regex.ascii,
+		errors: {
+			//format: t("general:invalidUsernameFormat", { characters: `a-z, A-Z, 0-9${ t("general:and") } _` }),
+			format: "Only ascii is allowed",
+		},
+	},
 	stationPrivacy: {
 		isRadio: true,
 		options: [

frontend/app/js/reducers/stationOverlay.js

@@ -10,6 +10,7 @@ import {
 const initialState = Map({
 	overlay1: null,
 	overlay2: null,
+	extraProps2: null,
 });
 
 const actionsMap = {
@@ -21,6 +22,7 @@ const actionsMap = {
 	[OPEN_OVERLAY2]: (state, action) => {
 		return state.merge({
 			overlay2: action.overlay,
+			extraProps2: action.extraProps,
 		});
 	},
 	[CLOSE_OVERLAY1]: (state, action) => {

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

@@ -26,6 +26,8 @@ export default class EditPlaylist extends Component {
 		io.getSocket((socket) => {
 
 		});
+
+		console.log("EditPlaylist.jsx props", props);
 	}
 
 	close = () => {

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

@@ -10,6 +10,7 @@ import EditPlaylist from "./EditPlaylist";
 @connect(state => ({
 	overlay1: state.stationOverlay.get("overlay1"),
 	overlay2: state.stationOverlay.get("overlay2"),
+	extraProps2: state.stationOverlay.get("extraProps2"),
 }))
 export default class Overlays extends Component {
 	constructor(props) {
@@ -25,7 +26,7 @@ export default class Overlays extends Component {
 		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 }/>;
+		else if (type === "editPlaylist") input = <EditPlaylist t={ this.props.t } key={ key } playlistId={ this.props.extraProps2.get("playlistId") }/>;
 		return input;
 	};
 

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

@@ -41,6 +41,23 @@ export default class Playlists extends Component {
 		this.props.dispatch(closeOverlay1());
 	};
 
+	createPlaylist = () => {
+		this.messages.clearErrorSuccess();
+		if (CustomInput.hasInvalidInput(this.input, ["description"])) {
+			this.messages.clearAddError(this.props.t("general:someFieldsAreIncorrectError"));
+		} else {
+			io.getSocket(socket => {
+				socket.emit('playlists.create', { displayName: this.input.description.getValue(), songs: [] }, res => {
+					if (res.status === "success") {
+						this.props.dispatch(openOverlay2("editPlaylist", { playlistId: res.playlistId }));
+					} else {
+						this.messages.addError(res.message);
+					}
+				});
+			});
+		}
+	};
+
 	render() {
 		return (
 			<div className="overlay">
@@ -48,11 +65,14 @@ export default class Playlists extends Component {
 				<h1>Playlists</h1>
 				<CustomErrors onRef={ ref => (this.messages = ref) } />
 
+				<CustomInput key="description" type="playlistDescription" name="description" label="Description" placeholder="Description" original={ this.props.description } onRef={ ref => (this.input.description = ref) } />
+				<button onClick={ this.createPlaylist }>Create playlist</button>
+
 				<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>;
+							return <li key={ playlist._id }>{ playlist.displayName } - <span onClick={ () => { this.props.dispatch(openOverlay2("editPlaylist", { playlistId: playlist._id })) } }>Edit</span></li>;
 						})
 					}
 				</ul>