fix: refresh favorites after unfavorite

src/pages/Favorites/index.tsx

@@ -1,21 +1,50 @@
 import { Heart, RotateCcw } from "lucide-react";
 import { useEffect, useState } from "react";
-import { itemsOrEmpty } from "../../api";
+import { getJSON, itemsOrEmpty, readJSONCache, type Category } from "../../api";
 import { isFavoritesAuthError, listFavorites } from "../../favorites/api";
 import { useFavorites } from "../../favorites/FavoritesProvider";
-import { useI18n } from "../../i18n";
+import { langQuery, useI18n, type Lang } from "../../i18n";
 import { Reveal } from "../../motion";
-import { MessageBubble } from "../../components/messageStream/MessageBubble";
+import { PopularRankRow } from "../../components/PopularRankList";
 import { useSetPageTitle } from "../../components/PageTitleContext";
 import { Skeleton } from "../../components/Skeleton";
 import { useWallet } from "../../wallet/WalletProvider";
 
 const pageSize = 50;
 
+function useCategories(lang: Lang): Category[] {
+  const [categories, setCategories] = useState<Category[]>(() => {
+    const cached = readJSONCache<Category[]>(
+      `/api/categories?lang=${encodeURIComponent(langQuery(lang))}`,
+    );
+    return cached ? itemsOrEmpty(cached) : [];
+  });
+
+  useEffect(() => {
+    const url = `/api/categories?lang=${encodeURIComponent(langQuery(lang))}`;
+    const cached = readJSONCache<Category[]>(url);
+    if (cached) setCategories(itemsOrEmpty(cached));
+    let cancelled = false;
+    getJSON<Category[]>(url)
+      .then((items) => {
+        if (!cancelled) setCategories(itemsOrEmpty(items));
+      })
+      .catch(() => {
+        if (!cancelled && !cached) setCategories([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [lang]);
+
+  return categories;
+}
+
 export default function Favorites() {
-  const { t } = useI18n();
+  const { lang, t } = useI18n();
   const wallet = useWallet();
   const { markFavorite } = useFavorites();
+  const categories = useCategories(lang);
   const [posts, setPosts] = useState<
     Awaited<ReturnType<typeof listFavorites>>["items"]
   >([]);
@@ -104,7 +133,7 @@ export default function Favorites() {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-full flex-col gap-3 overflow-x-clip py-2 md:max-w-[820px] md:py-4 lg:max-w-[1080px] xl:max-w-[1180px]">
+    <div className="mx-auto flex w-full max-w-full flex-col gap-2.5 overflow-x-clip py-2 md:max-w-[680px] md:gap-3 md:py-4 lg:max-w-[900px] xl:max-w-[1120px]">
       {loading || !loaded ? (
         Array.from({ length: 4 }).map((_, index) => (
           <Skeleton key={index} className="h-[132px] rounded-2xl" />
@@ -134,7 +163,15 @@ export default function Favorites() {
       ) : (
         posts.map((post, index) => (
           <Reveal key={post.id} delay={Math.min(index, 8) * 0.05}>
-            <MessageBubble post={post} />
+            <PopularRankRow
+              post={post}
+              index={index}
+              categories={categories}
+              browseSort=""
+              onFavoriteChange={(_, favorited) => {
+                if (!favorited) setReloadKey((value) => value + 1);
+              }}
+            />
           </Reveal>
         ))
       )}