Update BookmarksPart.tsx (Fixed Error Code)

src/pages/parts/home/BookmarksPart.tsx

@@ -17,39 +17,48 @@ export function BookmarksPart({
   onItemsChange: (hasItems: boolean) => void;
 }) {
   const { t } = useTranslation();
-  const progressItems = useProgressStore((s) => s.items);
-  const bookmarks = useBookmarkStore((s) => s.bookmarks);
-  const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
+  const progressItems = useProgressStore((state) => state.items);
+  const bookmarks = useBookmarkStore((state) => state.bookmarks);
+  const removeBookmark = useBookmarkStore((state) => state.removeBookmark);
   const [editing, setEditing] = useState(false);
   const [gridRef] = useAutoAnimate<HTMLDivElement>();
 
   const items = useMemo(() => {
-    let output: MediaItem[] = [];
-    Object.entries(bookmarks).forEach((entry) => {
-      output.push({
-        id: entry[0],
-        ...entry[1],
-      });
+    // Transform bookmarks object into an array of MediaItem
+    const transformedItems: MediaItem[] = Object.keys(bookmarks).map((id) => {
+      const { title, year, poster, type, updatedAt } = bookmarks[id];
+      return {
+        id,
+        title,
+        year,
+        poster,
+        type,
+        updatedAt,
+        seasons: type === "show" ? [] : undefined, // Ensure seasons is defined for 'show' type
+      };
     });
-    output = output.sort((a, b) => {
-      const bookmarkA = bookmarks[a.id];
-      const bookmarkB = bookmarks[b.id];
-      const progressA = progressItems[a.id];
-      const progressB = progressItems[b.id];
 
-      const dateA = Math.max(bookmarkA.updatedAt, progressA?.updatedAt ?? 0);
-      const dateB = Math.max(bookmarkB.updatedAt, progressB?.updatedAt ?? 0);
-
-      return dateB - dateA;
+    // Sort items based on the latest update time
+    transformedItems.sort((a, b) => {
+      const aUpdatedAt = Math.max(
+        bookmarks[a.id].updatedAt,
+        progressItems[a.id]?.updatedAt ?? 0,
+      );
+      const bUpdatedAt = Math.max(
+        bookmarks[b.id].updatedAt,
+        progressItems[b.id]?.updatedAt ?? 0,
+      );
+      return bUpdatedAt - aUpdatedAt;
     });
-    return output;
+
+    return transformedItems;
   }, [bookmarks, progressItems]);
 
   useEffect(() => {
-    onItemsChange(items.length > 0);
+    onItemsChange(items.length > 0); // Notify parent component if there are items
   }, [items, onItemsChange]);
 
-  if (items.length === 0) return null;
+  if (items.length === 0) return null; // If there are no items, return null
 
   return (
     <div>
@@ -60,12 +69,12 @@ export function BookmarksPart({
         <EditButton editing={editing} onEdit={setEditing} />
       </SectionHeading>
       <MediaGrid ref={gridRef}>
-        {items.map((v) => (
+        {items.map((item) => (
           <WatchedMediaCard
-            key={v.id}
-            media={v}
+            key={item.id}
+            media={item}
             closable={editing}
-            onClose={() => removeBookmark(v.id)}
+            onClose={() => removeBookmark(item.id)}
           />
         ))}
       </MediaGrid>