fix: BaseItemDto/BaseItemPerson routing bug (#1030)

app/(auth)/(tabs)/(home,libraries,search,favorites)/persons/[personId].tsx

@@ -22,21 +22,21 @@ import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();
-  const { actorId } = local as { actorId: string };
+  const { personId } = local as { personId: string };
   const { t } = useTranslation();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
   const { data: item, isLoading: l1 } = useQuery({
-    queryKey: ["item", actorId],
+    queryKey: ["item", personId],
     queryFn: async () =>
       await getUserItemData({
         api,
         userId: user?.Id,
-        itemId: actorId,
+        itemId: personId,
       }),
-    enabled: !!actorId && !!api,
+    enabled: !!personId && !!api,
     staleTime: 60,
   });
 
@@ -50,7 +50,7 @@ const page: React.FC = () => {
 
       const response = await getItemsApi(api).getItems({
         userId: user.Id,
-        personIds: [actorId],
+        personIds: [personId],
         startIndex: pageParam,
         limit: 16,
         sortOrder: ["Descending", "Descending", "Ascending"],
@@ -68,7 +68,7 @@ const page: React.FC = () => {
 
       return response.data;
     },
-    [api, user?.Id, actorId],
+    [api, user?.Id, personId],
   );
 
   const backdropUrl = useMemo(
@@ -131,7 +131,7 @@ const page: React.FC = () => {
             </TouchableItemRouter>
           )}
           queryFn={fetchItems}
-          queryKey={["actor", "movies", actorId]}
+          queryKey={["actor", "movies", personId]}
         />
         <View className='h-12' />
       </View>

components/common/TouchableItemRouter.tsx

@@ -1,8 +1,5 @@
 import { useActionSheet } from "@expo/react-native-action-sheet";
-import type {
-  BaseItemDto,
-  BaseItemPerson,
-} from "@jellyfin/sdk/lib/generated-client/models";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useRouter, useSegments } from "expo-router";
 import { type PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
@@ -14,10 +11,7 @@ interface Props extends TouchableOpacityProps {
   isOffline?: boolean;
 }
 
-export const itemRouter = (
-  item: BaseItemDto | BaseItemPerson,
-  from: string,
-) => {
+export const itemRouter = (item: BaseItemDto, from: string) => {
   if ("CollectionType" in item && item.CollectionType === "livetv") {
     return `/(auth)/(tabs)/${from}/livetv`;
   }
@@ -26,8 +20,8 @@ export const itemRouter = (
     return `/(auth)/(tabs)/${from}/series/${item.Id}`;
   }
 
-  if (item.Type === "Person" || item.Type === "Actor") {
-    return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
+  if (item.Type === "Person") {
+    return `/(auth)/(tabs)/${from}/persons/${item.Id}`;
   }
 
   if (item.Type === "BoxSet") {

components/series/CastAndCrew.tsx

@@ -27,16 +27,18 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
   const from = segments[2];
 
   const destinctPeople = useMemo(() => {
-    const people: BaseItemPerson[] = [];
+    const people: Record<string, BaseItemPerson> = {};
     item?.People?.forEach((person) => {
-      const existingPerson = people.find((p) => p.Id === person.Id);
+      if (!person.Id) return;
+
+      const existingPerson = people[person.Id];
       if (existingPerson) {
         existingPerson.Role = `${existingPerson.Role}, ${person.Role}`;
       } else {
-        people.push(person);
+        people[person.Id] = person;
       }
     });
-    return people;
+    return Object.values(people);
   }, [item?.People]);
 
   if (!from) return null;
@@ -54,7 +56,13 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
         renderItem={(i) => (
           <TouchableOpacity
             onPress={() => {
-              const url = itemRouter(i, from);
+              const url = itemRouter(
+                {
+                  Id: i.Id,
+                  Type: "Person",
+                },
+                from,
+              );
               // @ts-expect-error
               router.push(url);
             }}

components/stacks/NestedTabPageStack.tsx

@@ -17,7 +17,7 @@ export const commonScreenOptions: ICommonScreenOptions = {
   headerLeft: () => <HeaderBackButton />,
 };
 
-const routes = ["actors/[actorId]", "items/page", "series/[id]"];
+const routes = ["persons/[personId]", "items/page", "series/[id]"];
 
 export const nestedTabPageScreenOptions: Record<string, ICommonScreenOptions> =
   Object.fromEntries(routes.map((route) => [route, commonScreenOptions]));