Browse Source

add playlist sort types

master
jeffvli 3 years ago
parent
commit
4a4c018df1
  1. 15
      src/api/api.ts
  2. 72
      src/components/playlist/PlaylistList.tsx

15
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,

72
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',
getPlaylists
['playlists', sortBy],
() => 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={
searchQuery === ''
? playlists
: playlists.filter((playlist: any) => {
return (
playlist.name
.toLowerCase()
.includes(searchQuery.toLowerCase()) ||
playlist.comment
?.toLowerCase()
.includes(searchQuery.toLowerCase())
);
})
}
data={searchQuery === '' ? playlists : filteredData}
cardTitle={{
prefix: 'playlist',
property: 'name',

Loading…
Cancel
Save