From fdb62007d84cbfdf8a24ea38b45ffbf036d3b4a7 Mon Sep 17 00:00:00 2001
From: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>
Date: Sat, 11 Jan 2025 23:23:33 +0800
Subject: [PATCH] refactor: resolve missing dependency warning for
 `validateLibraries` in useEffect

---
 src/components/Setup/index.tsx | 65 +++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/components/Setup/index.tsx b/src/components/Setup/index.tsx
index 6995fa825..8a747c6f1 100644
--- a/src/components/Setup/index.tsx
+++ b/src/components/Setup/index.tsx
@@ -17,7 +17,7 @@ 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 { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
@@ -82,6 +82,37 @@ const Setup = () => {
     }
   };
 
+  const validateLibraries = useCallback(async () => {
+    try {
+      const endpointMap: Record<MediaServerType, string> = {
+        [MediaServerType.JELLYFIN]: '/api/v1/settings/jellyfin',
+        [MediaServerType.EMBY]: '/api/v1/settings/jellyfin',
+        [MediaServerType.PLEX]: '/api/v1/settings/plex',
+        [MediaServerType.NOT_CONFIGURED]: '',
+      };
+
+      const endpoint = endpointMap[mediaServerType];
+      if (!endpoint) return;
+
+      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);
+    } catch (e) {
+      toasts.addToast(intl.formatMessage(messages.librarieserror), {
+        autoDismiss: true,
+        appearance: 'error',
+      });
+
+      setMediaServerSettingsComplete(false);
+    }
+  }, [intl, mediaServerType, toasts]);
+
   const { data: backdrops } = useSWR<string[]>('/api/v1/backdrops', {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -114,39 +145,9 @@ const Setup = () => {
     intl,
     currentStep,
     mediaServerType,
+    validateLibraries,
   ]);
 
-  const validateLibraries = async () => {
-    try {
-      const endpointMap: Record<MediaServerType, string> = {
-        [MediaServerType.JELLYFIN]: '/api/v1/settings/jellyfin',
-        [MediaServerType.EMBY]: '/api/v1/settings/jellyfin',
-        [MediaServerType.PLEX]: '/api/v1/settings/plex',
-        [MediaServerType.NOT_CONFIGURED]: '',
-      };
-
-      const endpoint = endpointMap[mediaServerType];
-      if (!endpoint) return;
-
-      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);
-    } catch (e) {
-      toasts.addToast(intl.formatMessage(messages.librarieserror), {
-        autoDismiss: true,
-        appearance: 'error',
-      });
-
-      setMediaServerSettingsComplete(false);
-    }
-  };
-
   const handleComplete = () => {
     validateLibraries();
   };