Add starred page

src/App.tsx

@@ -11,6 +11,7 @@ import Settings from './components/settings/Settings';
 import NowPlayingView from './components/player/NowPlayingView';
 import Player from './components/player/Player';
 import Login from './components/settings/Login';
+import StarredView from './components/starred/StarredView';
 
 const queryClient = new QueryClient();
 
@@ -39,7 +40,8 @@ const App = () => {
             <Route path="/playlists">
               <PlaylistList />
             </Route>
-            <Route path="/">Main route</Route>
+            <Route path="/starred" component={StarredView} />
+            <Route path="/" />
           </Switch>
         </Layout>
       </Router>

src/components/layout/Layout.tsx

@@ -28,6 +28,9 @@ const Layout = ({ footer, children }: any) => {
       case 'playlists':
         route = '/playlists';
         break;
+      case 'starred':
+        route = '/starred';
+        break;
       case 'settings':
         route = '/settings';
         break;

src/components/layout/Sidebar.tsx

@@ -1,14 +1,6 @@
 import React from 'React';
 import classNames from 'classnames';
-import {
-  Sidebar as Sb,
-  Sidenav,
-  Dropdown,
-  Nav,
-  Navbar,
-  Icon,
-  IconButton,
-} from 'rsuite';
+import { Sidebar as Sb, Sidenav, Dropdown, Nav, Icon } from 'rsuite';
 import '../../styles/Sidebar.global.css';
 
 const Sidebar = ({
@@ -33,13 +25,6 @@ const Sidebar = ({
     sidebar__expander_false: expand === false,
   });
 
-  const iconStyles = {
-    width: 56,
-    height: 56,
-    lineHeight: '56px',
-    textAlign: 'center',
-  };
-
   return (
     <Sb
       id="sidebar"
@@ -52,7 +37,7 @@ const Sidebar = ({
         expanded={expand}
         appearance="default"
       >
-        <Sidenav.Header></Sidenav.Header>
+        <Sidenav.Header />
         <Sidenav.Body>
           <Nav>
             <Nav.Item
@@ -79,6 +64,14 @@ const Sidebar = ({
             >
               Playlists
             </Nav.Item>
+            <Nav.Item
+              active={active === 'starred'}
+              eventKey="starred"
+              icon={<Icon icon="star" />}
+              onSelect={handleSidebarSelect}
+            >
+              Starred
+            </Nav.Item>
             <Dropdown
               placement="rightStart"
               eventKey="library"
@@ -107,13 +100,6 @@ const Sidebar = ({
               >
                 Genres
               </Dropdown.Item>
-              <Dropdown.Item
-                active={active === 'library-4'}
-                eventKey="library-4"
-                onSelect={handleSidebarSelect}
-              >
-                Starred
-              </Dropdown.Item>
               <Dropdown.Item
                 active={active === 'library-5'}
                 eventKey="library-5"

src/components/starred/StarredView.tsx

@@ -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;