lazylist update

packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx

@@ -63,6 +63,11 @@ export default function useLazyLists({
                 ...prevObj,
                 [`${totalKeys}#${next}`]: res.results,
               };
+            } else {
+              // Key exists, just update the existing data
+              const updatedObj = { ...prevObj };
+              updatedObj[keyExists] = res.results;
+              return updatedObj;
             }
           });
           nextSet(res.pagination.maybe_next || "");

packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx

@@ -1,76 +0,0 @@
-import { useEffect, useState } from "react";
-
-interface Props {
-  addQueries?: any;
-  fetcher: any;
-  list: any;
-  listSet: any;
-  requestList?: boolean;
-}
-
-export default function useLazyListsv2({
-  addQueries,
-  fetcher,
-  list = [],
-  listSet,
-  requestList = false,
-}: Props) {
-  const [filter, filterSet] = useState("all");
-  const [next, nextSet] = useState("");
-  const [sort, sortSet] = useState("newest");
-  const [isLoading, setLoading] = useState(requestList);
-  const [isEnd, setEnd] = useState(false);
-
-  useEffect(() => {
-    if (isLoading) {
-      fetcher(
-        "",
-        {},
-        {
-          ...(next ? { cursor: next } : {}),
-          ...addQueries,
-          ...(filter !== "all" ? { filter_media_type: filter } : {}),
-          ...(sort !== "newest" ? { sort_ascending: true } : {}),
-        }
-      ).then((res: any) => {
-        if (res.results && res.pagination) {
-          listSet((prev: any) => [...prev, ...res.results]);
-          const hasMoreItems = res.pagination.maybe_next;
-          nextSet(hasMoreItems || "");
-          setEnd(!hasMoreItems);
-        } else {
-          setEnd(true);
-        }
-        setLoading(false);
-      });
-    }
-  }, [isLoading, fetcher, next, filter, sort, addQueries, listSet]);
-
-  const getMore = () => {
-    if (next && !isLoading && !isEnd) {
-      setLoading(true);
-    }
-  };
-
-  const onChange = (event: { target: { name: string; value: any } }) => {
-    const { name, value } = event.target;
-    if (name === "filter") {
-      filterSet(value);
-    } else if (name === "sort") {
-      sortSet(value);
-    }
-    listSet([]);
-    nextSet("");
-    setLoading(true);
-    setEnd(false);
-  };
-
-  return {
-    filter,
-    getMore,
-    list,
-    onChange,
-    isLoading,
-    isEnd,
-  };
-}

packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx

@@ -14,15 +14,14 @@ import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
-// import { useLazyLists } from "hooks";
-import useLazyListsv2 from "hooks/useLazyLists/useLazyListsv2";
+import { useLazyLists } from "hooks";
 
 export default function WeightsTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [isLoading] = useState(false);
 
   const [list, listSet] = useState<Weight[]>([]);
-  const weights = useLazyListsv2({
+  const weights = useLazyLists({
     fetcher: ListWeights,
     list,
     listSet,
@@ -64,7 +63,7 @@ export default function WeightsTab() {
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
         <div className="d-flex gap-2 flex-grow-1">
-          {/* <TempSelect
+          <TempSelect
             {...{
               icon: faArrowDownWideShort,
               options: sortOptions,
@@ -81,7 +80,7 @@ export default function WeightsTab() {
               onChange: weights.onChange,
               value: weights.filter,
             }}
-          /> */}
+          />
           {/* {selectedFilter === "tts" && (
             <TempSelect
               options={modelTtsOptions}
@@ -116,7 +115,7 @@ export default function WeightsTab() {
           <InfiniteScroll
             dataLength={weights.list.length}
             next={weights.getMore}
-            hasMore={!weights.isEnd}
+            hasMore={!weights.list.length || !!weights.next}
             loader={
               <div className="mt-4 d-flex justify-content-center">
                 <div className="spinner-border text-light" role="status">