add playlist sort types

src/api/api.ts

@@ -59,10 +59,21 @@ const getStreamUrl = (id: string) => {
   );
 };
 
-export const getPlaylists = async () => {
+export const getPlaylists = async (sortBy: string) => {
   const { data } = await api.get('/getPlaylists');
 
-  return (data.playlists?.playlist || []).map((playlist: any) => ({
+  const newData =
+    sortBy === 'dateCreated'
+      ? data.playlists?.playlist.sort((a: any, b: any) => {
+          return a.created > b.created ? -1 : a.created < b.created ? 1 : 0;
+        })
+      : sortBy === 'dateModified'
+      ? data.playlists?.playlist.sort((a: any, b: any) => {
+          return a.changed > b.changed ? -1 : a.changed < b.changed ? 1 : 0;
+        })
+      : data.playlists?.playlist;
+
+  return (newData || []).map((playlist: any) => ({
     ...playlist,
     name: playlist.name,
     image: playlist.songCount > 0 ? getCoverArtUrl(playlist) : undefined,

src/components/playlist/PlaylistList.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
-import { Tag } from 'rsuite';
+import { Tag, SelectPicker } from 'rsuite';
 import settings from 'electron-settings';
 import { getPlaylists } from '../../api/api';
 import ListViewType from '../viewtypes/ListViewType';
@@ -10,12 +10,24 @@ import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import GridViewType from '../viewtypes/GridViewType';
 
+const PLAYLIST_SORT_TYPES = [
+  { label: 'Date Modified', value: 'dateModified' },
+  { label: 'Date Created', value: 'dateCreated' },
+];
+
 const tableColumns = [
+  {
+    id: '#',
+    dataKey: 'index',
+    alignment: 'center',
+    width: 70,
+    resizable: false,
+  },
   {
     id: 'Name',
     dataKey: 'name',
     alignment: 'left',
-    flexGrow: 2,
+    flexGrow: 1,
     resizable: false,
   },
   {
@@ -32,26 +44,36 @@ const tableColumns = [
     flexGrow: 2,
     resizable: false,
   },
-  {
-    id: 'Created',
-    dataKey: 'created',
-    alignment: 'left',
-    flexGrow: 1,
-    resizable: false,
-  },
 ];
 
 const PlaylistList = () => {
   const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState('');
+  const [filteredData, setFilteredData] = useState<any[]>([]);
   const [viewType, setViewType] = useState(
     settings.getSync('viewType') || 'list'
   );
   const history = useHistory();
   const { isLoading, isError, data: playlists, error }: any = useQuery(
-    'playlists',
+    ['playlists', sortBy],
-    getPlaylists
+    () => getPlaylists(sortBy)
   );
 
+  useEffect(() => {
+    if (searchQuery !== '') {
+      setFilteredData(
+        playlists.filter((playlist: any) => {
+          return (
+            playlist.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            playlist.comment?.toLowerCase().includes(searchQuery.toLowerCase())
+          );
+        })
+      );
+    } else {
+      setFilteredData([]);
+    }
+  }, [playlists, searchQuery]);
+
   const handleRowClick = (_e: any, rowData: any) => {
     history.push(`playlist/${rowData.id}`);
   };
@@ -77,6 +99,17 @@ const PlaylistList = () => {
           showSearchBar
           handleListClick={() => setViewType('list')}
           handleGridClick={() => setViewType('grid')}
+          subsidetitle={
+            <SelectPicker
+              data={PLAYLIST_SORT_TYPES}
+              searchable={false}
+              placeholder="Sort Type"
+              menuAutoWidth
+              onChange={(value) => {
+                setSortBy(value);
+              }}
+            />
+          }
         />
       }
     >
@@ -103,20 +136,7 @@ const PlaylistList = () => {
       )}
       {viewType === 'grid' && (
         <GridViewType
-          data={
+          data={searchQuery === '' ? playlists : filteredData}
-            searchQuery === ''
-              ? playlists
-              : playlists.filter((playlist: any) => {
-                  return (
-                    playlist.name
-                      .toLowerCase()
-                      .includes(searchQuery.toLowerCase()) ||
-                    playlist.comment
-                      ?.toLowerCase()
-                      .includes(searchQuery.toLowerCase())
-                  );
-                })
-          }
           cardTitle={{
             prefix: 'playlist',
             property: 'name',