Merge pull request #438 from storytold/bflat-fy-mvp-updates

lazylist update

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

@@ -8,9 +8,15 @@ interface Props {
   requestList?: boolean;
 }
 
-export default function useLazyLists({ addQueries, fetcher, list, listSet, requestList = false } : Props) {
+export default function useLazyLists({
+  addQueries,
+  fetcher,
+  list = [],
+  listSet,
+  requestList = false,
+}: Props) {
   const [filter, filterSet] = useState("all");
-  const [next,nextSet] = useState("");
+  const [next, nextSet] = useState("");
   const [previous, previousSet] = useState(""); // I am not used for anything yet :)
   const [sort, sortSet] = useState("newest");
   const [status, statusSet] = useState(requestList ? 1 : 0);
@@ -33,26 +39,35 @@ export default function useLazyLists({ addQueries, fetcher, list, listSet, reque
   useEffect(() => {
     if (status === 1) {
       statusSet(2);
-      fetcher("",{},
+      fetcher(
+        "",
+        {},
         {
-          ...next ? { cursor: next } : {},
+          ...(next ? { cursor: next } : {}),
           ...addQueries, // eventually we should provide a way to type this ... or not. It works
-          ...filter !== "all" ? { filter_media_type: filter } : {},
-          ...sort !== "newest" ? { sort_ascending: true } : {},
+          ...(filter !== "all" ? { filter_media_type: filter } : {}),
+          ...(sort !== "newest" ? { sort_ascending: true } : {}),
         }
       ).then((res: any) => {
         statusSet(3);
         console.log("🎆", res);
         if (res.results && res.pagination) {
           listSet((prevObj: any) => {
-            let keyExists = listKeys.find((key) => key.split("#")[1] === res.pagination.maybe_next);
+            let keyExists = listKeys.find(
+              key => key.split("#")[1] === res.pagination.maybe_next
+            );
             if (!next && !totalKeys) {
               return { [0 + "#initial"]: res.results }; // save as object so we can track what has been loaded
             } else if (!keyExists) {
               return {
                 ...prevObj,
-                [`${totalKeys}#${ next }`]: res.results
-              }
+                [`${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 || "");
@@ -60,7 +75,18 @@ export default function useLazyLists({ addQueries, fetcher, list, listSet, reque
         }
       });
     }
-  }, [ addQueries, fetcher, filter, list, listKeys, listSet, next, sort, status, totalKeys ]);
+  }, [
+    addQueries,
+    fetcher,
+    filter,
+    list,
+    listKeys,
+    listSet,
+    next,
+    sort,
+    status,
+    totalKeys,
+  ]);
 
   return {
     filter,
@@ -75,6 +101,6 @@ export default function useLazyLists({ addQueries, fetcher, list, listSet, reque
     sortSet,
     status,
     statusSet,
-    totalKeys
+    totalKeys,
   };
 }

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

@@ -12,11 +12,11 @@ import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContex
 import SkeletonCard from "components/common/Card/SkeletonCard";
 import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights";
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
-import { useLazyLists } from "hooks";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
+import { useLazyLists } from "hooks";
 
-export default function MediaTab() {
+export default function WeightsTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [isLoading] = useState(false);
 
@@ -30,17 +30,35 @@ export default function MediaTab() {
 
   const filterOptions = [
     { value: "all", label: "All Weights" },
-    { value: "images", label: "Image Generation" },
-    { value: "audio", label: "Audio" },
-    { value: "video", label: "Video" },
+    { value: "tts", label: "Text to Speech" },
+    { value: "vc", label: "Voice to Voice" },
+    { value: "sd", label: "Image Generation" },
   ];
 
   const sortOptions = [
     { value: "newest", label: "Newest" },
     { value: "oldest", label: "Oldest" },
-    { value: "mostliked", label: "Most Liked" },
+    { value: "mostliked", label: "Most Bookmarked" },
   ];
 
+  // const modelTtsOptions = [
+  //   { value: "all", label: "All Types" },
+  //   { value: "tt2", label: "Tacotron 2" },
+  // ];
+
+  // const modelVcOptions = [
+  //   { value: "all", label: "All Types" },
+  //   { value: "rvc", label: "RVCv2" },
+  //   { value: "svc", label: "SoVitsSvc" },
+  // ];
+
+  // const modelSdOptions = [
+  //   { value: "all", label: "All Types" },
+  //   { value: "lora", label: "LoRA" },
+  //   { value: "SD15", label: "SD 1.5" },
+  //   { value: "SDXL", label: "SD XL" },
+  // ];
+
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -63,6 +81,27 @@ export default function MediaTab() {
               value: weights.filter,
             }}
           />
+          {/* {selectedFilter === "tts" && (
+            <TempSelect
+              options={modelTtsOptions}
+              defaultValue={modelTtsOptions[0]}
+              isSearchable={false}
+            />
+          )}
+          {selectedFilter === "sd" && (
+            <Select
+              options={modelSdOptions}
+              defaultValue={modelSdOptions[0]}
+              isSearchable={false}
+            />
+          )}
+          {selectedFilter === "vc" && (
+            <Select
+              options={modelVcOptions}
+              defaultValue={modelVcOptions[0]}
+              isSearchable={false}
+            />
+          )} */}
         </div>
       </div>
       <AudioPlayerProvider>