wip: refactor

components/home/LargeMovieCarousel.tsx

@@ -1,4 +1,4 @@
-import { View, ViewProps } from "react-native";
+import { ActivityIndicator, View, ViewProps } from "react-native";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -42,7 +42,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
     });
   };
 
-  const { data: mediaListCollection } = useQuery<string | null>({
+  const { data: mediaListCollection, isLoading: l1 } = useQuery<string | null>({
     queryKey: ["mediaListCollection", user?.Id],
     queryFn: async () => {
       if (!api || !user?.Id) return null;
@@ -62,9 +62,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
     staleTime: 0,
   });
 
-  const { data: popularItems, isLoading: isLoadingPopular } = useQuery<
-    BaseItemDto[]
-  >({
+  const { data: popularItems, isLoading: l2 } = useQuery<BaseItemDto[]>({
     queryKey: ["popular", user?.Id],
     queryFn: async () => {
       if (!api || !user?.Id || !mediaListCollection) return [];
@@ -83,6 +81,13 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 
   const width = Dimensions.get("screen").width;
 
+  if (l1 || l2)
+    return (
+      <View className="h-[242px] flex items-center justify-center">
+        <ActivityIndicator size={"small"} color="#fff" />
+      </View>
+    );
+
   if (!popularItems) return null;
 
   return (

components/home/ScrollingCollectionList.tsx

@@ -1,11 +1,11 @@
-import { TouchableOpacity, View, ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
+import MoviePoster from "@/components/posters/MoviePoster";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { router } from "expo-router";
+import { View, ViewProps } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
-import MoviePoster from "../MoviePoster";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
 
 interface Props extends ViewProps {
   title: string;
@@ -29,22 +29,17 @@ export const ScrollingCollectionList: React.FC<Props> = ({
 
   return (
     <View {...props}>
-      <Text className="px-4 text-2xl font-bold mb-2">{title}</Text>
+      <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
+        {title}
+      </Text>
       <HorizontalScroll<BaseItemDto>
         data={data}
         height={orientation === "vertical" ? 247 : 164}
         loading={loading}
         renderItem={(item, index) => (
-          <TouchableOpacity
+          <TouchableItemRouter
             key={index}
-            onPress={() => {
-              if (item.Type === "Series") router.push(`/series/${item.Id}`);
-              else if (item.CollectionType === "music")
-                router.push(`/artists/page?collectionId=${item.Id}`);
-              else if (item.Type === "CollectionFolder")
-                router.push(`/collections/${item.Id}`);
-              else router.push(`/items/${item.Id}`);
-            }}
+            item={item}
             className={`flex flex-col
               ${orientation === "vertical" ? "w-32" : "w-48"}
             `}
@@ -57,7 +52,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
               )}
               <ItemCardText item={item} />
             </View>
-          </TouchableOpacity>
+          </TouchableItemRouter>
         )}
       />
     </View>