wip

app/(auth)/(tabs)/libraries/[libraryId].tsx

@@ -1,4 +1,3 @@
-import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
@@ -7,9 +6,10 @@ import { Loader } from "@/components/Loader";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
+  currentCollectionIdAtom,
   genreFilterAtom,
   sortByAtom,
-  sortOptions,
+  sortByOptions,
   sortOrderAtom,
   sortOrderOptions,
   tagsFilterAtom,
@@ -25,7 +25,7 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { Stack, useLocalSearchParams, useNavigation } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo } from "react";
 import { NativeScrollEvent, ScrollView, View } from "react-native";
@@ -46,9 +46,14 @@ const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
   const { libraryId } = searchParams as { libraryId: string };
 
+  const [, setCurrentCollectionId] = useAtom(currentCollectionIdAtom);
+
+  useEffect(() => {
+    setCurrentCollectionId(libraryId);
+  }, [libraryId]);
+
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const navigation = useNavigation();
 
   const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
@@ -204,7 +209,7 @@ const page: React.FC = () => {
                   });
                   return response.data.Genres || [];
                 }}
-                set={setSelectedGenres}
+                set={(value) => setSelectedGenres(value, libraryId)}
                 values={selectedGenres}
                 title="Genres"
                 renderItemLabel={(item) => item.toString()}
@@ -226,7 +231,7 @@ const page: React.FC = () => {
                   });
                   return response.data.Tags || [];
                 }}
-                set={setSelectedTags}
+                set={(value) => setSelectedTags(value, libraryId)}
                 values={selectedTags}
                 title="Tags"
                 renderItemLabel={(item) => item.toString()}
@@ -252,7 +257,7 @@ const page: React.FC = () => {
                     ) || []
                   );
                 }}
-                set={setSelectedYears}
+                set={(value) => setSelectedYears(value, libraryId)}
                 values={selectedYears}
                 title="Years"
                 renderItemLabel={(item) => item.toString()}
@@ -265,9 +270,9 @@ const page: React.FC = () => {
                 collectionId={libraryId}
                 queryKey="sortByFilter"
                 queryFn={async () => {
-                  return sortOptions;
+                  return sortByOptions;
                 }}
-                set={setSortBy}
+                set={(value) => setSortBy(value, libraryId)}
                 values={sortBy}
                 title="Sort by"
                 renderItemLabel={(item) => item.value}
@@ -285,7 +290,7 @@ const page: React.FC = () => {
                 queryFn={async () => {
                   return sortOrderOptions;
                 }}
-                set={setSortOrder}
+                set={(value) => setSortOrder(value, libraryId)}
                 values={sortOrder}
                 title="Order by"
                 renderItemLabel={(item) => item.value}

app/(auth)/(tabs)/libraries/index.tsx

@@ -1,6 +1,7 @@
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { currentCollectionIdAtom } from "@/utils/atoms/filters";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
@@ -66,6 +67,10 @@ const LibraryItemCard: React.FC<Props> = ({ library }) => {
 
   const [api] = useAtom(apiAtom);
 
+  const [currentCollection, setCurrentCollection] = useAtom(
+    currentCollectionIdAtom
+  );
+
   const url = useMemo(
     () =>
       getPrimaryImageUrl({
@@ -80,6 +85,8 @@ const LibraryItemCard: React.FC<Props> = ({ library }) => {
   return (
     <TouchableOpacity
       onPress={() => {
+        if (!library.Id) return;
+        setCurrentCollection(library.Id);
         router.push(`/libraries/${library.Id}`);
       }}
     >

app/(auth)/collections/[collectionId].tsx

@@ -7,9 +7,10 @@ import { Loader } from "@/components/Loader";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
+  currentCollectionIdAtom,
   genreFilterAtom,
   sortByAtom,
-  sortOptions,
+  sortByOptions,
   sortOrderAtom,
   sortOrderOptions,
   tagsFilterAtom,
@@ -55,20 +56,29 @@ const page: React.FC = () => {
   const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
   const [sortBy, setSortBy] = useAtom(sortByAtom);
   const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
+  const [currentCollection, setCurrentCollection] = useAtom(
+    currentCollectionIdAtom
+  );
 
   useEffect(() => {
-    setSortBy([
-      {
-        key: "PremiereDate",
-        value: "Premiere Date",
-      },
-    ]);
-    setSortOrder([
-      {
-        key: "Ascending",
-        value: "Ascending",
-      },
-    ]);
+    setSortBy(
+      [
+        {
+          key: "PremiereDate",
+          value: "Premiere Date",
+        },
+      ],
+      collectionId
+    );
+    setSortOrder(
+      [
+        {
+          key: "Ascending",
+          value: "Ascending",
+        },
+      ],
+      collectionId
+    );
   }, []);
 
   const { data: collection } = useQuery({
@@ -208,7 +218,7 @@ const page: React.FC = () => {
                   });
                   return response.data.Genres || [];
                 }}
-                set={setSelectedGenres}
+                set={(value) => setSelectedGenres(value, collectionId)}
                 values={selectedGenres}
                 title="Genres"
                 renderItemLabel={(item) => item.toString()}
@@ -230,7 +240,7 @@ const page: React.FC = () => {
                   });
                   return response.data.Tags || [];
                 }}
-                set={setSelectedTags}
+                set={(value) => setSelectedTags(value, collectionId)}
                 values={selectedTags}
                 title="Tags"
                 renderItemLabel={(item) => item.toString()}
@@ -256,7 +266,7 @@ const page: React.FC = () => {
                     ) || []
                   );
                 }}
-                set={setSelectedYears}
+                set={(value) => setSelectedYears(value, collectionId)}
                 values={selectedYears}
                 title="Years"
                 renderItemLabel={(item) => item.toString()}
@@ -269,9 +279,9 @@ const page: React.FC = () => {
                 collectionId={collectionId}
                 queryKey="sortByFilter"
                 queryFn={async () => {
-                  return sortOptions;
+                  return sortByOptions;
                 }}
-                set={setSortBy}
+                set={(value) => setSortBy(value, collectionId)}
                 values={sortBy}
                 title="Sort by"
                 renderItemLabel={(item) => item.value}
@@ -289,7 +299,7 @@ const page: React.FC = () => {
                 queryFn={async () => {
                   return sortOrderOptions;
                 }}
-                set={setSortOrder}
+                set={(value) => setSortOrder(value, collectionId)}
                 values={sortOrder}
                 title="Order by"
                 renderItemLabel={(item) => item.value}