From 8a0690953ff46bc4cb131a3cac2ac7128caf4354 Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 26 Dec 2023 15:12:23 -0500 Subject: [PATCH] swapped out status on useListContent to use enum --- .../hooks/useListContent/useListContent.tsx | 15 ++++++---- .../profile_view/tabs/BookmarksTab.tsx | 28 ++----------------- .../profile/profile_view/tabs/MediaTab.tsx | 14 ++-------- .../profile/profile_view/tabs/WeightsTab.tsx | 13 ++------- 4 files changed, 16 insertions(+), 54 deletions(-) diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index 5e99838dfd..de19a1434e 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; interface Props { addQueries?: any; @@ -17,17 +18,19 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet const [page, pageSet] = useState(pagePreset); const [pageCount, pageCountSet] = useState(0); const [sort, sortSet] = useState(false); - const [status, statusSet] = useState(requestList ? 1 : 0); + const [status, statusSet] = useState(requestList ? FetchStatus.ready : FetchStatus.paused); + const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress; + const fetchError = status === FetchStatus.error; const pageChange = (page: number) => { pageSet(page); - statusSet(1); + statusSet(FetchStatus.ready); }; const reFetch = () => { pageSet(pagePreset); // Reset to first page on filter/sort change listSet([]); // Reset list on filter/sort change - statusSet(1); + statusSet(FetchStatus.ready); } const onChange = ({ target }: { target: { name: string; value: any } }) => { @@ -39,7 +42,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet useEffect(() => { if (urlParam) { if (status === 1) { - statusSet(2); + statusSet(FetchStatus.success); fetcher(urlParam, {}, { page_index: page, @@ -49,7 +52,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet } ).then((res: any) => { if (debug) console.log(`🪲 useListContent success debug at: ${ debug }`, res); - statusSet(3); + statusSet(FetchStatus.error); if (res.results && res.pagination) { pageCountSet(res.pagination.total_page_count); listSet(res.results); @@ -60,9 +63,11 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet }, [ addQueries, debug, fetcher, filter, listSet, page, sort, status, urlParam ]); return { + fetchError, filter, filterSet, list, + isLoading, onChange, page, pageChange, diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx index 6248ec3371..bacdf67db9 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.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"; @@ -16,9 +16,7 @@ import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/Ge export default function BookmarksTab({ username }: { username: string }) { const gridContainerRef = useRef(null); - const [isLoading, setIsLoading] = useState(false); const [selectedFilter, setSelectedFilter] = useState("all"); - // const [showMasonryGrid, setShowMasonryGrid] = useState(true); const [list, listSet] = useState([]); const bookmarks = useListContent({ debug: "bookmarks tab", @@ -40,20 +38,6 @@ export default function BookmarksTab({ username }: { username: string }) { currentPage: bookmarks.page, }; - // const resetMasonryGrid = () => { - // setShowMasonryGrid(false); - // setTimeout(() => setShowMasonryGrid(true), 10); - // }; - - // const handleSortOrFilterChange = (event: any) => { - // if (weights.onChange) { - // weights.onChange(event); - // } - - // // Reset Masonry Grid - // resetMasonryGrid(); - // }; - const filterOptions = [ { value: "all", label: "All Weights" }, { value: "tts", label: "Text to Speech" }, @@ -90,14 +74,6 @@ export default function BookmarksTab({ username }: { username: string }) { setSelectedFilter(selectedOption.value); }; - useEffect(() => { - if (bookmarks.status === 1) { - setIsLoading(true); - } else if (bookmarks.status === 3) { - setIsLoading(false); - } - }, [bookmarks.status]); - return ( <>
@@ -141,7 +117,7 @@ export default function BookmarksTab({ username }: { username: string }) {
- {isLoading ? ( + { bookmarks.isLoading ? (
{Array.from({ length: 12 }).map((_, index) => ( diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx index 9276890242..d996c76c1f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/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 { useListContent } from "hooks"; export default function MediaTab({ username }: { username: string }) { const gridContainerRef = useRef(null); - const [isLoading, setIsLoading] = useState(true); const [showMasonryGrid, setShowMasonryGrid] = useState(true); const [list, listSet] = useState([]); @@ -27,7 +26,6 @@ export default function MediaTab({ username }: { username: string }) { fetcher: GetMediaByUser, list, listSet, - // pagePreset: 1, requestList: true, urlParam: username, addQueries: { per_page: 24 }, @@ -57,14 +55,6 @@ export default function MediaTab({ username }: { username: string }) { resetMasonryGrid(); }; - useEffect(() => { - if (media.status === 1) { - setIsLoading(true); - } else if (media.status === 3) { - setIsLoading(false); - } - }, [media.status]); - const filterOptions = [ { value: "all", label: "All Media" }, { value: "image", label: "Images" }, @@ -104,7 +94,7 @@ export default function MediaTab({ username }: { username: string }) {
- {isLoading ? ( + { media.isLoading ? (
{Array.from({ length: 12 }).map((_, index) => ( diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx index 4a996cebe9..6b6608dc7e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/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"; @@ -24,7 +24,6 @@ import SkeletonCard from "components/common/Card/SkeletonCard"; export default function WeightsTab({ username }: { username: string }) { const gridContainerRef = useRef(null); - const [isLoading, setIsLoading] = useState(true); const [sd, sdSet] = useState("all"); const [tts, ttsSet] = useState("all"); const [vc, vcSet] = useState("all"); @@ -99,14 +98,6 @@ export default function WeightsTab({ username }: { username: string }) { resetMasonryGrid(); }; - useEffect(() => { - if (weights.status === 1) { - setIsLoading(true); - } else if (weights.status === 3) { - setIsLoading(false); - } - }, [weights.status]); - return ( <>
@@ -162,7 +153,7 @@ export default function WeightsTab({ username }: { username: string }) {
- {isLoading ? ( + { weights.isLoading ? (
{Array.from({ length: 12 }).map((_, index) => (