diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx index c1f92d85a2..ff0b7e4f1d 100644 --- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx +++ b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; interface Props { addQueries?: any; @@ -19,9 +20,11 @@ export default function useLazyLists({ const [next, nextSet] = useState(""); const [previous, previousSet] = useState(""); // I am not used for anything yet :) const [sort, sortSet] = useState(false); - const [status, statusSet] = useState(requestList ? 1 : 0); + const [status, statusSet] = useState(requestList ? FetchStatus.ready : FetchStatus.paused); const listKeys = Object.keys(list); const totalKeys = listKeys.length; + const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress; + const fetchError = status === FetchStatus.error; const getMore = () => { if (next) statusSet(1); @@ -33,12 +36,12 @@ export default function useLazyLists({ listSet([]); // Reset list on filter/sort change nextSet(""); previousSet(""); - statusSet(1); + statusSet(FetchStatus.ready); }; useEffect(() => { - if (status === 1) { - statusSet(2); + if (status === FetchStatus.ready) { + statusSet(FetchStatus.in_progress); fetcher( "", {}, @@ -49,7 +52,7 @@ export default function useLazyLists({ ...(sort ? { sort_ascending: true } : {}), } ).then((res: any) => { - statusSet(3); + statusSet(FetchStatus.ready); console.log("🎆", res); if (res.results && res.pagination) { listSet((prevObj: any) => { @@ -89,9 +92,11 @@ export default function useLazyLists({ ]); return { + fetchError, filter, filterSet, getMore, + isLoading, list: Object.values(list).flat(), // format as an array, eventually the input list will live within this hook. Eventually listKeys, next, diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index de19a1434e..9840afb28b 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -41,7 +41,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet useEffect(() => { if (urlParam) { - if (status === 1) { + if (status === FetchStatus.ready) { statusSet(FetchStatus.success); fetcher(urlParam, {}, { diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx index c4e59c4fdc..104bc6bc84 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useRef, useState } from "react"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; import AudioCard from "components/common/Card/AudioCard"; @@ -12,7 +12,6 @@ import SkeletonCard from "components/common/Card/SkeletonCard"; export default function FeaturedTab() { const gridContainerRef = useRef(null); - const [isLoading, setIsLoading] = useState(true); const [list, listSet] = useState([]); const media = useLazyLists({ @@ -23,14 +22,6 @@ export default function FeaturedTab() { addQueries: { per_page: 12 }, }); - useEffect(() => { - if (media.status === 1) { - setIsLoading(true); - } else if (media.status === 3) { - setIsLoading(false); - } - }, [media.status]); - return (
@@ -42,7 +33,7 @@ export default function FeaturedTab() {
- {isLoading ? ( + { media.isLoading ? (
{Array.from({ length: 12 }).map((_, index) => ( diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx index 1c7ca575d3..37a922f609 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useRef, useState } from "react"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; import AudioCard from "components/common/Card/AudioCard"; import ImageCard from "components/common/Card/ImageCard"; @@ -18,7 +18,6 @@ import InfiniteScroll from "react-infinite-scroll-component"; export default function MediaTab() { const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); - const [isLoading, setIsLoading] = useState(true); const [list, listSet] = useState([]); const media = useLazyLists({ @@ -56,12 +55,6 @@ export default function MediaTab() { // { value: "mostliked", label: "Most Liked" }, ]; - useEffect(() => { - if (media.status === 3) { - setIsLoading(false); - } - }, [media.status]); - return ( <>
@@ -87,7 +80,7 @@ export default function MediaTab() {
- {isLoading ? ( + { media.isLoading ? (
{Array.from({ length: 12 }).map((_, index) => ( 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 2ff6f01bb9..2697227ca7 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 @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useRef, useState } from "react"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; import AudioCard from "components/common/Card/AudioCard"; import ImageCard from "components/common/Card/ImageCard"; @@ -19,8 +19,6 @@ import { useLazyLists } from "hooks"; export default function WeightsTab() { const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); - const [isLoading, setIsLoading] = useState(true); - const [list, listSet] = useState([]); const weights = useLazyLists({ fetcher: ListWeights, @@ -75,12 +73,6 @@ export default function WeightsTab() { // { value: "SDXL", label: "SD XL" }, // ]; - useEffect(() => { - if (weights.status === 3) { - setIsLoading(false); - } - }, [weights.status]); - return ( <>
@@ -127,7 +119,7 @@ export default function WeightsTab() {
- {isLoading ? ( + { weights.isLoading ? (
{Array.from({ length: 12 }).map((_, index) => (