Create playlist and add tracks in one action, fixes #723

src/js/views/modals/CreatePlaylist.js

@@ -1,49 +1,49 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import Modal from './Modal';
 import * as coreActions from '../../services/core/actions';
 import * as uiActions from '../../services/ui/actions';
 import { i18n, I18n } from '../../locale';
+import { decodeUri } from '../../util/format';
+import TextField from '../../components/Fields/TextField';
 import Button from '../../components/Button';
 
-class CreatePlaylist extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: '',
-      description: '',
-      scheme: 'm3u',
-      is_public: true,
-      is_collaborative: false,
-    };
-  }
+const CreatePlaylist = () => {
+  const { uris } = useParams();
+  const tracks_uris = uris ? decodeUri(uris).split(',') : undefined;
+  const dispatch = useDispatch();
+  const [playlist, setPlaylist] = useState({
+    scheme: 'm3u',
+    name: '',
+    description: '',
+    collaborative: false,
+    public: false,
+  });
+  const spotifyAvailable = useSelector((state) => state.spotify.access_token);
+  useEffect(
+    () => {
+      dispatch(uiActions.setWindowTitle(i18n('modal.edit_playlist.title_create')));
+    },
+    [],
+  );
 
-  componentDidMount() {
-    this.props.uiActions.setWindowTitle(i18n('modal.edit_playlist.title_create'));
-  }
-
-  createPlaylist(e) {
+  const onChange = (updates) => setPlaylist({ ...playlist, ...updates });
+  const onSubmit = (e) => {
     e.preventDefault();
 
-    if (!this.state.name || this.state.name == '') {
-      this.setState({ error: i18n('modal.edit_playlist.name_required') });
+    if (!playlist.name || playlist.name === '') {
       return false;
     }
-    this.props.coreActions.createPlaylist(
-      this.state.scheme,
-      this.state.name,
-      this.state.description,
-      this.state.is_public,
-      this.state.is_collaborative,
+    dispatch(
+      coreActions.createPlaylist({ ...playlist, tracks_uris }),
     );
     window.history.back();
-
     return false;
-  }
+  };
 
-  renderFields() {
-    switch (this.state.scheme) {
+  const fields = () => {
+    switch (playlist.scheme) {
       case 'spotify':
         return (
           <div>
@@ -52,10 +52,9 @@ class CreatePlaylist extends React.Component {
                 <I18n path="modal.edit_playlist.name" />
               </div>
               <div className="input">
-                <input
-                  type="text"
-                  onChange={(e) => this.setState({ name: e.target.value })}
-                  value={this.state.name}
+                <TextField
+                  onChange={(value) => onChange({ name: value })}
+                  value={playlist.name}
                 />
               </div>
             </div>
@@ -65,11 +64,9 @@ class CreatePlaylist extends React.Component {
                 <I18n path="modal.edit_playlist.description" />
               </div>
               <div className="input">
-                <input
-                  type="text"
-                  onChange={(e) => this.setState({ description: e.target.value })}
-
-                  value={this.state.description}
+                <TextField
+                  onChange={(value) => onChange({ description: value })}
+                  value={playlist.description}
                 />
               </div>
             </div>
@@ -82,9 +79,9 @@ class CreatePlaylist extends React.Component {
                 <label>
                   <input
                     type="checkbox"
-                    name="is_public"
-                    checked={this.state.is_public}
-                    onChange={(e) => this.setState({ is_public: !this.state.is_public })}
+                    name="public"
+                    checked={playlist.public}
+                    onChange={() => onChange({ public: !playlist.public })}
                   />
                   <span className="label">
                     <I18n path="modal.edit_playlist.options.public" />
@@ -93,9 +90,9 @@ class CreatePlaylist extends React.Component {
                 <label>
                   <input
                     type="checkbox"
-                    name="is_collaborative"
-                    checked={this.state.is_collaborative}
-                    onChange={(e) => this.setState({ is_collaborative: !this.state.is_collaborative })}
+                    name="collaborative"
+                    checked={playlist.collaborative}
+                    onChange={() => onChange({ collaborative: !playlist.collaborative })}
                   />
                   <span className="label">
                     <I18n path="modal.edit_playlist.options.collaborative" />
@@ -114,10 +111,9 @@ class CreatePlaylist extends React.Component {
                 <I18n path="modal.edit_playlist.name" />
               </div>
               <div className="input">
-                <input
-                  type="text"
-                  onChange={(e) => this.setState({ name: e.target.value })}
-                  value={this.state.name}
+                <TextField
+                  onChange={(value) => onChange({ name: value })}
+                  value={playlist.name}
                 />
               </div>
             </div>
@@ -126,75 +122,67 @@ class CreatePlaylist extends React.Component {
     }
   }
 
-  render = () => {
-    const { spotify_available } = this.props;
-
-    return (
-      <Modal className="modal--create-playlist">
-        <h1>
-          <I18n path="modal.edit_playlist.title_create" />
-        </h1>
-        <form onSubmit={(e) => this.createPlaylist(e)}>
-
-          <div className="field radio white">
-            <div className="name">
-              <I18n path="modal.edit_playlist.provider" />
-            </div>
-            <div className="input">
-              <label>
-                <input
-                  type="radio"
-                  name="scheme"
-                  value="m3u"
-                  checked={this.state.scheme === 'm3u'}
-                  onChange={(e) => this.setState({ scheme: e.target.value })}
-                />
-                <span className="label">
-                  <I18n path="services.mopidy.title" />
-                </span>
-              </label>
-              <label>
-                <input
-                  type="radio"
-                  name="scheme"
-                  value="spotify"
-                  disabled={!spotify_available}
-                  checked={this.state.scheme === 'spotify'}
-                  onChange={(e) => this.setState({ scheme: e.target.value })}
-                />
-                <span className="label">
-                  <I18n path="services.spotify.title" />
-                </span>
-              </label>
-            </div>
+  return (
+    <Modal className="modal--create-playlist">
+      <h1>
+        <I18n path="modal.edit_playlist.title_create" />
+      </h1>
+      {tracks_uris && (
+        <h2 className="mid_grey-text">
+          <I18n
+            path="modal.edit_playlist.subtitle"
+            count={tracks_uris.length}
+            plural={tracks_uris.length > 1 ? 's' : ''}
+          />
+        </h2>
+      )}
+      <form onSubmit={onSubmit}>
+        <div className="field radio white">
+          <div className="name">
+            <I18n path="modal.edit_playlist.provider" />
           </div>
-
-          {this.renderFields()}
-
-          <div className="actions centered-text">
-            <Button
-              type="primary"
-              size="large"
-              submit
-              tracking={{ category: 'CreatePlaylist', action: 'Submit' }}
-            >
-              <I18n path="modal.edit_playlist.create_playlist" />
-            </Button>
+          <div className="input">
+            <label>
+              <input
+                type="radio"
+                name="scheme"
+                value="m3u"
+                checked={playlist.scheme === 'm3u'}
+                onChange={(e) => onChange({ scheme: e.target.value })}
+              />
+              <span className="label">
+                <I18n path="services.mopidy.title" />
+              </span>
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="scheme"
+                value="spotify"
+                disabled={!spotifyAvailable}
+                checked={playlist.scheme === 'spotify'}
+                onChange={(e) => onChange({ scheme: e.target.value })}
+              />
+              <span className="label">
+                <I18n path="services.spotify.title" />
+              </span>
+            </label>
           </div>
+        </div>
+        {fields()}
+        <div className="actions centered-text">
+          <Button
+            type="primary"
+            size="large"
+            submit
+            tracking={{ category: 'CreatePlaylist', action: 'Submit' }}
+          >
+            <I18n path="modal.edit_playlist.create_playlist" />
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+};
 
-        </form>
-      </Modal>
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  spotify_available: state.spotify.access_token,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  coreActions: bindActionCreators(coreActions, dispatch),
-  uiActions: bindActionCreators(uiActions, dispatch),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(CreatePlaylist);
+export default CreatePlaylist;