update playlist views

src/components/playlist/PlaylistList.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import { useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
-import { Table, Icon } from 'rsuite';
-import { Helmet } from 'react-helmet-async';
 import { getPlaylists } from '../../api/api';
-import ListView from '../views/ListView';
+import ListViewType from '../viewtypes/ListViewType';
 import Loader from '../loader/Loader';
 import GenericPage from '../layout/GenericPage';
-import PlaylistViewHeader from './PlaylistViewHeader';
 
 const tableColumns = [
   {
@@ -64,21 +61,20 @@ const PlaylistList = () => {
 
   return (
     <GenericPage>
-      <Helmet>
-        <title>sonicd - Playlists</title>
-      </Helmet>
-      <ListView
+      <ListViewType
         data={playlists}
         handleRowClick={handleRowClick}
         tableColumns={tableColumns}
+        virtualized={false}
+        autoHeight
       >
-        <Table.Column width={150} align="center" flexGrow={1}>
+        {/* <Table.Column width={150} align="center" flexGrow={1}>
           <Table.HeaderCell>Actions</Table.HeaderCell>
           <Table.Cell>
             <Icon icon="ellipsis-v" />
           </Table.Cell>
-        </Table.Column>
-      </ListView>
+        </Table.Column> */}
+      </ListViewType>
     </GenericPage>
   );
 };

src/components/playlist/PlaylistView.tsx

@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
-import { Helmet } from 'react-helmet-async';
-import { getPlaylist, getStream } from '../../api/api';
+import { getPlaylist } from '../../api/api';
+import { useAppDispatch } from '../../redux/hooks';
+import { setPlayQueue, clearPlayQueue } from '../../redux/playQueueSlice';
 import GenericPage from '../layout/GenericPage';
-import ListView from '../views/ListView';
+import ListViewType from '../viewtypes/ListViewType';
 import Loader from '../loader/Loader';
 import PlaylistViewHeader from './PlaylistViewHeader';
-import Player from '../player/Player';
 
-type PlaylistParams = {
+interface PlaylistParams {
   id: string;
-};
+}
 
 const tableColumns = [
   {
@@ -58,11 +58,13 @@ const PlaylistView = () => {
     ['playlist', id],
     () => getPlaylist(id)
   );
-  const [playing, setPlaying] = useState(null);
+
+  const dispatch = useAppDispatch();
 
   const handleRowClick = (e: any) => {
-    console.log(e);
-    setPlaying(e.streamUrl);
+    const newPlayQueue = playlist.entry.slice([e.index], playlist.entry.length);
+    dispatch(clearPlayQueue());
+    dispatch(setPlayQueue(newPlayQueue));
   };
 
   if (isLoading) {
@@ -73,8 +75,6 @@ const PlaylistView = () => {
     return <span>Error: {error.message}</span>;
   }
 
-  console.log(playlist);
-
   return (
     <GenericPage
       title="Playlists"
@@ -87,15 +87,14 @@ const PlaylistView = () => {
         />
       }
     >
-      <Helmet>
-        <title>sonicd - {playlist.name}</title>
-      </Helmet>
-      <ListView
+      <ListViewType
         data={playlist.entry}
         tableColumns={tableColumns}
         handleRowClick={handleRowClick}
+        tableHeight={700}
+        virtualized
+        autoHeight
       />
-      {/* {setPlaying && <Player url={playing} />} */}
     </GenericPage>
   );
 };