From 06877f4339b3e1a4eed075429e52cbc042441148 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Thu, 22 Aug 2024 14:28:39 +0200
Subject: [PATCH] fix: #97

---
 app/(auth)/(tabs)/libraries/[libraryId].tsx | 16 ++++++----------
 components/filters/FilterButton.tsx         | 14 +++++++++-----
 components/filters/FilterSheet.tsx          |  5 ++---
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/(auth)/(tabs)/libraries/[libraryId].tsx b/app/(auth)/(tabs)/libraries/[libraryId].tsx
index 33340ce8..b2acf750 100644
--- a/app/(auth)/(tabs)/libraries/[libraryId].tsx
+++ b/app/(auth)/(tabs)/libraries/[libraryId].tsx
@@ -117,6 +117,8 @@ const page: React.FC = () => {
           includeItemTypes.push("MusicAlbum");
           break;
         default:
+          includeItemTypes.push("Movie");
+          includeItemTypes.push("Series");
           break;
       }
 
@@ -155,7 +157,7 @@ const page: React.FC = () => {
   const { data, isFetching, fetchNextPage } = useInfiniteQuery({
     queryKey: [
       "library-items",
-      library,
+      libraryId,
       selectedGenres,
       selectedYears,
       selectedTags,
@@ -187,15 +189,11 @@ const page: React.FC = () => {
     enabled: !!api && !!user?.Id && !!library,
   });
 
-  const type = useMemo(() => {
-    return data?.pages.flatMap((page) => page?.Items)[0]?.Type || null;
-  }, [data]);
-
   const flatData = useMemo(() => {
     return data?.pages.flatMap((p) => p?.Items) || [];
   }, [data]);
 
-  if (!library || !library.CollectionType) return null;
+  if (!library) return null;
 
   return (
     <ScrollView
@@ -221,9 +219,9 @@ const page: React.FC = () => {
                     api
                   ).getQueryFiltersLegacy({
                     userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
                     parentId: libraryId,
                   });
+                  console.log("Resukt:", response.data.Genres || "Nothing...");
                   return response.data.Genres || [];
                 }}
                 set={setSelectedGenres}
@@ -243,7 +241,6 @@ const page: React.FC = () => {
                     api
                   ).getQueryFiltersLegacy({
                     userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
                     parentId: libraryId,
                   });
                   return response.data.Tags || [];
@@ -265,7 +262,6 @@ const page: React.FC = () => {
                     api
                   ).getQueryFiltersLegacy({
                     userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
                     parentId: libraryId,
                   });
                   return (
@@ -318,7 +314,7 @@ const page: React.FC = () => {
               />
             </View>
           </ScrollView>
-          {!type && isFetching && (
+          {isFetching && (
             <Loader
               style={{
                 marginTop: 300,
diff --git a/components/filters/FilterButton.tsx b/components/filters/FilterButton.tsx
index c3b99a55..e50e4010 100644
--- a/components/filters/FilterButton.tsx
+++ b/components/filters/FilterButton.tsx
@@ -1,7 +1,7 @@
 import { Text } from "@/components/common/Text";
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { TouchableOpacity, View, ViewProps } from "react-native";
 import { FilterSheet } from "./FilterSheet";
 
@@ -34,16 +34,19 @@ export const FilterButton = <T,>({
   const [open, setOpen] = useState(false);
 
   const { data: filters } = useQuery<T[]>({
-    queryKey: [queryKey, collectionId],
+    queryKey: ["filters", title, queryKey, collectionId],
     queryFn,
     staleTime: 0,
+    enabled: !!collectionId && !!queryFn && !!queryKey,
   });
 
-  if (filters?.length === 0) return null;
-
   return (
     <>
-      <TouchableOpacity onPress={() => setOpen(true)}>
+      <TouchableOpacity
+        onPress={() => {
+          filters?.length && setOpen(true);
+        }}
+      >
         <View
           className={`
             px-3 py-1.5 rounded-full flex flex-row items-center space-x-1
@@ -52,6 +55,7 @@ export const FilterButton = <T,>({
                 ? "bg-purple-600  border border-purple-700"
                 : "bg-neutral-900 border border-neutral-900"
             }
+          ${filters?.length === 0 && "opacity-50"}
             `}
           {...props}
         >
diff --git a/components/filters/FilterSheet.tsx b/components/filters/FilterSheet.tsx
index e277aa10..7f163b72 100644
--- a/components/filters/FilterSheet.tsx
+++ b/components/filters/FilterSheet.tsx
@@ -173,7 +173,7 @@ export const FilterSheet = <T,>({
             className="mb-4 flex flex-col rounded-xl overflow-hidden"
           >
             {renderData?.map((item, index) => (
-              <>
+              <View key={index}>
                 <TouchableOpacity
                   onPress={() => {
                     if (!values.includes(item)) {
@@ -183,7 +183,6 @@ export const FilterSheet = <T,>({
                       }, 250);
                     }
                   }}
-                  key={`${index}`}
                   className=" bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between"
                 >
                   <Text>{renderItemLabel(item)}</Text>
@@ -199,7 +198,7 @@ export const FilterSheet = <T,>({
                   }}
                   className="h-1 divide-neutral-700 "
                 ></View>
-              </>
+              </View>
             ))}
           </View>
           {data.length < (_data?.length || 0) && (