fix: prepare dynamic render method for use of server config

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;