fix: prepare dynamic render method for use of server config

components/home/ScrollingCollectionList.tsx

@@ -6,26 +6,38 @@ import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import {
+  type QueryKey,
+  useQuery,
+  type QueryFunction,
+} from "@tanstack/react-query";
 
 interface Props extends ViewProps {
-  title: string;
-  loading?: boolean;
+  title?: string | null;
   orientation?: "horizontal" | "vertical";
-  data?: BaseItemDto[] | null;
   height?: "small" | "large";
   disabled?: boolean;
+  queryKey: QueryKey;
+  queryFn: QueryFunction<BaseItemDto[]>;
 }
 
 export const ScrollingCollectionList: React.FC<Props> = ({
   title,
-  data,
   orientation = "vertical",
   height = "small",
-  loading = false,
   disabled = false,
+  queryFn,
+  queryKey,
   ...props
 }) => {
-  if (disabled) return null;
+  const { data, isLoading } = useQuery({
+    queryKey,
+    queryFn,
+    enabled: !disabled,
+    staleTime: 0,
+  });
+
+  if (disabled || !title) return null;
 
   return (
     <View {...props}>
@@ -35,7 +47,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
       <HorizontalScroll<BaseItemDto>
         data={data}
         height={orientation === "vertical" ? 247 : 164}
-        loading={loading}
+        loading={isLoading}
         renderItem={(item, index) => (
           <TouchableItemRouter
             key={index}

components/medialists/MediaListSection.tsx

@@ -12,22 +12,38 @@ import { Text } from "../common/Text";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
 import MoviePoster from "../posters/MoviePoster";
+import {
+  type QueryKey,
+  type QueryFunction,
+  useQuery,
+} from "@tanstack/react-query";
 
 interface Props extends ViewProps {
-  collection: BaseItemDto;
+  queryKey: QueryKey;
+  queryFn: QueryFunction<BaseItemDto>;
 }
 
-export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
+export const MediaListSection: React.FC<Props> = ({
+  queryFn,
+  queryKey,
+  ...props
+}) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
+  const { data: collection, isLoading } = useQuery({
+    queryKey,
+    queryFn,
+    staleTime: 0,
+  });
+
   const fetchItems = useCallback(
     async ({
       pageParam,
     }: {
       pageParam: number;
     }): Promise<BaseItemDtoQueryResult | null> => {
-      if (!api || !user?.Id) return null;
+      if (!api || !user?.Id || !collection) return null;
 
       const response = await getItemsApi(api).getItems({
         userId: user.Id,
@@ -38,7 +54,7 @@ export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
 
       return response.data;
     },
-    [api, user?.Id, collection.Id]
+    [api, user?.Id, collection?.Id]
   );
 
   if (!collection) return null;