From 8de6b0d7dadef64617a5034ef47973aba658a74f Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 23 Dec 2023 11:02:36 +0700 Subject: [PATCH 1/4] naming change and list = [] --- .../src/hooks/useLazyLists/useLazyLists.tsx | 43 ++++++++++++++----- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 2 +- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx index b77acf3eea..0471d736e6 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,30 @@ 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, + }; } }); nextSet(res.pagination.maybe_next || ""); @@ -60,7 +70,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 +96,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..a839381cf3 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 @@ -16,7 +16,7 @@ import { useLazyLists } from "hooks"; import InfiniteScroll from "react-infinite-scroll-component"; import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory"; -export default function MediaTab() { +export default function WeightsTab() { const gridContainerRef = useRef(null); const [isLoading] = useState(false); From 9189839699a711faa1f6c5879852762b1b7de753 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 23 Dec 2023 11:07:11 +0700 Subject: [PATCH 2/4] explore weights tab update --- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) 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 a839381cf3..e993283a78 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 @@ -30,17 +30,35 @@ export default function WeightsTab() { 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 WeightsTab() { value: weights.filter, }} /> + {/* {selectedFilter === "tts" && ( + + )} + {selectedFilter === "sd" && ( + + )} */}
From 51a019d2ebb782dcf30fc18418e63234775b4390 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 23 Dec 2023 14:11:48 +0700 Subject: [PATCH 3/4] lazylist test --- .../src/hooks/useLazyLists/useLazyListsv2.tsx | 76 +++++++++++++++++++ .../v2/view/pages/explore/tabs/WeightsTab.tsx | 11 +-- 2 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx new file mode 100644 index 0000000000..fa9c62439c --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx @@ -0,0 +1,76 @@ +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, + }; +} 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 e993283a78..73c556e0b7 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,16 +12,17 @@ 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"; +import useLazyListsv2 from "hooks/useLazyLists/useLazyListsv2"; export default function WeightsTab() { const gridContainerRef = useRef(null); const [isLoading] = useState(false); const [list, listSet] = useState([]); - const weights = useLazyLists({ + const weights = useLazyListsv2({ fetcher: ListWeights, list, listSet, @@ -63,7 +64,7 @@ export default function WeightsTab() { <>
- + /> */} {/* {selectedFilter === "tts" && (
From adc5124388ce164bfa44c4c74ebfef471800d4bb Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 23 Dec 2023 16:56:16 +0700 Subject: [PATCH 4/4] lazylist update --- .../src/hooks/useLazyLists/useLazyLists.tsx | 5 ++ .../src/hooks/useLazyLists/useLazyListsv2.tsx | 76 ------------------- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 11 ++- 3 files changed, 10 insertions(+), 82 deletions(-) delete mode 100644 packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx index 0471d736e6..eea6eacf4d 100644 --- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx +++ b/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 || ""); diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx deleted file mode 100644 index fa9c62439c..0000000000 --- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyListsv2.tsx +++ /dev/null @@ -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, - }; -} 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 73c556e0b7..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 @@ -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(null); const [isLoading] = useState(false); const [list, listSet] = useState([]); - const weights = useLazyListsv2({ + const weights = useLazyLists({ fetcher: ListWeights, list, listSet, @@ -64,7 +63,7 @@ export default function WeightsTab() { <>
- {/* */} + /> {/* {selectedFilter === "tts" && (