Add action-required route

src/renderer/router/app-outlet.tsx

@@ -1,4 +1,9 @@
+import { useState, useEffect } from 'react';
+import isElectron from 'is-electron';
 import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { settings } from '@/renderer/features/settings';
+import { useServerCredential } from '@/renderer/features/shared';
+import { AppRoute } from '@/renderer/router/routes';
 import { useAuthStore } from '@/renderer/store';
 
 interface PrivateOutletProps {
@@ -7,8 +12,37 @@ interface PrivateOutletProps {
 
 export const AppOutlet = ({ redirectTo }: PrivateOutletProps) => {
   const location = useLocation();
-  const isAuthenticated = useAuthStore((state) => !!state.accessToken);
   const logout = useAuthStore((state) => state.logout);
+  const isAuthenticated = useAuthStore((state) => !!state.accessToken);
+  const { serverToken } = useServerCredential();
+  const currentServer = useAuthStore((state) => state.currentServer);
+
+  const [isMpvRequired, setIsMpvRequired] = useState(false);
+  const isServerRequired = !currentServer;
+  const isCredentialRequired = currentServer?.noCredential && !serverToken;
+
+  useEffect(() => {
+    const getMpvPath = async () => {
+      if (!isElectron()) return setIsMpvRequired(false);
+      const mpvPath = await settings.get('mpv_path');
+      return setIsMpvRequired(!mpvPath);
+    };
+
+    getMpvPath();
+  }, []);
+
+  const actions = [isServerRequired, isCredentialRequired, isMpvRequired];
+  const actionRequired = actions.some((c) => c);
+
+  if (actionRequired) {
+    return (
+      <Navigate
+        replace
+        state={{ from: location }}
+        to={AppRoute.ACTION_REQUIRED}
+      />
+    );
+  }
 
   if (isAuthenticated) {
     return <Outlet />;

src/renderer/router/app-router.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { Routes, Route, Link } from 'react-router-dom';
+import { ActionRequiredRoute } from '@/renderer/features/action-required';
 import { AlbumListRoute } from '@/renderer/features/albums';
 import { LoginRoute } from '@/renderer/features/auth';
 import { DashboardRoute } from '@/renderer/features/dashboard';
@@ -28,6 +29,12 @@ export const AppRouter = () => {
         </Route>
         <Route element={<></>} path={AppRoute.PLAYING} />
       </Route>
+      <Route element={<DefaultLayout shell />}>
+        <Route
+          element={<ActionRequiredRoute />}
+          path={AppRoute.ACTION_REQUIRED}
+        />
+      </Route>
     </Routes>
   );
 };

src/renderer/router/routes.ts

@@ -1,6 +1,7 @@
 // Referenced from: https://betterprogramming.pub/the-best-way-to-manage-routes-in-a-react-project-with-typescript-c4e8d4422d64
 
 export enum AppRoute {
+  ACTION_REQUIRED = '/action-required',
   EXPLORE = '/explore',
   HOME = '/',
   LIBRARY_ALBUMARTISTS = '/library/album-artists',
@@ -22,6 +23,7 @@ export enum AppRoute {
 
 type TArgs =
   | { path: AppRoute.HOME }
+  | { path: AppRoute.ACTION_REQUIRED }
   | { path: AppRoute.NOW_PLAYING }
   | { path: AppRoute.EXPLORE }
   | { path: AppRoute.LOGIN }