add initial files

src/renderer/router/AppRouter.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+import { Routes, Route } from 'react-router-dom';
+import { LoginRoute } from 'renderer/features/auth';
+import { DashboardRoute } from 'renderer/features/dashboard';
+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 { ServersRoute } from 'renderer/features/servers';
+import { AuthLayout, DefaultLayout } from '../layouts';
+import { AuthOutlet } from './outlets/AuthOutlet';
+import { PrivateOutlet } from './outlets/PrivateOutlet';
+import { AppRoute } from './utils/routes';
+
+export const AppRouter = () => {
+  return (
+    <Routes>
+      <Route element={<AuthOutlet redirectTo={AppRoute.HOME} />}>
+        <Route element={<AuthLayout />}>
+          <Route element={<LoginRoute />} path={AppRoute.LOGIN} />
+        </Route>
+      </Route>
+      <Route
+        element={<PrivateOutlet redirectTo={AppRoute.LOGIN} />}
+        path={AppRoute.HOME}
+      >
+        <Route element={<DefaultLayout />}>
+          <Route element={<DashboardRoute />} path={AppRoute.HOME} />
+          <Route element={<ServersRoute />} path={AppRoute.SERVERS} />
+          <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={<></>} path={AppRoute.LIBRARY_ARTISTS} />
+        </Route>
+        <Route element={<></>} path={AppRoute.PLAYING} />
+      </Route>
+    </Routes>
+  );
+};

src/renderer/router/outlets/AuthOutlet.tsx

@@ -0,0 +1,17 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { useAuthStore } from 'renderer/store';
+
+interface AuthOutletProps {
+  redirectTo: string;
+}
+
+export const AuthOutlet = ({ redirectTo }: AuthOutletProps) => {
+  const location = useLocation();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
+  if (isAuthenticated) {
+    return <Navigate replace state={{ from: location }} to={redirectTo} />;
+  }
+
+  return <Outlet />;
+};

src/renderer/router/outlets/PrivateOutlet.tsx

@@ -0,0 +1,17 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { useAuthStore } from 'renderer/store';
+
+interface PrivateOutletProps {
+  redirectTo: string;
+}
+
+export const PrivateOutlet = ({ redirectTo }: PrivateOutletProps) => {
+  const location = useLocation();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
+  if (isAuthenticated) {
+    return <Outlet />;
+  }
+
+  return <Navigate replace state={{ from: location }} to={redirectTo} />;
+};

src/renderer/router/utils/routes.ts

@@ -0,0 +1,50 @@
+// Referenced from: https://betterprogramming.pub/the-best-way-to-manage-routes-in-a-react-project-with-typescript-c4e8d4422d64
+
+export enum AppRoute {
+  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',
+  LOGIN = '/login',
+  PLAYING = '/playing',
+  PLAYLISTS = '/playlists',
+  PLAYLISTS_DETAIL = '/playlists/:playlistId',
+  SEARCH = '/search',
+  SERVERS = '/servers',
+}
+
+type TArgs =
+  | { path: AppRoute.HOME }
+  | { path: AppRoute.LOGIN }
+  | { path: AppRoute.PLAYING }
+  | { path: AppRoute.SERVERS }
+  | { path: AppRoute.SEARCH }
+  | { path: AppRoute.LIBRARY_ARTISTS }
+  | { path: AppRoute.LIBRARY_ARTISTS_DETAIL }
+  | { path: AppRoute.LIBRARY_ALBUMARTISTS }
+  | { path: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL }
+  | { path: AppRoute.LIBRARY }
+  | { path: AppRoute.LIBRARY }
+  | { path: AppRoute.LIBRARY_ALBUMS }
+  | {
+      params: { albumId: string };
+      path: AppRoute.LIBRARY_ALBUMS_DETAIL;
+    };
+
+type TArgsWithParams = Extract<TArgs, { params: any; path: any }>;
+
+export const createPath = (args: TArgs) => {
+  // eslint-disable-next-line no-prototype-builtins
+  if (args.hasOwnProperty('params') === false) return args.path;
+
+  // Create a path by replacing params in the route definition
+  return Object.entries((args as TArgsWithParams).params).reduce(
+    (previousValue: string, [param, value]) =>
+      previousValue.replace(`:${param}`, `${value}`),
+    args.path
+  );
+};