Improve api management, fix toasts, remove old code

package.json

@@ -41,7 +41,7 @@
     "react-responsive": "^9.0.2",
     "react-router": "^6.21.0",
     "react-router-dom": "^6.21.0",
-    "react-toastify": "^9.1.3",
+    "react-toastify": "^10.0.4",
     "react-use-measure": "^2.1.1",
     "redux": "^5.0.0",
     "semver": "^7.5.4",

src/components/Layout/TopNav.tsx

@@ -3,7 +3,6 @@ import AnimateHeight from 'react-animate-height';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import {
-  mdiChevronDown,
   mdiCogOutline,
   mdiDownloadCircleOutline,
   mdiFileDocumentAlertOutline,
@@ -61,7 +60,7 @@ const MenuItem = (
     to={id}
     key={id}
     className={({ isActive }) =>
-      cx('flex items-center gap-x-2', (isActive || isHighlighted) && 'text-topnav-icon-primary')}
+      cx('flex items-center gap-x-2', (isActive || isHighlighted) && 'text-topnav-text-primary')}
     onClick={(e) => {
       e.preventDefault();
       onClick();
@@ -158,7 +157,11 @@ function TopNav() {
     [networkStatus],
   );
 
-  const closeModalsAndSubmenus = () => {
+  const closeModalsAndSubmenus = (event?: React.MouseEvent) => {
+    if (layoutEditMode && event) {
+      event.preventDefault();
+      return;
+    }
     setShowActionsModal(false);
     setShowDashboardSettingsModal(false);
     setShowUtilitiesMenu(false);
@@ -227,12 +230,12 @@ function TopNav() {
                   : currentUserQuery.data?.Username.charAt(0)}
               </div>
               <span className="text-header-text">{currentUserQuery.data?.Username}</span>
-              <Icon path={mdiChevronDown} size={0.6666} />
             </div>
             <NavLink
               to="settings"
-              className={({ isActive }) => (isActive ? 'text-header-icon-primary' : '')}
-              onClick={() => closeModalsAndSubmenus()}
+              className={({ isActive }) =>
+                cx({ 'text-header-icon-primary': isActive, 'opacity-65 pointer-events-none': layoutEditMode })}
+              onClick={closeModalsAndSubmenus}
             >
               <Icon path={mdiCogOutline} size={0.8333} />
             </NavLink>

src/components/Toast.tsx

@@ -47,28 +47,24 @@ function Toast(props: Props) {
   );
 }
 
-const success = (header: string, message?: React.ReactNode, options?: ToastOptions) => {
+const success = (header: string, message?: React.ReactNode, options?: ToastOptions) =>
   toast.success(<Toast header={header} message={message} icon={mdiCheckboxMarkedCircleOutline} />, options);
-};
 
-const error = (header: string, message?: React.ReactNode, options?: ToastOptions) => {
+const error = (header: string, message?: React.ReactNode, options?: ToastOptions) =>
   toast.error(<Toast header={header} message={message} icon={mdiAlertCircleOutline} />, options);
-};
 
-const warning = (header: string, message?: React.ReactNode, options?: ToastOptions) => {
+const warning = (header: string, message?: React.ReactNode, options?: ToastOptions) =>
   toast.warning(<Toast header={header} message={message} icon={mdiAlertCircleOutline} />, options);
-};
 
-const info = (header: string, message?: React.ReactNode, options?: ToastOptions) => {
+const info = (header: string, message?: React.ReactNode, options?: ToastOptions) =>
   toast.info(<Toast header={header} message={message} icon={mdiInformationOutline} />, options);
-};
 
-const dismiss = (id: string) => toast.dismiss(id);
+const dismiss = (id: number | string) => toast.dismiss(id);
 
-const infoUpdate = (id: string, header: string, message?: React.ReactNode) =>
+const infoUpdate = (id: number | string, header: string, message?: React.ReactNode) =>
   toast.update(id, { render: <Toast header={header} message={message} icon={mdiInformationOutline} /> });
 
-const isActive = (id: string) => toast.isActive(id);
+const isActive = (id: number | string) => toast.isActive(id);
 
 export default {
   success,

src/core/react-query/auth/helpers.ts

@@ -0,0 +1,6 @@
+import store from '@/core/store';
+
+import type { AuthToken } from '@/core/types/api/authToken';
+
+export const transformApiKeys = (response: AuthToken[]) =>
+  response.filter(key => key.Username === store.getState().apiSession.username);

src/core/react-query/auth/mutations.ts

@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
 import { axiosV2 as axios } from '@/core/axios';
+import { invalidateQueries } from '@/core/react-query/queryClient';
 import { setDetails } from '@/core/slices/apiSession';
 import store from '@/core/store';
 
@@ -27,6 +28,9 @@ export const useCreateApiToken = () =>
           'Content-Type': 'application/json',
         },
       }),
+    onSuccess: () => {
+      invalidateQueries(['auth', 'apikey']);
+    },
   });
 
 export const useDeleteApiToken = () =>
@@ -38,4 +42,7 @@ export const useDeleteApiToken = () =>
         },
         data: key,
       }),
+    onSuccess: () => {
+      invalidateQueries(['auth', 'apikey']);
+    },
   });

src/core/react-query/auth/queries.ts

@@ -1,11 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { axiosV2 } from '@/core/axios';
+import { transformApiKeys } from '@/core/react-query/auth/helpers';
 
 import type { AuthToken } from '@/core/types/api/authToken';
 
 export const useApiKeyQuery = () =>
   useQuery<AuthToken[]>({
     queryKey: ['auth', 'apikey'],
     queryFn: () => axiosV2.get('auth'),
+    // Because we cannot delete other users' keys just using the device name even if we are an admin, we are only showing current user's keys
+    select: transformApiKeys,
+    initialData: [],
   });

src/pages/dashboard/DashboardPage.tsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { mdiLoading, mdiMenuDown } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { produce } from 'immer';
+import { useEffectOnce } from 'usehooks-ts';
 
 import Button from '@/components/Input/Button';
 import toast from '@/components/Toast';
@@ -37,20 +38,14 @@ const renderResizeHandle = () => (
 );
 
 const Toast = (
-  { currentLayout, setCurrentLayout }: { currentLayout: LayoutType, setCurrentLayout: (layout: LayoutType) => void },
+  { cancelLayoutChange, currentLayout }: { cancelLayoutChange: () => void, currentLayout: LayoutType },
 ) => {
   const dispatch = useDispatch();
 
   const settingsQuery = useSettingsQuery();
   const settings = settingsQuery.data;
   const { mutate: patchSettings } = usePatchSettingsMutation();
 
-  const cancelLayoutChange = useEventCallback(() => {
-    setCurrentLayout(settings.WebUI_Settings.layout.dashboard);
-    dispatch(setLayoutEditMode(false));
-    toast.dismiss('layoutEditMode');
-  });
-
   const saveLayout = useEventCallback(() => {
     const newSettings = produce(settings, (draftState) => {
       draftState.WebUI_Settings.layout.dashboard = currentLayout;
@@ -92,6 +87,8 @@ const Toast = (
 };
 
 function DashboardPage() {
+  const dispatch = useDispatch();
+
   const layoutEditMode = useSelector((state: RootState) => state.mainpage.layoutEditMode);
 
   const settingsQuery = useSettingsQuery();
@@ -120,31 +117,35 @@ function DashboardPage() {
     if (settingsQuery.isSuccess) setCurrentLayout(settings.WebUI_Settings.layout.dashboard);
   }, [settings, settingsQuery.isSuccess]);
 
+  const cancelLayoutChange = useEventCallback(() => {
+    setCurrentLayout(settings.WebUI_Settings.layout.dashboard);
+    dispatch(setLayoutEditMode(false));
+    toast.dismiss('layoutEditMode');
+  });
+
   useEffect(() => {
-    if (layoutEditMode) {
-      if (!toast.isActive('layoutEditMode')) {
-        toast.info(
-          '',
-          <Toast currentLayout={currentLayout} setCurrentLayout={setCurrentLayout} />,
-          {
-            autoClose: false,
-            draggable: false,
-            closeOnClick: false,
-            toastId: 'layoutEditMode',
-            className: 'max-w-[27.3rem] ml-auto',
-          },
-        );
-      } else {
-        toast.infoUpdate(
-          'layoutEditMode',
-          '',
-          <Toast currentLayout={currentLayout} setCurrentLayout={setCurrentLayout} />,
-        );
-      }
-    } else {
+    if (!layoutEditMode) {
       toast.dismiss('layoutEditMode');
+      return;
     }
-  }, [layoutEditMode, currentLayout]);
+
+    toast.info(
+      '',
+      <Toast
+        cancelLayoutChange={cancelLayoutChange}
+        currentLayout={currentLayout}
+      />,
+      {
+        autoClose: false,
+        draggable: false,
+        closeOnClick: false,
+        toastId: 'layoutEditMode',
+        className: 'max-w-[27.3rem] ml-auto',
+      },
+    );
+  }, [layoutEditMode, currentLayout, cancelLayoutChange]);
+
+  useEffectOnce(() => () => cancelLayoutChange());
 
   useEffect(() => {
     window.dispatchEvent(new Event('resize'));

src/pages/settings/SettingsPage.tsx

@@ -1,17 +1,14 @@
 /* global globalThis */
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useMediaQuery } from 'react-responsive';
 import { Outlet } from 'react-router';
 import { NavLink, useLocation } from 'react-router-dom';
 import { mdiLoading } from '@mdi/js';
 import { Icon } from '@mdi/react';
-import cx from 'classnames';
 import { isEqual } from 'lodash';
 
 import Button from '@/components/Input/Button';
 import toast from '@/components/Toast';
-import TransitionDiv from '@/components/TransitionDiv';
 import { usePatchSettingsMutation } from '@/core/react-query/settings/mutations';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { setItem as setMiscItem } from '@/core/slices/misc';
@@ -32,32 +29,43 @@ function SettingsPage() {
 
   const { pathname } = useLocation();
 
+  const toastId = useRef<number | string>();
+
   const settingsQuery = useSettingsQuery();
   const settings = settingsQuery.data;
   const { mutate: patchSettings } = usePatchSettingsMutation();
 
   const [newSettings, setNewSettings] = useState(settings);
-  const [showNav, setShowNav] = useState(false);
-  const isSm = useMediaQuery({ minWidth: 0, maxWidth: 767 });
 
   useEffect(() => {
     dispatch(setMiscItem({ webuiPreviewTheme: null }));
     setNewSettings(settings);
   }, [dispatch, settings]);
 
-  const unsavedChanges = useMemo(() => !isEqual(settings, newSettings), [newSettings, settings]);
+  const unsavedChanges = useMemo(
+    () => {
+      // if Username is null, settings haven't been copied yet into newSettings
+      if (!settingsQuery.isSuccess || !newSettings?.AniDb.Username) return false;
+      return !isEqual(settings, newSettings);
+    },
+    [newSettings, settings, settingsQuery.isSuccess],
+  );
 
-  if (unsavedChanges) {
-    toast.info('Unsaved Changes', 'Please save before leaving this page.', {
-      autoClose: 99999999999,
-      toastId: 'save-changes',
-    });
-  } else {
-    toast.dismiss('save-changes');
-  }
+  useEffect(() => {
+    if (!unsavedChanges) {
+      if (toastId.current) toast.dismiss(toastId.current);
+      return;
+    }
+
+    toastId.current = toast.info(
+      'Unsaved Changes',
+      'Please save before leaving this page.',
+      { autoClose: false },
+    );
+  }, [unsavedChanges]);
 
   useEffect(() => () => {
-    toast.dismiss('save-changes');
+    if (toastId.current) toast.dismiss(toastId.current);
   }, []);
 
   const updateSetting = (type: string, key: string, value: string | string[] | boolean) => {
@@ -89,14 +97,8 @@ function SettingsPage() {
   };
 
   return (
-    <div className="flex min-h-full grow justify-center gap-x-8" onClick={() => setShowNav(false)}>
-      <TransitionDiv
-        className="relative top-0 z-10 flex w-72 flex-col gap-y-4 rounded-md border border-panel-border bg-panel-background-transparent p-8 font-semibold"
-        show={!(isSm && !showNav)}
-        enter={cx(isSm ? 'transition-transform' : 'transition-none')}
-        enterFrom="-translate-x-64"
-        enterTo="translate-x-0"
-      >
+    <div className="flex min-h-full grow justify-center gap-x-8">
+      <div className="relative top-0 z-10 flex w-72 flex-col gap-y-4 rounded-md border border-panel-border bg-panel-background-transparent p-8 font-semibold">
         <div className="sticky top-8">
           <div className="mb-8 text-center text-xl opacity-100">Settings</div>
           <div className="flex flex-col items-center">
@@ -113,17 +115,7 @@ function SettingsPage() {
             ))}
           </div>
         </div>
-      </TransitionDiv>
-      {/* {isSm && ( */}
-      {/*  <div className="flex justify-center mb-8 font-semibold"> */}
-      {/*    Settings */}
-      {/*    <Icon path={mdiChevronRight} size={1} className="mx-1" /> */}
-      {/*    <div className="flex text-panel-text-primary rounded pl-2 border border-panel-text-primary items-center cursor-pointer" onClick={(e) => { e.stopPropagation(); setShowNav(!showNav); }}> */}
-      {/*      {find(items, item => item.path === pathname.split('/').pop())?.name} */}
-      {/*      <Icon path={mdiChevronDown} size={1} /> */}
-      {/*    </div> */}
-      {/*  </div> */}
-      {/* )} */}
+      </div>
       <div className="flex min-h-full w-[41rem] flex-col gap-y-8 overflow-y-visible rounded-md border border-panel-border bg-panel-background-transparent p-8">
         {settingsQuery.isPending
           ? (
@@ -155,6 +147,10 @@ function SettingsPage() {
                   </Button>
                 </div>
               )}
+              <div
+                className="fixed left-0 top-0 -z-10 h-full w-full opacity-20"
+                style={{ background: 'center / cover no-repeat url(/api/v3/Image/Random/Fanart)' }}
+              />
             </>
           )}
       </div>