From 0b331ca579c75e546dcdbf0f1896e0f0ec3a89f1 Mon Sep 17 00:00:00 2001
From: Fallenbagel <98979876+Fallenbagel@users.noreply.github.com>
Date: Fri, 3 Jan 2025 19:22:16 +0800
Subject: [PATCH] fix(setup): fix continue button disabled on refresh in setup
 3 (#1211)

This commit resolves an issue where the continue button in setup step 3 remained disabled after a
page refresh even when libraries are toggled. This was happening because
`mediaServerSettingsComplete` state was reset on refresh and not correctly re-initialized.
---
 src/components/Setup/index.tsx | 65 ++++++++++++++++++++++++++++++----
 src/i18n/locale/en.json        |  1 +
 2 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/components/Setup/index.tsx b/src/components/Setup/index.tsx
index 684b01adc..1217b655f 100644
--- a/src/components/Setup/index.tsx
+++ b/src/components/Setup/index.tsx
@@ -14,10 +14,12 @@ import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaServerType } from '@server/constants/server';
+import type { Library } from '@server/lib/settings';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
 import SetupLogin from './SetupLogin';
 
@@ -35,6 +37,8 @@ const messages = defineMessages('components.Setup', {
   signin: 'Sign In',
   configuremediaserver: 'Configure Media Server',
   configureservices: 'Configure Services',
+  librarieserror:
+    'Validation failed. Please toggle the libraries again to continue.',
 });
 
 const Setup = () => {
@@ -49,6 +53,7 @@ const Setup = () => {
   const router = useRouter();
   const { locale } = useLocale();
   const settings = useSettings();
+  const toasts = useToasts();
 
   const finishSetup = async () => {
     setIsUpdating(true);
@@ -87,6 +92,7 @@ const Setup = () => {
     if (settings.currentSettings.initialized) {
       router.push('/');
     }
+
     if (
       settings.currentSettings.mediaServerType !==
       MediaServerType.NOT_CONFIGURED
@@ -94,12 +100,62 @@ const Setup = () => {
       setCurrentStep(3);
       setMediaServerType(settings.currentSettings.mediaServerType);
     }
+
+    if (currentStep === 3) {
+      const validateLibraries = async () => {
+        try {
+          const endpoint =
+            settings.currentSettings.mediaServerType ===
+              MediaServerType.JELLYFIN || MediaServerType.EMBY
+              ? '/api/v1/settings/jellyfin'
+              : '/api/v1/settings/plex';
+
+          const res = await fetch(endpoint);
+          if (!res.ok) throw new Error('Fetch failed');
+          const data = await res.json();
+
+          const hasEnabledLibraries = data?.libraries?.some(
+            (library: Library) => library.enabled
+          );
+
+          setMediaServerSettingsComplete(hasEnabledLibraries);
+          if (hasEnabledLibraries) {
+            localStorage.setItem('mediaServerSettingsComplete', 'true');
+          } else {
+            localStorage.removeItem('mediaServerSettingsComplete');
+          }
+        } catch (e) {
+          toasts.addToast(intl.formatMessage(messages.librarieserror), {
+            autoDismiss: true,
+            appearance: 'error',
+          });
+
+          setMediaServerSettingsComplete(false);
+          localStorage.removeItem('mediaServerSettingsComplete');
+        }
+      };
+
+      validateLibraries();
+    } else {
+      // Initialize from localStorage on mount
+      const storedState =
+        localStorage.getItem('mediaServerSettingsComplete') === 'true';
+      setMediaServerSettingsComplete(storedState);
+    }
   }, [
     settings.currentSettings.mediaServerType,
     settings.currentSettings.initialized,
     router,
+    currentStep,
+    toasts,
+    intl,
   ]);
 
+  const handleComplete = () => {
+    setMediaServerSettingsComplete(true);
+    localStorage.setItem('mediaServerSettingsComplete', 'true');
+  };
+
   if (settings.currentSettings.initialized) return <></>;
 
   return (
@@ -225,14 +281,9 @@ const Setup = () => {
           {currentStep === 3 && (
             <div className="p-2">
               {mediaServerType === MediaServerType.PLEX ? (
-                <SettingsPlex
-                  onComplete={() => setMediaServerSettingsComplete(true)}
-                />
+                <SettingsPlex onComplete={handleComplete} />
               ) : (
-                <SettingsJellyfin
-                  isSetupSettings
-                  onComplete={() => setMediaServerSettingsComplete(true)}
-                />
+                <SettingsJellyfin isSetupSettings onComplete={handleComplete} />
               )}
               <div className="actions">
                 <div className="flex justify-end">
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index ded40f9f8..ca4ba3e66 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -1137,6 +1137,7 @@
   "components.Setup.continue": "Continue",
   "components.Setup.finish": "Finish Setup",
   "components.Setup.finishing": "Finishing…",
+  "components.Setup.librarieserror": "Validation failed. Please toggle the libraries again to continue.",
   "components.Setup.servertype": "Choose Server Type",
   "components.Setup.setup": "Setup",
   "components.Setup.signin": "Sign In",