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