Add "create playlist" button and functionality

src/components/playlist/PlaylistList.tsx

@@ -1,19 +1,26 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
-import { Tag } from 'rsuite';
+import { Form, Input, Popover, Whisper } from 'rsuite';
 import settings from 'electron-settings';
 import useSearchQuery from '../../hooks/useSearchQuery';
-import { getPlaylists } from '../../api/api';
+import { createPlaylist, getPlaylists } from '../../api/api';
 import ListViewType from '../viewtypes/ListViewType';
 import PageLoader from '../loader/PageLoader';
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import GridViewType from '../viewtypes/GridViewType';
+import { StyledButton, StyledInputGroup } from '../shared/styled';
+import { errorMessages, isFailedResponse } from '../../shared/utils';
+import { notifyToast } from '../shared/toast';
+import { AddPlaylistButton } from '../shared/ToolbarButtons';
 
 const PlaylistList = () => {
   const history = useHistory();
+  const queryClient = useQueryClient();
+  const playlistTriggerRef = useRef<any>();
   const [sortBy] = useState('name');
+  const [newPlaylistName, setNewPlaylistName] = useState('');
   const [viewType, setViewType] = useState(
     settings.getSync('playlistViewType') || 'list'
   );
@@ -27,6 +34,23 @@ const PlaylistList = () => {
     'comment',
   ]);
 
+  const handleCreatePlaylist = async (name: string) => {
+    try {
+      const res = await createPlaylist(name);
+
+      if (isFailedResponse(res)) {
+        notifyToast('error', errorMessages(res)[0]);
+      } else {
+        await queryClient.refetchQueries(['playlists'], {
+          active: true,
+        });
+        notifyToast('success', `Playlist "${name}" created!`);
+      }
+    } catch (err) {
+      notifyToast('error', err);
+    }
+  };
+
   const handleRowClick = (_e: any, rowData: any) => {
     history.push(`playlist/${rowData.id}`);
   };
@@ -45,7 +69,50 @@ const PlaylistList = () => {
       header={
         <GenericPageHeader
           title="Playlists"
-          subtitle={<Tag>{playlists.length} playlists</Tag>}
+          subtitle={
+            <Whisper
+              ref={playlistTriggerRef}
+              enterable
+              placement="auto"
+              trigger="click"
+              speaker={
+                <Popover>
+                  <Form>
+                    <StyledInputGroup>
+                      <Input
+                        placeholder="Enter name..."
+                        value={newPlaylistName}
+                        onChange={(e) => setNewPlaylistName(e)}
+                      />
+                    </StyledInputGroup>
+                    <br />
+                    <StyledButton
+                      size="sm"
+                      type="submit"
+                      block
+                      loading={false}
+                      appearance="primary"
+                      onClick={() => {
+                        handleCreatePlaylist(newPlaylistName);
+                        playlistTriggerRef.current.close();
+                      }}
+                    >
+                      Create
+                    </StyledButton>
+                  </Form>
+                </Popover>
+              }
+            >
+              <AddPlaylistButton
+                size="sm"
+                onClick={() =>
+                  playlistTriggerRef.current.state.isOverlayShown
+                    ? playlistTriggerRef.current.close()
+                    : playlistTriggerRef.current.open()
+                }
+              />
+            </Whisper>
+          }
           searchQuery={searchQuery}
           handleSearch={(e: any) => setSearchQuery(e)}
           clearSearchQuery={() => setSearchQuery('')}

src/components/shared/ToolbarButtons.tsx

@@ -100,20 +100,24 @@ export const DownloadButton = ({ ...rest }) => {
 
 export const ShuffleButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Shuffle" placement="bottom">
+    <StyledIconButton icon={<Icon icon="random" />} tabIndex={0} {...rest}>
-      <StyledButton tabIndex={0} {...rest}>
+      Shuffle
-        <Icon icon="random" /> Shuffle
+    </StyledIconButton>
-      </StyledButton>
-    </CustomTooltip>
   );
 };
 
 export const ClearQueueButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Clear queue" placement="bottom">
+    <StyledIconButton icon={<Icon icon="trash2" />} tabIndex={0} {...rest}>
-      <StyledButton tabIndex={0} {...rest}>
+      Clear
-        <Icon icon="trash2" /> Clear
+    </StyledIconButton>
-      </StyledButton>
+  );
-    </CustomTooltip>
+};
+
+export const AddPlaylistButton = ({ ...rest }) => {
+  return (
+    <StyledIconButton icon={<Icon icon="plus-square" />} tabIndex={0} {...rest}>
+      Add playlist
+    </StyledIconButton>
   );
 };