improvement: rerender list after refresh

zhanglun · Dec 31, 2023 · 3dcbad9 · 3dcbad9
1 parent 74fb3ec
commit 3dcbad9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/src/components/ArticleList/index.tsx b/src/components/ArticleList/index.tsx
@@ -3,7 +3,6 @@ import { motion } from "framer-motion";
 import { ArticleItem } from "../ArticleItem";
 import { Skeleton } from "../ui/skeleton";
 import { useIntersectionObserver } from "./useIntersectionObserver";
-import { useArticle } from "@/layout/Article/useArticle";
 import { ArticleResItem } from "@/db";
 import { Snail } from "lucide-react";
 
@@ -14,6 +13,7 @@ export type ArticleListProps = {
   articles: ArticleResItem[];
   size: any;
   setSize: any;
+  isRefreshing?: boolean;
   isReachingEnd?: boolean;
   isEmpty: boolean;
   isLoading: boolean;

diff --git a/src/layout/Article/Layout1.tsx b/src/layout/Article/Layout1.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 import { useParams } from "react-router-dom";
 import { ArticleList } from "@/components/ArticleList";
 import { useBearStore } from "@/stores";
@@ -51,6 +51,7 @@ export const Layout1 = React.memo(
       isValidating,
       isLoadingMore,
       size,
+      mutate,
       setSize,
       isEmpty,
       isReachingEnd,
@@ -66,21 +67,14 @@ export const Layout1 = React.memo(
     const handleRefresh = () => {
       if (store.feed && store.feed.uuid) {
         loadFeed(store.feed, store.syncArticles, () => {
-          // TODO: get article list
-          // setSize(1);
+          mutate();
         });
       }
     };
 
     const markAllRead = () => {
-      console.log("data", articles);
       return store.markArticleListAsRead(isToday, isAll).then(() => {
-        updateData([
-          ...articles.map((_) => {
-            _.read_status = ArticleReadStatus.READ;
-            return _;
-          }),
-        ]);
+        mutate();
       });
     };
 
@@ -160,6 +154,7 @@ export const Layout1 = React.memo(
             type={type}
             feedUuid={feedUuid}
             isLoading={isLoading}
+            isRefreshing={isRefreshing}
             isEmpty={isEmpty}
             isReachingEnd={isReachingEnd}
             size={size}