improvement: debug list

zhanglun · Nov 29, 2023 · 24b463d · 24b463d
1 parent 26a80e8
commit 24b463d
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 54 deletions.
diff --git a/src/layout/Search/Result.tsx b/src/layout/Search/Result.tsx
@@ -17,7 +17,7 @@ export function SearchResult(props: SearchResultProps) {
     articleDialogViewStatus: state.articleDialogViewStatus,
     setArticleDialogViewStatus: state.setArticleDialogViewStatus,
   }));
-  const { articleList, listRef, loadRef, loading, hasMore } = useSearchListHook(
+  const { articleList, listRef, loadRef, loading, observerTarget } = useSearchListHook(
     {
       searchParams: { query: props.query },
     }
@@ -67,6 +67,7 @@ export function SearchResult(props: SearchResultProps) {
             </div>
           )}
         </div>
+        <div ref={observerTarget}>2</div>
       </div>
 
       <ArticleDialogView

diff --git a/src/layout/Search/hooks.tsx b/src/layout/Search/hooks.tsx
@@ -18,79 +18,83 @@ export const useSearchListHook = (props: { searchParams: SearchParams }) => {
   const [cursor, setCursor] = useState(1);
   const listRef = useRef<HTMLDivElement>(null);
   const loadRef = useRef<HTMLDivElement>(null);
+  const observerTarget = useRef<HTMLDivElement>(null);
 
-  const getList = ({ query, cursor }: { query: string; cursor: number }) => {
-    setLoading(true);
+  const getList = useCallback(
+    (params: { query?: string; cursor?: number }) => {
+      setLoading(true);
+      const query = params.query?.trim() || searchParams.query.trim();
 
-    request
-      .get("/search", {
-        params: {
-          query: query.trim(),
-        },
-      })
-      .then((res: AxiosResponse<ArticleResItem[]>) => {
-        console.log("%c Line:15 🍎 res", "color:#ed9ec7", res);
-        const list = res.data;
+      console.log("%c Line:27 🌮 searchParams", "color:#7f2b82", searchParams);
+      console.log("%c Line:26 🍇 query", "color:#fca650", query);
+      console.log("%c Line:38 🍆 cursor", "color:#93c0a4", cursor);
 
-        setResultList(list);
+      if (!query) {
+        return;
+      }
 
-        if (list.length === 0) {
-          setHasMore(false);
-        }
-      })
-      .finally(() => {
-        setLoading(false);
-      })
-      .catch((err: any) => {
-        console.log("%c Line:71 🍎 err", "color:#ffdd4d", err);
-      });
-  };
+      request
+        .get("/search", {
+          params: {
+            query: query,
+            cursor: params.cursor || cursor,
+          },
+        })
+        .then((res: AxiosResponse<ArticleResItem[]>) => {
+          console.log("%c Line:15 🍎 res", "color:#ed9ec7", res);
+          const list = res.data;
+
+          setResultList((prev) => [...prev, ...list]);
+          setCursor((prev) => prev + 1);
+
+          if (list.length === 0) {
+            setHasMore(false);
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        })
+        .catch((err: any) => {
+          console.log("%c Line:71 🍎 err", "color:#ffdd4d", err);
+        });
+    },
+    [cursor, searchParams]
+  );
 
   useEffect(() => {
     if (searchParams.query) {
       setResultList([]);
       setCursor(1);
       setHasMore(true);
-
-      getList({ query: searchParams.query, cursor: 1 });
+      // getList({ query: searchParams.query, cursor: 1 });
     }
   }, [searchParams.query]);
 
   useEffect(() => {
-    const $rootElem = listRef.current as HTMLDivElement;
-    const $target = loadRef.current as HTMLDivElement;
-
-    const options = {
-      root: $rootElem,
-      rootMargin: "0px 0px 50px 0px",
-      threshold: 1,
-    };
-
-    const callback = (
-      entries: IntersectionObserverEntry[],
-      observer: IntersectionObserver
-    ) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting && !loading && hasMore && resultList.length) {
-          console.log("interaction update cursor ====>");
-          setCursor(cursor + 1);
-          getList({ query: searchParams.query, cursor: cursor + 1 });
-        } else if (entry.isIntersecting && resultList.length === 0) {
-          setCursor(1);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        console.log(
+          "%c Line:74 🍔 entries[0].isIntersecting",
+          "color:#fca650",
+          entries[0].isIntersecting
+        );
+        if (entries[0].isIntersecting) {
+          getList({ query: searchParams.query });
         }
-      });
-    };
+      },
+      { threshold: 1 }
+    );
 
-    const observer = new IntersectionObserver(callback, options);
-
-    $target && observer.observe($target);
+    if (observerTarget.current) {
+      observer.observe(observerTarget.current);
+    }
 
     return () => {
-      if ($target) {
-        observer.unobserve($target);
+      if (observerTarget.current) {
+        observer.unobserve(observerTarget.current);
       }
     };
-  }, [loading]);
+  }, [observerTarget, searchParams.query]);
 
   const goPrev = useCallback(
     throttle(() => {
@@ -119,5 +123,6 @@ export const useSearchListHook = (props: { searchParams: SearchParams }) => {
     setLoading,
     listRef,
     loadRef,
+    observerTarget,
   };
 };