jeffvli
3 years ago
4 changed files with 103 additions and 25 deletions
@ -0,0 +1,87 @@ |
|||
import React from 'react'; |
|||
import { useQuery } from 'react-query'; |
|||
import { useAppDispatch, useAppSelector } from '../../redux/hooks'; |
|||
import { clearPlayQueue, setPlayQueue } from '../../redux/playQueueSlice'; |
|||
import { getStarred } from '../../api/api'; |
|||
import GenericPage from '../layout/GenericPage'; |
|||
import Loader from '../loader/Loader'; |
|||
import ListViewType from '../viewtypes/ListViewType'; |
|||
|
|||
const tableColumns = [ |
|||
{ |
|||
header: '#', |
|||
dataKey: 'index', |
|||
alignment: 'center', |
|||
width: 70, |
|||
}, |
|||
{ |
|||
header: 'Title', |
|||
dataKey: 'title', |
|||
alignment: 'left', |
|||
resizable: true, |
|||
width: 350, |
|||
}, |
|||
|
|||
{ |
|||
header: 'Artist', |
|||
dataKey: 'artist', |
|||
alignment: 'center', |
|||
resizable: true, |
|||
width: 300, |
|||
}, |
|||
{ |
|||
header: 'Album', |
|||
dataKey: 'album', |
|||
alignment: 'center', |
|||
resizable: true, |
|||
width: 300, |
|||
}, |
|||
{ |
|||
header: 'Duration', |
|||
dataKey: 'duration', |
|||
alignment: 'center', |
|||
resizable: true, |
|||
width: 70, |
|||
}, |
|||
]; |
|||
|
|||
const StarredView = () => { |
|||
const { isLoading, isError, data: starred, error }: any = useQuery( |
|||
'starred', |
|||
getStarred |
|||
); |
|||
|
|||
const tracks = useAppSelector((state) => state.playQueue); |
|||
|
|||
const dispatch = useAppDispatch(); |
|||
|
|||
const handleRowClick = (e: any) => { |
|||
const newPlayQueue = starred.entry.slice([e.index], starred.entry.length); |
|||
console.log(newPlayQueue); |
|||
dispatch(clearPlayQueue()); |
|||
dispatch(setPlayQueue(newPlayQueue)); |
|||
}; |
|||
|
|||
if (isLoading) { |
|||
return <Loader />; |
|||
} |
|||
|
|||
if (isError) { |
|||
return <span>Error: {error.message}</span>; |
|||
} |
|||
|
|||
console.log(tracks); |
|||
|
|||
return ( |
|||
<GenericPage header={<h1>Starred</h1>}> |
|||
<ListViewType |
|||
data={starred.entry} |
|||
tableColumns={tableColumns} |
|||
handleRowClick={handleRowClick} |
|||
virtualized |
|||
/> |
|||
</GenericPage> |
|||
); |
|||
}; |
|||
|
|||
export default StarredView; |
Loading…
Reference in new issue