fix: improved login flow for jellyseerr

components/settings/SettingToggles.tsx

@@ -21,7 +21,7 @@ import * as BackgroundFetch from "expo-background-fetch";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
-import React, {useCallback, useEffect, useRef, useState} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   Linking,
   Switch,
@@ -40,35 +40,23 @@ import { Stepper } from "@/components/inputs/Stepper";
 import { MediaProvider } from "./MediaContext";
 import { SubtitleToggles } from "./SubtitleToggles";
 import { AudioToggles } from "./AudioToggles";
-import {JellyseerrApi, useJellyseerr} from "@/hooks/useJellyseerr";
-import {ListItem} from "@/components/ListItem";
+import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
+import { ListItem } from "@/components/ListItem";
+import { JellyseerrSettings } from "./Jellyseerr";
 
 interface Props extends ViewProps {}
 
 export const SettingToggles: React.FC<Props> = ({ ...props }) => {
   const [settings, updateSettings] = useSettings();
   const { setProcesses } = useDownload();
-  const {
-    jellyseerrApi,
-    jellyseerrUser,
-    setJellyseerrUser ,
-    clearAllJellyseerData
-  } = useJellyseerr();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const jellyseerrPassInputRef = useRef(null);
   const [marlinUrl, setMarlinUrl] = useState<string>("");
-  const [promptForJellyseerrPass, setPromptForJellyseerrPass] = useState<boolean>(false);
-  const [isJellyseerrLoading, setIsLoadingJellyseerr] = useState<boolean>(false);
-  const [jellyseerrPassword, setJellyseerrPassword] = useState<string | undefined>(undefined);
   const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
     useState<string>(settings?.optimizedVersionsServerUrl || "");
 
-  const [jellyseerrServerUrl, setjellyseerrServerUrl] =
-    useState<string | undefined>(settings?.jellyseerrServerUrl || undefined);
-
   const queryClient = useQueryClient();
 
   /********************
@@ -123,49 +111,6 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
     staleTime: 0,
   });
 
-  const loginToJellyseerr = useCallback(() => {
-    if (jellyseerrServerUrl && user?.Name && jellyseerrPassword) {
-      setIsLoadingJellyseerr(true)
-      const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
-      jellyseerrTempApi.login(user?.Name, jellyseerrPassword)
-        .then(user => {
-          setJellyseerrUser(user);
-          updateSettings({jellyseerrServerUrl})
-        })
-        .catch(() => {
-          toast.error("Failed to login to jellyseerr!")
-        })
-        .finally(() => {
-          setJellyseerrPassword(undefined);
-          setPromptForJellyseerrPass(false)
-          setIsLoadingJellyseerr(false)
-        })
-    }
-  }, [user, jellyseerrServerUrl, jellyseerrPassword]);
-
-  const testJellyseerrServerUrl = useCallback(async () => {
-    if (!jellyseerrServerUrl || jellyseerrApi)
-      return;
-
-    setIsLoadingJellyseerr(true)
-    const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
-
-    jellyseerrTempApi.test().then(result => {
-      if (result.isValid) {
-        if (result.requiresPass)
-          setPromptForJellyseerrPass(true)
-          // promptForJellyseerrLogin()
-        else
-          updateSettings({jellyseerrServerUrl})
-      }
-      else {
-        setPromptForJellyseerrPass(false)
-        setjellyseerrServerUrl(undefined);
-        clearAllJellyseerData();
-      }
-    }).finally(() => setIsLoadingJellyseerr(false))
-  }, [jellyseerrServerUrl])
-
   if (!settings) return null;
 
   return (
@@ -692,98 +637,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
         </View>
       </View>
 
-      <View className="mt-4">
-        <Text className="text-lg font-bold mb-2">Jellyseerr</Text>
-        <View className="flex flex-col rounded-xl overflow-hidden divide-y-2 divide-solid divide-neutral-800">
-          {jellyseerrUser && <>
-              <View className="flex flex-col overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-                  <ListItem title="Total media requests" subTitle={jellyseerrUser?.requestCount?.toString()}/>
-                  <ListItem title="Movie quota limit" subTitle={jellyseerrUser?.movieQuotaLimit?.toString() ?? "Unlimited"}/>
-                  <ListItem title="Movie quota days" subTitle={jellyseerrUser?.movieQuotaDays?.toString() ?? "Unlimited"}/>
-                  <ListItem title="TV quota limit" subTitle={jellyseerrUser?.tvQuotaLimit?.toString() ?? "Unlimited"}/>
-                  <ListItem title="TV quota days" subTitle={jellyseerrUser?.tvQuotaDays?.toString() ?? "Unlimited"}/>
-              </View>
-          </>}
-          <View
-            pointerEvents={
-              !jellyseerrUser || jellyseerrPassword ? "auto" : "none"
-            }
-            className={`
-              ${
-              !jellyseerrUser || jellyseerrPassword
-                ? "opacity-100"
-                : "opacity-50"
-            }`}
-          >
-            <View className="flex flex-col bg-neutral-900 px-4 py-4 space-y-2">
-              <View className="flex flex-col shrink mb-2">
-                <View className="flex flex-row justify-between items-center">
-                  <Text className="font-semibold">
-                    Server URL
-                  </Text>
-                </View>
-                <Text className="text-xs opacity-50">
-                  Set the URL for your jellyseerr instance.
-                </Text>
-                <Text className="text-xs text-gray-600">Example: http(s)://your-host.url</Text>
-                <Text className="text-xs text-gray-600 mb-1">(add port if required)</Text>
-                <Text className="text-xs text-red-600">This integration is in its early stages. Expect things to change.</Text>
-              </View>
-              <Input
-                placeholder="Jellyseerrs server URL..."
-                value={settings?.jellyseerrServerUrl ?? jellyseerrServerUrl}
-                keyboardType="url"
-                returnKeyType="done"
-                autoCapitalize="none"
-                textContentType="URL"
-                onChangeText={setjellyseerrServerUrl}
-              />
-
-              {promptForJellyseerrPass &&
-                <Input
-                  autoFocus={true}
-                  focusable={true}
-                  placeholder={`Enter password for jellyfin user ${user?.Name}`}
-                  value={jellyseerrPassword}
-                  keyboardType="default"
-                  secureTextEntry={true}
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="password"
-                  onChangeText={setJellyseerrPassword}
-                />
-              }
-            </View>
-          </View>
-          {isJellyseerrLoading &&
-              <Loader className="rounded-xl overflow-hidden w-full h-full bg-neutral-700/10 absolute"/>
-          }
-          <Button
-            color="purple"
-            className="h-12 mt-2"
-            onPress={() =>
-              jellyseerrUser
-                ? clearAllJellyseerData().finally(() => {
-                  setjellyseerrServerUrl(undefined)
-                  setPromptForJellyseerrPass(false)
-                  setIsLoadingJellyseerr(false)
-                })
-                :
-                promptForJellyseerrPass
-                  ? loginToJellyseerr()
-                  : testJellyseerrServerUrl()
-            }
-          >
-            {jellyseerrUser
-              ? "Clear jellyseerr data"
-              :
-            promptForJellyseerrPass
-              ? "Login"
-              : "Save"
-            }
-          </Button>
-        </View>
-      </View>
+      <JellyseerrSettings />
     </View>
   );
 };