new playlist creation implemented

src/App.js

@@ -124,21 +124,62 @@ const RegisterForm = ({ onRegister }) => {
 }
 const RegisterFormConnect = connect(null, { onRegister: action.actionRegister })(RegisterForm)
 
-const Playlists = ({playlists}) =>
-  <div style={{backgroundColor: 'lightcyan'}}>
-    <h4>User playlists:</h4>
-    <div style={{ border: '1px solid black', backgroundColor: 'mediumseagreen', margin: '5px' }}>Add plylist [+](button)</div>
-    { playlists?.payload? playlists.payload.map(item => {
-      return(
-        <Link 
-          style={{display:'block', backgroundColor: 'darkcyan', color: 'cyan', margin: '5px'}} 
-          to={`${history.location.pathname}/playlist/:${item._id}`}
-        >
-          {item.name}
-        </Link>
-      )
-    }) : '' } 
-  </div>
+const PlaylistAdd = ({addPlaylist}) => {
+  let [clicked, setClicked] = useState(false)
+  let [name, setName] = useState()
+  return (
+    <div>
+      {
+        !clicked?
+          <button 
+            style={{ border: '1px solid black', backgroundColor: 'mediumseagreen',width : '95%',padding: '5px', margin: '5px' }}
+            onClick={() => setClicked(true)}
+          >NEW PLAYLIST</button>
+          :
+          <div style={{width : '95%', margin:'0 auto'}}>
+            <input 
+              style={{width:'72%', padding:'5px'}} 
+              placeholder='Playlist name'
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+
+            <button
+              disabled={!name}
+              style={{padding:'5px', backgroundColor:'mediumseagreen'}}
+              onClick={() => {addPlaylist(name); setClicked(false); setName('');}}
+            >+</button>
+
+            <button
+              style={{padding:'5px', backgroundColor:'red'}} 
+              onClick={() => {setClicked(false); setName('')}}
+            >X</button>
+          </div>
+      }
+    </div>
+  )
+}
+
+const PlaylistAddConnect = connect(null, {addPlaylist: action.actionAddPlaylist})(PlaylistAdd)
+
+const Playlists = ({playlists}) => {
+  return (
+    <div style={{backgroundColor: 'lightcyan'}}>
+      <h4>User playlists:</h4>
+      <PlaylistAddConnect />
+      {
+        playlists?.payload? playlists.payload.map(item => {
+          return (
+            <Link 
+              style={{display:'block', backgroundColor: 'darkcyan', color: 'cyan', margin: '5px', padding:'5px'}} 
+              to={`${history.location.pathname}/playlist/:${item._id}`}
+            >{item.name}</Link>
+          )
+        }) : '' 
+      } 
+    </div>
+  )
+}
 
 const PlaylistsConnect = connect(state => ({playlists: state.promise.userPlaylists || {}}))(Playlists)
 
@@ -148,6 +189,8 @@ const Track = ({track:{url, originalFileName, id3:{title, artist, album}}}) =>
       <div style={{marginRight:'2%'}}>
         <button style={{padding: '10px', margin:'2px'}}> {`>`} </button>
         <button style={{padding: '10px', margin:'2px'}}>| |</button>
+        <br/>
+        <button style={{padding: '10px', margin:'2px'}}>Add to...</button>
       </div>
       <div style={{textAlign: 'left'}}>
         <h5>Artist: {artist || 'unknown'}</h5> 
@@ -193,7 +236,7 @@ const Player = ({ user, playlists, onLogout }) => {
     <>
       <header>Player</header>
       <div style={{ display: 'flex' }}>
-        <aside style={{ border: '1px solid black', width: '20%' }}>
+        <aside style={{ border: '1px solid black', width: '30%' }}>
           <div
             style={{ border: '1px solid black', backgroundColor: 'red', color: 'white' }}
             onClick={() => { onLogout(); history.push('/login') }}

src/actions/index.js

@@ -110,3 +110,14 @@ export const actionGetUserTracks = () => {
     )
 }
 
+export const actionAddPlaylist = playlistName => 
+    async dispatch => {
+        await dispatch(actionPromise('addPlaylist', gql(`
+            mutation addPlaylist ($playlistName: String!){
+                PlaylistUpsert(playlist: {name: $playlistName}) {
+                    _id, name
+                }
+            }
+        `, {playlistName: playlistName})))
+        dispatch(actionGetUserPlaylists())
+    }