Renamer fixes, check settings query status in MainPage instead of das… (

#1131) * Renamer fixes, check settings query status in MainPage instead of dashboard * Change document title to just "Shoko"
ShokoAnime · Nov 3, 2024 · 9da39ff · 9da39ff
1 parent 86a80b0
commit 9da39ff
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
 <!--     <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
-    <title>Shoko WEB UI</title>
+    <title>Shoko</title>
     <link rel="shortcut icon" href="/favicon.ico" />
   </head>
   <body>

diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import { mdiLoading, mdiMenuDown } from '@mdi/js';
+import { mdiMenuDown } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { produce } from 'immer';
 
@@ -148,17 +148,6 @@ function DashboardPage() {
     window.dispatchEvent(new Event('resize'));
   }, [currentLayout]);
 
-  // settingsQuery.isSuccess is always true due to the existence of initialData
-  // settingsRevision will be 0 before the first actual fetch and it will never be 0 for fetched data
-  // This is kind of a hack but it works
-  if (settingsQuery.data.WebUI_Settings.settingsRevision === 0) {
-    return (
-      <div className="flex grow items-center justify-center text-panel-text-primary">
-        <Icon path={mdiLoading} size={4} spin />
-      </div>
-    );
-  }
-
   return (
     <>
       <ResponsiveGridLayout

diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
@@ -1,9 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { Outlet } from 'react-router';
 import { Slide, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 import { Tooltip } from 'react-tooltip';
+import { mdiLoading } from '@mdi/js';
+import { Icon } from '@mdi/react';
 
 import ImportFolderModal from '@/components/Dialogs/ImportFolderModal';
 import TopNav from '@/components/Layout/TopNav';
@@ -13,14 +15,31 @@ import { useSettingsQuery } from '@/core/react-query/settings/queries';
 function MainPage() {
   const dispatch = useDispatch();
 
-  const { notifications, toastPosition } = useSettingsQuery().data.WebUI_Settings;
+  const settingsQuery = useSettingsQuery();
+  const { notifications, toastPosition } = settingsQuery.data.WebUI_Settings;
+
+  // settingsQuery.isSuccess is always true due to the existence of initialData
+  // settingsRevision will be 0 before the first actual fetch and it will never be 0 for fetched data
+  // This is kind of a hack but it works
+  const isSettingsLoaded = useMemo(
+    () => settingsQuery.data.WebUI_Settings.settingsRevision > 0,
+    [settingsQuery.data],
+  );
 
   useEffect(() => {
-    dispatch({ type: Events.MAINPAGE_LOADED });
-  }, [dispatch]);
+    if (isSettingsLoaded) dispatch({ type: Events.MAINPAGE_LOADED });
+  }, [dispatch, isSettingsLoaded]);
 
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  if (!isSettingsLoaded) {
+    return (
+      <div className="flex grow items-center justify-center text-panel-text-primary">
+        <Icon path={mdiLoading} size={4} spin />
+      </div>
+    );
+  }
+
   return (
     <>
       {notifications && (

diff --git a/src/pages/utilities/Renamer.tsx b/src/pages/utilities/Renamer.tsx
@@ -320,7 +320,11 @@ const Renamer = () => {
   const { isPending: settingsPatchPending, mutate: patchSettings } = usePatchSettingsMutation();
 
   const [moveFiles, toggleMoveFiles] = useToggle(settings.Plugins.Renamer.MoveOnImport);
-  const [renameFiles, toggleRenameFiles] = useToggle(settings.Plugins.Renamer.RenameOnImport);
+  // In the case where move on import is not selected, we will assume the user wants to rename files when
+  // they open this page. Otherwise, why are they here? In most cases, it would be for renaming.
+  const [renameFiles, toggleRenameFiles] = useToggle(
+    settings.Plugins.Renamer.MoveOnImport ? settings.Plugins.Renamer.RenameOnImport : true,
+  );
   const [showSettings, toggleSettings] = useToggle(false);
   const [showAddFilesModal, toggleAddFilesModal] = useToggle(false);
   const [showConfigModal, toggleConfigModal] = useToggle(false);
@@ -484,6 +488,14 @@ const Renamer = () => {
     });
   });
 
+  const [renameDisabled, renameDisabledReason] = useMemo(() => {
+    if (relocatePending) return [true, 'Renaming in progress...'];
+    if (configEdited) return [true, 'Config has been edited, please save before renaming files'];
+    if (addedFiles.length === 0) return [true, 'No files added'];
+    if (!moveFiles && !renameFiles) return [true, 'Neither rename nor move is selected. No action to be performed'];
+    return [false, ''];
+  }, [addedFiles.length, configEdited, moveFiles, relocatePending, renameFiles]);
+
   return (
     <div className="flex grow flex-col gap-y-3">
       <ShokoPanel title="File Rename">
@@ -521,8 +533,8 @@ const Renamer = () => {
               className="flex h-13 flex-wrap items-center gap-x-2"
               onClick={handleRename}
               loading={relocatePending}
-              disabled={configEdited || relocatePending || addedFiles.length === 0}
-              tooltip={configEdited ? 'Config has been edited, please save before relocating files' : ''}
+              disabled={renameDisabled}
+              tooltip={renameDisabledReason}
             >
               <Icon path={mdiFileDocumentEditOutline} size={1} />
               Rename Files