Add HTTP Server URL setting, remove ClientPort settings (#866)

ShokoAnime · Apr 15, 2024 · 718cc3f · 718cc3f
1 parent 10e52ae
commit 718cc3f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/src/core/react-query/settings/helpers.ts b/src/core/react-query/settings/helpers.ts
@@ -316,6 +316,9 @@ export const initialSettings: SettingsType = {
     AVDumpKey: '',
     ClientPort: 4556,
     AVDumpClientPort: 4557,
+    HTTPServerUrl: '',
+    UDPServerAddress: '',
+    UDPServerPort: 9000,
     DownloadCharacters: false,
     DownloadCreators: false,
     DownloadRelatedAnime: false,

diff --git a/src/core/types/api/settings.ts b/src/core/types/api/settings.ts
@@ -18,6 +18,9 @@ export type SettingsAnidbType = {
   AVDumpKey: string;
   ClientPort: number;
   AVDumpClientPort: number;
+  HTTPServerUrl: string;
+  UDPServerAddress: string;
+  UDPServerPort: number;
 };
 
 export type SettingsAnidbDownloadType = {

diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
@@ -12,6 +12,7 @@ import toast from '@/components/Toast';
 import { usePatchSettingsMutation } from '@/core/react-query/settings/mutations';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { setItem as setMiscItem } from '@/core/slices/misc';
+import useEventCallback from '@/hooks/useEventCallback';
 
 const items = [
   { name: 'General', path: 'general' },
@@ -97,6 +98,23 @@ function SettingsPage() {
     updateSetting,
   };
 
+  const validateAndPatchSettings = useEventCallback(() => {
+    const HttpServerUrl = newSettings.AniDb.HTTPServerUrl;
+
+    if (!/^https?:\/\/\S+:\d+$/.test(HttpServerUrl)) {
+      toast.error(
+        'Invalid HTTP Server URL',
+        <div className="flex flex-col gap-y-4">
+          {'It must be in the following format: {scheme}://{address}:{port}'}
+          <span>eg., http://api.anidb.net:9001</span>
+        </div>,
+      );
+      return;
+    }
+
+    patchSettings({ newSettings });
+  });
+
   return (
     <div className="flex min-h-full grow justify-center gap-x-6">
       <div className="relative top-0 z-10 flex w-[21.875rem] flex-col gap-y-4 rounded-lg border border-panel-border bg-panel-background-transparent p-6 font-semibold">
@@ -139,7 +157,7 @@ function SettingsPage() {
                     Cancel
                   </Button>
                   <Button
-                    onClick={() => patchSettings({ newSettings })}
+                    onClick={validateAndPatchSettings}
                     buttonType="primary"
                     buttonSize="normal"
                     disabled={!unsavedChanges}

diff --git a/src/pages/settings/tabs/AniDBSettings.tsx b/src/pages/settings/tabs/AniDBSettings.tsx
@@ -26,16 +26,15 @@ function AniDBSettings() {
   const { isPending: isAnidbLoginPending, mutate: testAniDbLogin } = useAniDBTestLoginMutation();
 
   const {
-    AVDumpClientPort,
     AVDumpKey,
     Anime_UpdateFrequency,
     Calendar_UpdateFrequency,
-    ClientPort,
     DownloadCharacters,
     DownloadCreators,
     DownloadRelatedAnime,
     DownloadReleaseGroups,
     File_UpdateFrequency,
+    HTTPServerUrl,
     MaxRelationDepth,
     MyList_AddFiles,
     MyList_DeleteType,
@@ -108,16 +107,6 @@ function AniDBSettings() {
               className="w-36 px-3 py-1"
             />
           </div>
-          <div className="flex justify-between">
-            Port
-            <InputSmall
-              id="port"
-              value={ClientPort}
-              type="number"
-              onChange={event => updateSetting('AniDb', 'ClientPort', event.target.value)}
-              className="w-36 px-3 py-1"
-            />
-          </div>
           <div className="flex justify-between">
             AVDump Key
             <InputSmall
@@ -129,13 +118,13 @@ function AniDBSettings() {
             />
           </div>
           <div className="flex justify-between">
-            AVDump Port
+            HTTP Server URL
             <InputSmall
-              id="avdump-port"
-              value={AVDumpClientPort}
-              type="number"
-              onChange={event => updateSetting('AniDb', 'AVDumpClientPort', event.target.value)}
-              className="w-36 px-3 py-1"
+              id="http-server-url"
+              value={HTTPServerUrl}
+              type="text"
+              onChange={event => updateSetting('AniDb', 'HTTPServerUrl', event.target.value)}
+              className="w-60 px-3 py-1"
             />
           </div>
         </div>