From bd908516b5a3cb3556b8dc5931c1d098d49100c3 Mon Sep 17 00:00:00 2001
From: herrrta <73949927+herrrta@users.noreply.github.com>
Date: Sun, 2 Mar 2025 12:21:24 -0500
Subject: [PATCH] fix: Advanced request options not saving #543

---
 .../jellyseerr/page.tsx                       |  13 +-
 components/common/Dropdown.tsx                |  10 +-
 components/jellyseerr/RequestModal.tsx        | 179 +++++++++---------
 3 files changed, 104 insertions(+), 98 deletions(-)

diff --git a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
index 52e64bc5..5cfe68cf 100644
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
@@ -61,6 +61,7 @@ const Page: React.FC = () => {
 
   const [issueType, setIssueType] = useState<IssueType>();
   const [issueMessage, setIssueMessage] = useState<string>();
+  const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
   const advancedReqModalRef = useRef<BottomSheetModal>(null);
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -111,6 +112,11 @@ const Page: React.FC = () => {
     }
   }, [jellyseerrApi, details, result, issueType, issueMessage]);
 
+  const setRequestBody = useCallback((body: MediaRequestBody) => {
+    _setRequestBody(body)
+    advancedReqModalRef?.current?.present?.();
+  }, [requestBody, _setRequestBody, advancedReqModalRef])
+
   const request = useCallback(async () => {
     const body: MediaRequestBody = {
       mediaId: Number(result.id!!),
@@ -122,7 +128,7 @@ const Page: React.FC = () => {
     };
 
     if (hasAdvancedRequestPermission) {
-      advancedReqModalRef?.current?.present?.(body);
+      setRequestBody(body)
       return;
     }
 
@@ -255,7 +261,7 @@ const Page: React.FC = () => {
                 refetch={refetch}
                 hasAdvancedRequest={hasAdvancedRequestPermission}
                 onAdvancedRequest={(data) =>
-                  advancedReqModalRef?.current?.present(data)
+                  setRequestBody(data)
                 }
               />
             )}
@@ -269,14 +275,17 @@ const Page: React.FC = () => {
       </ParallaxScrollView>
       <RequestModal
         ref={advancedReqModalRef}
+        requestBody={requestBody}
         title={mediaTitle}
         id={result.id!!}
         type={result.mediaType as MediaType}
         isAnime={isAnime}
         onRequested={() => {
+          _setRequestBody(undefined)
           advancedReqModalRef?.current?.close();
           refetch();
         }}
+        onDismiss={() => _setRequestBody(undefined)}
       />
       <BottomSheetModal
         ref={bottomSheetModalRef}
diff --git a/components/common/Dropdown.tsx b/components/common/Dropdown.tsx
index 84418a92..0a6dfd8b 100644
--- a/components/common/Dropdown.tsx
+++ b/components/common/Dropdown.tsx
@@ -18,7 +18,7 @@ interface Props<T> {
   title: string | ReactNode;
   label: string;
   onSelected: (...item: T[]) => void;
-  multi?: boolean;
+  multiple?: boolean;
 }
 
 const Dropdown = <T extends unknown>({
@@ -30,7 +30,7 @@ const Dropdown = <T extends unknown>({
   title,
   label,
   onSelected,
-  multi = false,
+  multiple = false,
   ...props
 }: PropsWithChildren<Props<T> & ViewProps>) => {
   if (Platform.isTV) return null;
@@ -72,7 +72,7 @@ const Dropdown = <T extends unknown>({
         >
           <DropdownMenu.Label>{label}</DropdownMenu.Label>
           {data.map((item, idx) =>
-            multi ? (
+            multiple ? (
               <DropdownMenu.CheckboxItem
                 value={
                   selected?.some((s) => keyExtractor(s) == keyExtractor(item))
@@ -80,7 +80,7 @@ const Dropdown = <T extends unknown>({
                     : "off"
                 }
                 key={keyExtractor(item)}
-                onValueChange={(next, previous) =>
+                onValueChange={(next: "on" | "off", previous: "on" | "off") => {
                   setSelected((p) => {
                     const prev = p || [];
                     if (next == "on") {
@@ -92,7 +92,7 @@ const Dropdown = <T extends unknown>({
                       ),
                     ];
                   })
-                }
+                }}
               >
                 <DropdownMenu.ItemTitle>
                   {titleExtractor(item)}
diff --git a/components/jellyseerr/RequestModal.tsx b/components/jellyseerr/RequestModal.tsx
index ec1ac97b..6ff70030 100644
--- a/components/jellyseerr/RequestModal.tsx
+++ b/components/jellyseerr/RequestModal.tsx
@@ -15,18 +15,22 @@ import { useTranslation } from "react-i18next";
 interface Props {
   id: number;
   title: string,
+  requestBody?: MediaRequestBody,
   type: MediaType;
   isAnime?: boolean;
   is4k?: boolean;
   onRequested?: () => void;
+  onDismiss?: () => void;
 }
 
 const RequestModal = forwardRef<BottomSheetModalMethods, Props & Omit<ViewProps, 'id'>>(({
   id,
   title,
+  requestBody,
   type,
   isAnime = false,
   onRequested,
+  onDismiss,
   ...props
 }, ref) => {
   const {jellyseerrApi, jellyseerrUser, requestMedia} = useJellyseerr();
@@ -39,8 +43,6 @@ const RequestModal = forwardRef<BottomSheetModalMethods, Props & Omit<ViewProps,
 
   const { t } = useTranslation();
 
-  const [modalRequestProps, setModalRequestProps] = useState<MediaRequestBody>();
-
   const {data: serviceSettings} = useQuery({
     queryKey: ["jellyseerr", "request", type, 'service'],
     queryFn: async () => jellyseerrApi?.service(type == 'movie' ? 'radarr' : 'sonarr'),
@@ -98,16 +100,14 @@ const RequestModal = forwardRef<BottomSheetModalMethods, Props & Omit<ViewProps,
             : defaultServiceDetails?.server.activeTags
           )?.includes(t.id)
         ) ?? []
-
-      console.log(tags)
       return tags
     },
     [defaultServiceDetails]
   );
 
   const seasonTitle = useMemo(
-    () => modalRequestProps?.seasons?.length ? t("jellyseerr.season_x", {seasons: modalRequestProps?.seasons}) : undefined,
-    [modalRequestProps?.seasons]
+    () => requestBody?.seasons?.length ? t("jellyseerr.season_x", {seasons: requestBody?.seasons}) : undefined,
+    [requestBody?.seasons]
   );
 
   const request = useCallback(() => {requestMedia(
@@ -117,12 +117,12 @@ const RequestModal = forwardRef<BottomSheetModalMethods, Props & Omit<ViewProps,
         profileId: defaultProfile.id,
         rootFolder: defaultFolder.path,
         tags: defaultTags.map(t => t.id),
-        ...modalRequestProps,
+        ...requestBody,
         ...requestOverrides
       },
       onRequested
     )
-  }, [modalRequestProps, requestOverrides, defaultProfile, defaultFolder, defaultTags]);
+  }, [requestBody, requestOverrides, defaultProfile, defaultFolder, defaultTags]);
 
   const pathTitleExtractor = (item: RootFolder) => `${item.path} (${item.freeSpace.bytesToReadable()})`;
 
@@ -131,7 +131,7 @@ const RequestModal = forwardRef<BottomSheetModalMethods, Props & Omit<ViewProps,
       ref={ref}
       enableDynamicSizing
       enableDismissOnClose
-      onDismiss={() => setModalRequestProps(undefined)}
+      onDismiss={onDismiss}
       handleIndicatorStyle={{
         backgroundColor: "white",
       }}
@@ -146,89 +146,86 @@ const RequestModal = forwardRef<BottomSheetModalMethods, Props & Omit<ViewProps,
         />
       }
     >
-      {(data) => {
-        setModalRequestProps(data?.data as MediaRequestBody)
-        return <BottomSheetView>
-          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
-            <View>
-              <Text className="font-bold text-2xl text-neutral-100">{t("jellyseerr.advanced")}</Text>
-              {seasonTitle &&
-                  <Text className="text-neutral-300">{seasonTitle}</Text>
-              }
-            </View>
-            <View className="flex flex-col space-y-2">
-              {(defaultService && defaultServiceDetails && users) && (
-                <>
-                  <Dropdown
-                    data={defaultServiceDetails.profiles}
-                    titleExtractor={(item) => item.name}
-                    placeholderText={defaultProfile.name}
-                    keyExtractor={(item) => item.id.toString()}
-                    label={t("jellyseerr.quality_profile")}
-                    onSelected={(item) =>
-                      item && setRequestOverrides((prev) => ({
-                        ...prev,
-                        profileId: item?.id
-                      }))
-                    }
-                    title={t("jellyseerr.quality_profile")}
-                  />
-                  <Dropdown
-                    data={defaultServiceDetails.rootFolders}
-                    titleExtractor={pathTitleExtractor}
-                    placeholderText={defaultFolder ? pathTitleExtractor(defaultFolder) : ""}
-                    keyExtractor={(item) => item.id.toString()}
-                    label={t("jellyseerr.root_folder")}
-                    onSelected={(item) =>
-                      item && setRequestOverrides((prev) => ({
-                        ...prev,
-                        rootFolder: item.path
-                      }))}
-                    title={t("jellyseerr.root_folder")}
-                  />
-                  <Dropdown
-                    multi={true}
-                    data={defaultServiceDetails.tags}
-                    titleExtractor={(item) => item.label}
-                    placeholderText={defaultTags.map(t => t.label).join(",")}
-                    keyExtractor={(item) => item.id.toString()}
-                    label={t("jellyseerr.tags")}
-                    onSelected={(...item) =>
-                      item && setRequestOverrides((prev) => ({
-                        ...prev,
-                        tags: item.map(i => i.id)
-                      }))
-                    }
-                    title={t("jellyseerr.tags")}
-                  />
-                  <Dropdown
-                    data={users}
-                    titleExtractor={(item) => item.displayName}
-                    placeholderText={jellyseerrUser!!.displayName}
-                    keyExtractor={(item) => item.id.toString() || ""}
-                    label={t("jellyseerr.request_as")}
-                    onSelected={(item) =>
-                      item && setRequestOverrides((prev) => ({
-                        ...prev,
-                        userId: item?.id
-                      }))
-                    }
-                    title={t("jellyseerr.request_as")}
-                  />
-                </>
-              )
-              }
-            </View>
-            <Button
-              className="mt-auto"
-              onPress={request}
-              color="purple"
-            >
-              {t("jellyseerr.request_button")}
-            </Button>
+      <BottomSheetView>
+        <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
+          <View>
+            <Text className="font-bold text-2xl text-neutral-100">{t("jellyseerr.advanced")}</Text>
+            {seasonTitle &&
+                <Text className="text-neutral-300">{seasonTitle}</Text>
+            }
           </View>
-        </BottomSheetView>
-      }}
+          <View className="flex flex-col space-y-2">
+            {(defaultService && defaultServiceDetails && users) && (
+              <>
+                <Dropdown
+                  data={defaultServiceDetails.profiles}
+                  titleExtractor={(item) => item.name}
+                  placeholderText={requestOverrides.profileName || defaultProfile.name}
+                  keyExtractor={(item) => item.id.toString()}
+                  label={t("jellyseerr.quality_profile")}
+                  onSelected={(item) =>
+                    item && setRequestOverrides((prev) => ({
+                      ...prev,
+                      profileId: item?.id
+                    }))
+                  }
+                  title={t("jellyseerr.quality_profile")}
+                />
+                <Dropdown
+                  data={defaultServiceDetails.rootFolders}
+                  titleExtractor={pathTitleExtractor}
+                  placeholderText={defaultFolder ? pathTitleExtractor(defaultFolder) : ""}
+                  keyExtractor={(item) => item.id.toString()}
+                  label={t("jellyseerr.root_folder")}
+                  onSelected={(item) =>
+                    item && setRequestOverrides((prev) => ({
+                      ...prev,
+                      rootFolder: item.path
+                    }))}
+                  title={t("jellyseerr.root_folder")}
+                />
+                <Dropdown
+                  multiple
+                  data={defaultServiceDetails.tags}
+                  titleExtractor={(item) => item.label}
+                  placeholderText={defaultTags.map(t => t.label).join(",")}
+                  keyExtractor={(item) => item.id.toString()}
+                  label={t("jellyseerr.tags")}
+                  onSelected={(...selected) =>
+                    setRequestOverrides((prev) => ({
+                      ...prev,
+                      tags: selected.map(i => i.id)
+                    }))
+                  }
+                  title={t("jellyseerr.tags")}
+                />
+                <Dropdown
+                  data={users}
+                  titleExtractor={(item) => item.displayName}
+                  placeholderText={jellyseerrUser!!.displayName}
+                  keyExtractor={(item) => item.id.toString() || ""}
+                  label={t("jellyseerr.request_as")}
+                  onSelected={(item) =>
+                    item && setRequestOverrides((prev) => ({
+                      ...prev,
+                      userId: item?.id
+                    }))
+                  }
+                  title={t("jellyseerr.request_as")}
+                />
+              </>
+            )
+            }
+          </View>
+          <Button
+            className="mt-auto"
+            onPress={request}
+            color="purple"
+          >
+            {t("jellyseerr.request_button")}
+          </Button>
+        </View>
+      </BottomSheetView>
     </BottomSheetModal>
   );
 });