Update default routing

src/renderer/features/library/queries/getAlbums.ts

@@ -1,25 +0,0 @@
-import { useInfiniteQuery, useQuery } from 'react-query';
-import { queryKeys } from 'renderer/api/queryKeys';
-import { AlbumsResponse } from 'renderer/api/types';
-import { albumsApi, AlbumsRequest } from '../../../api/albumsApi';
-
-export const useAlbums = (params: AlbumsRequest) => {
-  return useQuery({
-    queryFn: () => albumsApi.getAlbums(params),
-    queryKey: queryKeys.albums(params),
-  });
-};
-
-export const useAlbumsInfinite = (params: AlbumsRequest) => {
-  return useInfiniteQuery({
-    getNextPageParam: (lastPage: AlbumsResponse) => {
-      return !!lastPage.pagination.nextPage;
-    },
-    getPreviousPageParam: (firstPage: AlbumsResponse) => {
-      return !!firstPage.pagination.prevPage;
-    },
-    queryFn: ({ pageParam }) =>
-      albumsApi.getAlbums({ ...(pageParam || params) }),
-    queryKey: queryKeys.albums(params),
-  });
-};

src/renderer/features/library/routes/LibraryAlbumsRoute.tsx

@@ -1,146 +0,0 @@
-/* eslint-disable no-plusplus */
-import { useState } from 'react';
-import { Button, Group, Menu } from '@mantine/core';
-import { useSetState } from '@mantine/hooks';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import i18n from '../../../../i18n/i18n';
-import { Item } from '../../../../types';
-import { albumsApi } from '../../../api/albumsApi';
-import { VirtualInfiniteGrid } from '../../../components/virtual-grid/VirtualInfiniteGrid';
-import { AppRoute } from '../../../router/utils/routes';
-import { AnimatedPage } from '../../shared/components/AnimatedPage';
-import { ViewType, ViewTypeButton } from '../components/ViewTypeButton';
-import { useAlbums } from '../queries/getAlbums';
-
-export enum AlbumSort {
-  DATE_ADDED = 'date_added',
-  DATE_ADDED_REMOTE = 'date_added_remote',
-  DATE_PLAYED = 'date_played',
-  DATE_RELEASED = 'date_released',
-  RANDOM = 'random',
-  RATING = 'rating',
-  TITLE = 'title',
-  YEAR = 'year',
-}
-
-const FILTERS = [
-  { name: i18n.t('filters.dateAdded'), value: AlbumSort.DATE_ADDED },
-  {
-    name: i18n.t('filters.dateAddedRemote'),
-    value: AlbumSort.DATE_ADDED_REMOTE,
-  },
-  { name: i18n.t('filters.datePlayed'), value: AlbumSort.DATE_PLAYED },
-  { name: i18n.t('filters.dateReleased'), value: AlbumSort.DATE_RELEASED },
-  { name: i18n.t('filters.random'), value: AlbumSort.RANDOM },
-  { name: i18n.t('filters.rating'), value: AlbumSort.RATING },
-  { name: i18n.t('filters.title'), value: AlbumSort.TITLE },
-  { name: i18n.t('filters.year'), value: AlbumSort.YEAR },
-];
-
-export const LibraryAlbumsRoute = () => {
-  const [viewType, setViewType] = useState(ViewType.Grid);
-  const [filters, setFilters] = useSetState({
-    orderBy: 'asc',
-    sortBy: AlbumSort.TITLE,
-  });
-
-  const { data: albums } = useAlbums({
-    skip: 0,
-    take: 0,
-    ...filters,
-  });
-
-  return (
-    <AnimatedPage>
-      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <Group mb={10} position="apart">
-          <Menu position="bottom-start">
-            <Menu.Target>
-              <Button variant="subtle">
-                {
-                  FILTERS.find((filter) => filter.value === filters.sortBy)
-                    ?.name
-                }
-              </Button>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Item
-                onClick={() => setFilters({ sortBy: AlbumSort.TITLE })}
-              >
-                Title
-              </Menu.Item>
-              <Menu.Item onClick={() => setFilters({ sortBy: AlbumSort.YEAR })}>
-                Year
-              </Menu.Item>
-              <Menu.Item
-                onClick={() => setFilters({ sortBy: AlbumSort.RATING })}
-              >
-                Rating
-              </Menu.Item>
-              <Menu.Item
-                onClick={() => setFilters({ sortBy: AlbumSort.DATE_RELEASED })}
-              >
-                Date Released
-              </Menu.Item>
-              <Menu.Item
-                onClick={() => setFilters({ sortBy: AlbumSort.DATE_ADDED })}
-              >
-                Date Added
-              </Menu.Item>
-              <Menu.Item
-                onClick={() =>
-                  setFilters({ sortBy: AlbumSort.DATE_ADDED_REMOTE })
-                }
-              >
-                Date Added (Remote)
-              </Menu.Item>
-            </Menu.Dropdown>
-          </Menu>
-
-          <ViewTypeButton
-            handler={setViewType}
-            menuProps={{ position: 'bottom-end' }}
-            type={viewType}
-          />
-        </Group>
-        <div style={{ flex: 1 }}>
-          {albums && (
-            <AutoSizer>
-              {({ height, width }) => (
-                <VirtualInfiniteGrid
-                  cardControls={{
-                    endpoint: albumsApi.getAlbum,
-                    idProperty: 'id',
-                    type: Item.ALBUM,
-                  }}
-                  cardRows={[
-                    {
-                      align: 'center',
-                      prop: 'name',
-                      route: {
-                        prop: 'id',
-                        route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-                      },
-                    },
-                    {
-                      align: 'center',
-                      prop: 'year',
-                    },
-                  ]}
-                  height={height}
-                  itemCount={albums.pagination.totalEntries}
-                  itemGap={20}
-                  itemSize={180}
-                  minimumBatchSize={100}
-                  query={albumsApi.getAlbums}
-                  queryParams={filters}
-                  width={width}
-                />
-              )}
-            </AutoSizer>
-          )}
-        </div>
-      </div>
-    </AnimatedPage>
-  );
-};

src/renderer/features/library/routes/LibraryArtistsRoute.tsx

@@ -1,18 +0,0 @@
-/* eslint-disable no-plusplus */
-import { AnimatedPage } from '../../shared/components/AnimatedPage';
-import { useAlbums } from '../queries/getAlbums';
-
-export const LibraryArtistsRoute = () => {
-  const params = {
-    orderBy: 'asc',
-    sortBy: 'title',
-  };
-
-  const { data: albums } = useAlbums({
-    skip: 0,
-    take: 0,
-    ...params,
-  });
-
-  return <AnimatedPage>Temp</AnimatedPage>;
-};

src/renderer/features/library/routes/LibraryRoute.tsx

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-import { AppRoute } from '../../../router/utils/routes';
-import { AnimatedPage } from '../../shared/components/AnimatedPage';
-import LibraryTab from '../components/LibraryTab';
-
-const TabContainer = styled.div`
-  display: flex;
-  flex-flow: row wrap;
-  gap: 1rem;
-`;
-
-export const LibraryRoute = () => {
-  return (
-    <AnimatedPage>
-      <TabContainer>
-        <LibraryTab to={AppRoute.LIBRARY_ALBUMS}>Albums</LibraryTab>
-        <LibraryTab to={AppRoute.LIBRARY_ALBUMARTISTS}>
-          Album Artists
-        </LibraryTab>
-        <LibraryTab to={AppRoute.LIBRARY_ARTISTS}>Artists</LibraryTab>
-      </TabContainer>
-    </AnimatedPage>
-  );
-};

src/renderer/router/app-router.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { Routes, Route } from 'react-router-dom';
-import { LibraryAlbumsRoute } from '@/renderer/features/library/routes/LibraryAlbumsRoute';
-import { LibraryArtistsRoute } from '@/renderer/features/library/routes/LibraryArtistsRoute';
-import { LibraryRoute } from '@/renderer/features/library/routes/LibraryRoute';
+import { AlbumListRoute } from '@/renderer/features/albums/routes/album-list-route';
 import { AuthOutlet } from '@/renderer/router/auth-outlet';
 import { PrivateOutlet } from '@/renderer/router/private-outlet';
 import { LoginRoute } from '../features/auth';
@@ -24,25 +22,7 @@ export const AppRouter = () => {
       >
         <Route element={<DefaultLayout />}>
           <Route element={<DashboardRoute />} path={AppRoute.HOME} />
-          <Route element={<></>} path={AppRoute.SEARCH} />
-
-          <Route element={<LibraryRoute />} path={AppRoute.LIBRARY} />
-          <Route
-            element={<DashboardRoute />}
-            path={AppRoute.LIBRARY_ALBUMARTISTS}
-          />
-          <Route
-            element={<LibraryAlbumsRoute />}
-            path={AppRoute.LIBRARY_ALBUMS}
-          />
-          <Route
-            element={<LibraryAlbumsRoute />}
-            path={AppRoute.LIBRARY_ALBUMS}
-          />
-          <Route
-            element={<LibraryArtistsRoute />}
-            path={AppRoute.LIBRARY_ARTISTS}
-          />
+          <Route element={<AlbumListRoute />} path={AppRoute.LIBRARY_ALBUMS} />
           <Route element={<></>} path={AppRoute.LIBRARY_ARTISTS} />
         </Route>
         <Route element={<></>} path={AppRoute.PLAYING} />

src/renderer/router/routes.ts

@@ -1,14 +1,16 @@
 // Referenced from: https://betterprogramming.pub/the-best-way-to-manage-routes-in-a-react-project-with-typescript-c4e8d4422d64
 
 export enum AppRoute {
+  EXPLORE = '/explore',
   HOME = '/',
-  LIBRARY = '/library',
   LIBRARY_ALBUMARTISTS = '/library/album-artists',
   LIBRARY_ALBUMARTISTS_DETAIL = '/library/album-artists/:albumArtistId',
   LIBRARY_ALBUMS = '/library/albums',
   LIBRARY_ALBUMS_DETAIL = '/library/albums/:albumId',
   LIBRARY_ARTISTS = '/library/artists',
   LIBRARY_ARTISTS_DETAIL = '/library/artists/:artistId',
+  LIBRARY_FOLDERS = '/library/folders',
+  LIBRARY_SONGS = '/library/songs',
   LOGIN = '/login',
   PLAYING = '/playing',
   PLAYLISTS = '/playlists',
@@ -19,6 +21,7 @@ export enum AppRoute {
 
 type TArgs =
   | { path: AppRoute.HOME }
+  | { path: AppRoute.EXPLORE }
   | { path: AppRoute.LOGIN }
   | { path: AppRoute.PLAYING }
   | { path: AppRoute.SERVERS }
@@ -27,9 +30,9 @@ type TArgs =
   | { path: AppRoute.LIBRARY_ARTISTS_DETAIL }
   | { path: AppRoute.LIBRARY_ALBUMARTISTS }
   | { path: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL }
-  | { path: AppRoute.LIBRARY }
-  | { path: AppRoute.LIBRARY }
   | { path: AppRoute.LIBRARY_ALBUMS }
+  | { path: AppRoute.LIBRARY_FOLDERS }
+  | { path: AppRoute.LIBRARY_SONGS }
   | {
       params: { albumId: string };
       path: AppRoute.LIBRARY_ALBUMS_DETAIL;