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" && (