diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx index b77acf3eea..eea6eacf4d 100644 --- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx +++ b/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, }; } diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx index 3aeda2b82a..9602d4664d 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx +++ b/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(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 ( <>
@@ -63,6 +81,27 @@ export default function MediaTab() { value: weights.filter, }} /> + {/* {selectedFilter === "tts" && ( + + )} + {selectedFilter === "sd" && ( + + )} */}