improvement: rerender data after set status

zhanglun · Dec 31, 2023 · 74fb3ec · 74fb3ec
1 parent 87c8c49
commit 74fb3ec
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 37 deletions.
diff --git a/src/components/ArticleList/index.tsx b/src/components/ArticleList/index.tsx
@@ -4,11 +4,19 @@ 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";
 
 export type ArticleListProps = {
   feedUuid?: string;
   type?: string;
   title: string | null;
+  articles: ArticleResItem[];
+  size: any;
+  setSize: any;
+  isReachingEnd?: boolean;
+  isEmpty: boolean;
+  isLoading: boolean;
 };
 
 export interface ArticleListRefType {
@@ -19,27 +27,11 @@ export interface ArticleListRefType {
 }
 
 export const ArticleList = React.memo((props: ArticleListProps) => {
-  const { feedUuid, type, title } = props;
+  const { articles, isEmpty, isLoading, isReachingEnd, size, setSize } = props;
   const loadRef = useRef<HTMLDivElement | null>(null);
   const entry = useIntersectionObserver(loadRef, {});
   const loadRefVisible = !!entry?.isIntersecting;
 
-  const {
-    articles,
-    error,
-    isLoading,
-    isValidating,
-    isLoadingMore,
-    size,
-    setSize,
-    isEmpty,
-    isReachingEnd,
-    isRefreshing,
-  } = useArticle({
-    feedUuid,
-    type,
-  });
-
   const renderList = (): JSX.Element[] => {
     return (articles || []).map((article: any, idx: number) => {
       return (
@@ -63,7 +55,12 @@ export const ArticleList = React.memo((props: ArticleListProps) => {
 
   return (
     <div className="overflow-y-auto h-[calc(100vh_-_var(--app-toolbar-height))]">
-      {isEmpty ? <p>Yay, no issues found.</p> : null}
+      {isEmpty ? (
+        <div className="absolute top-1/2 -translate-y-1/2 w-full flex flex-col justify-center items-center gap-1 text-muted-foreground">
+          <Snail size={34} strokeWidth={1} />
+          <p>Yay, no unread articles found.</p>
+        </div>
+      ) : null}
       <ul className="m-0 grid gap-2 py-2 px-2">{renderList()}</ul>
       <div ref={loadRef} className="pt-1">
         {isLoading && (

diff --git a/src/helpers/request.ts b/src/helpers/request.ts
@@ -13,8 +13,6 @@ export const createInstance = (config: AxiosRequestConfig): AxiosInstance => {
 }
 
 export const get = (url: string, config?: AxiosRequestConfig) => {
-  console.log("%c Line:16 🍞 url", "color:#e41a6a", url);
-  console.log("%c Line:16 🍐 config", "color:#7f2b82", config);
   const _instance = createInstance(config || {});
 
   return _instance.get(url, config).then((res: AxiosResponse) => {

diff --git a/src/layout/Article/Layout1.tsx b/src/layout/Article/Layout1.tsx
@@ -44,7 +44,24 @@ export const Layout1 = React.memo(
       userConfig: state.userConfig,
     }));
 
-    const { setSize, articles, mutate, isToday, isAll } = useArticle({ feedUuid });
+    const {
+      articles,
+      error,
+      isLoading,
+      isValidating,
+      isLoadingMore,
+      size,
+      setSize,
+      isEmpty,
+      isReachingEnd,
+      isRefreshing,
+      isToday,
+      isAll,
+      updateData,
+    } = useArticle({
+      feedUuid,
+      type,
+    });
 
     const handleRefresh = () => {
       if (store.feed && store.feed.uuid) {
@@ -56,13 +73,15 @@ export const Layout1 = React.memo(
     };
 
     const markAllRead = () => {
-      console.log('data', articles)
+      console.log("data", articles);
       return store.markArticleListAsRead(isToday, isAll).then(() => {
-        mutate([...articles.map(_ => {
-          _.read_status = ArticleReadStatus.READ;
-          return _
-        })])
-      })
+        updateData([
+          ...articles.map((_) => {
+            _.read_status = ArticleReadStatus.READ;
+            return _;
+          }),
+        ]);
+      });
     };
 
     const changeFilter = (id: any) => {
@@ -136,9 +155,15 @@ export const Layout1 = React.memo(
         </div>
         <div className="relative h-full">
           <ArticleList
+            articles={articles}
             title={params.name}
             type={type}
             feedUuid={feedUuid}
+            isLoading={isLoading}
+            isEmpty={isEmpty}
+            isReachingEnd={isReachingEnd}
+            size={size}
+            setSize={setSize}
           />
         </div>
       </div>

diff --git a/src/layout/Article/useArticle.ts b/src/layout/Article/useArticle.ts
@@ -1,4 +1,4 @@
-import { useSWRConfig } from "swr"
+// import { useSWRConfig } from "swr"
 import useSWRInfinite from "swr/infinite";
 import { useBearStore } from "@/stores";
 import { request } from "@/helpers/request";
@@ -18,7 +18,7 @@ export function useArticle(props: UseArticleProps) {
   const { feedUuid, type } = props;
   const isToday = useMatch(RouteConfig.LOCAL_TODAY);
   const isAll = useMatch(RouteConfig.LOCAL_ALL);
-  const { mutate } = useSWRConfig();
+  // const { mutate } = useSWRConfig();
   const store = useBearStore((state) => ({
     currentFilter: state.currentFilter,
   }));
@@ -40,13 +40,20 @@ export function useArticle(props: UseArticleProps) {
       cursor: pageIndex + 1,
     }; // SWR key
   };
-  const { data, error, isLoading, isValidating, size, setSize } =
-    useSWRInfinite(getKey, (q) =>
-      request
-        .get("/articles", {
-          params: { ...q },
-        })
-        .then((res) => res.data)
+  const { data, error, isLoading, isValidating, size, mutate, setSize } =
+    useSWRInfinite(
+      getKey,
+      (q) =>
+        request
+          .get("/articles", {
+            params: { ...q },
+          })
+          .then((res) => res.data),
+      {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+      }
     );
 
   const list = data
@@ -60,11 +67,16 @@ export function useArticle(props: UseArticleProps) {
     isEmpty || (data && data[data.length - 1]?.list?.length < PAGE_SIZE);
   const isRefreshing = isValidating && data && data.length === size;
 
+  function updateData (list: ArticleResItem[]) {
+    mutate(list, false)
+  }
+
   return {
     articles,
     error,
     isLoading,
-    globalMutate: mutate,
+    mutate,
+    updateData,
     isValidating,
     isLoadingMore,
     size,