Add Collection Page to Settings. (#807)

ShokoAnime · Feb 4, 2024 · fda4ef9 · fda4ef9
1 parent a317eac
commit fda4ef9
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 221 deletions.
diff --git a/src/core/router/index.tsx b/src/core/router/index.tsx
@@ -30,6 +30,7 @@ import MainPage from '@/pages/main/MainPage';
 import SettingsPage from '@/pages/settings/SettingsPage';
 import AniDBSettings from '@/pages/settings/tabs/AniDBSettings';
 import ApiKey from '@/pages/settings/tabs/ApiKeys';
+import CollectionSettings from '@/pages/settings/tabs/CollectionSettings';
 import GeneralSettings from '@/pages/settings/tabs/GeneralSettings';
 import ImportSettings from '@/pages/settings/tabs/ImportSettings';
 import MetadataSitesSettings from '@/pages/settings/tabs/MetadataSitesSettings';
@@ -110,6 +111,7 @@ const router = sentryCreateBrowserRouter(
             <Route path="import" element={<ImportSettings />} />
             <Route path="anidb" element={<AniDBSettings />} />
             <Route path="metadata-sites" element={<MetadataSitesSettings />} />
+            <Route path="collection" element={<CollectionSettings />} />
             <Route path="user-management" element={<UserManagementSettings />} />
             <Route path="api-keys" element={<ApiKey />} />
           </Route>

diff --git a/src/css/common.css b/src/css/common.css
@@ -150,6 +150,11 @@ body {
   font-family: Sora, sans, serif, mono !important;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
+.Toastify__progress-bar {
+  height: 10% !important;
+}
+
 /* stylelint-disable-next-line selector-class-pattern */
 .Toastify__progress-bar--success {
   background: theme('colors.panel-text-important') !important;

diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
@@ -18,6 +18,7 @@ const items = [
   { name: 'Import', path: 'import' },
   { name: 'AniDB', path: 'anidb' },
   { name: 'Metadata Sites', path: 'metadata-sites' },
+  { name: 'Collection', path: 'collection' },
   // { name: 'Display', path: 'display' },
   { name: 'User Management', path: 'user-management' },
   // { name: 'Themes', path: 'themes' },

diff --git a/src/pages/settings/tabs/AniDBSettings.tsx b/src/pages/settings/tabs/AniDBSettings.tsx
@@ -1,13 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, { useState } from 'react';
-import { mdiMinusCircleOutline, mdiPlusCircleOutline } from '@mdi/js';
-import { Icon } from '@mdi/react';
+import React from 'react';
 import cx from 'classnames';
-import { remove } from 'lodash';
 
-import LanguagesModal from '@/components/Dialogs/LanguagesModal';
-import { languageDescription } from '@/components/Dialogs/constants';
-import DnDList from '@/components/DnDList/DnDList';
 import Button from '@/components/Input/Button';
 import Checkbox from '@/components/Input/Checkbox';
 import InputSmall from '@/components/Input/InputSmall';
@@ -16,8 +10,6 @@ import toast from '@/components/Toast';
 import { useAniDBTestLoginMutation } from '@/core/react-query/settings/mutations';
 import useSettingsContext from '@/hooks/useSettingsContext';
 
-import type { DropResult } from '@hello-pangea/dnd';
-
 const UpdateFrequencyValues = () => (
   <>
     <option value={1}>Never</option>
@@ -30,12 +22,9 @@ const UpdateFrequencyValues = () => (
 );
 
 function AniDBSettings() {
-  const { newSettings, setNewSettings, updateSetting } = useSettingsContext();
-
+  const { newSettings, updateSetting } = useSettingsContext();
   const { isPending: isAnidbLoginPending, mutate: testAniDbLogin } = useAniDBTestLoginMutation();
 
-  const [showLanguagesModal, setShowLanguagesModal] = useState<'Series' | 'Episode' | null>(null);
-
   const {
     AVDumpClientPort,
     AVDumpKey,
@@ -61,34 +50,6 @@ function AniDBSettings() {
     Username,
   } = newSettings.AniDb;
 
-  const onDragEnd = (result: DropResult, episodePreference = false) => {
-    if (!result.destination || result.destination.index === result.source.index) {
-      return;
-    }
-
-    const items = Array.from(
-      episodePreference ? newSettings.EpisodeLanguagePreference : newSettings.LanguagePreference,
-    );
-    const [removed] = items.splice(result.source.index, 1);
-    items.splice(result.destination.index, 0, removed);
-
-    setNewSettings({
-      ...newSettings,
-      [episodePreference ? 'EpisodeLanguagePreference' : 'LanguagePreference']: items,
-    });
-  };
-
-  const removeLanguage = (language: string, episodePreference = false) => {
-    const items = Array.from(
-      episodePreference ? newSettings.EpisodeLanguagePreference : newSettings.LanguagePreference,
-    );
-    remove(items, item => item === language);
-    setNewSettings({
-      ...newSettings,
-      [episodePreference ? 'EpisodeLanguagePreference' : 'LanguagePreference']: items,
-    });
-  };
-
   const testLogin = () => {
     testAniDbLogin({ Username, Password }, {
       onSuccess: () => toast.success('AniDB Login Successful!'),
@@ -345,67 +306,6 @@ function AniDBSettings() {
           </div>
         </div>
       </div>
-
-      <div className="flex flex-col gap-y-4">
-        <div className="font-semibold">Language Options</div>
-        <div className="flex flex-col gap-y-2 border-b border-panel-border pb-8">
-          <Checkbox
-            label="Also Use Synonyms"
-            id="LanguageUseSynonyms"
-            isChecked={newSettings.LanguageUseSynonyms}
-            onChange={event => setNewSettings({ ...newSettings, LanguageUseSynonyms: event.target.checked })}
-            justify
-          />
-          <div className="flex justify-between">
-            Series Title (Drag to Reorder)
-            <Button onClick={() => setShowLanguagesModal('Series')} tooltip="Add Language">
-              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
-            </Button>
-          </div>
-          <div className="flex rounded-md border border-panel-border bg-panel-input p-4">
-            <DnDList onDragEnd={result => onDragEnd(result)}>
-              {newSettings.LanguagePreference.map(language => (
-                {
-                  key: language,
-                  item: (
-                    <div className="mt-2.5 flex items-center justify-between group-first:mt-0">
-                      {languageDescription[language]}
-                      <Button onClick={() => removeLanguage(language)} tooltip="Remove">
-                        <Icon className="text-panel-icon-action" path={mdiMinusCircleOutline} size={1} />
-                      </Button>
-                    </div>
-                  ),
-                }
-              ))}
-            </DnDList>
-          </div>
-          <div className="flex justify-between">
-            Episode Title (Drag to Reorder)
-            <Button onClick={() => setShowLanguagesModal('Episode')} tooltip="Add Language">
-              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
-            </Button>
-          </div>
-          <div className="flex rounded-md border border-panel-border bg-panel-input p-4">
-            <DnDList onDragEnd={result => onDragEnd(result, true)}>
-              {newSettings.EpisodeLanguagePreference.map(language => (
-                {
-                  key: language,
-                  item: (
-                    <div className="mt-2.5 flex items-center justify-between group-first:mt-0">
-                      {languageDescription[language]}
-                      <Button onClick={() => removeLanguage(language, true)} tooltip="Remove">
-                        <Icon className="text-panel-icon-action" path={mdiMinusCircleOutline} size={1} />
-                      </Button>
-                    </div>
-                  ),
-                }
-              ))}
-            </DnDList>
-          </div>
-        </div>
-      </div>
-
-      <LanguagesModal type={showLanguagesModal} onClose={() => setShowLanguagesModal(null)} />
     </>
   );
 }