From a2c5c2c484914f81e9dbd87d2ed24a2d8d9687df Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 26 Dec 2023 23:59:18 -0500 Subject: [PATCH] card component consolidation + useLazyList loop fix --- .../common/Card/AudioCard/AudioCard.tsx | 1 + .../common/Card/ImageCard/ImageCard.tsx | 11 ++- .../components/common/Card/WeightsCards.tsx | 19 ++++ .../src/hooks/useLazyLists/useLazyLists.tsx | 36 +++---- .../hooks/useListContent/useListContent.tsx | 8 +- .../view/pages/explore/tabs/FeaturedTab.tsx | 5 +- .../v2/view/pages/explore/tabs/MediaTab.tsx | 22 +---- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 94 +++---------------- .../profile_view/tabs/BookmarksTab.tsx | 11 ++- .../profile/profile_view/tabs/MediaTab.tsx | 11 ++- .../profile/profile_view/tabs/WeightsTab.tsx | 23 +---- 11 files changed, 83 insertions(+), 158 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx index 8364eaab8a..32750b312e 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -11,6 +11,7 @@ import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; import Button from "components/common/Button"; import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; import WeightCoverImage from "components/common/WeightCoverImage"; + interface AudioCardProps { bookmarks: any, data: any; diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx index e2684d7a09..bc6ed4f978 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -12,17 +12,16 @@ import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; interface ImageCardProps { + bookmarks: any, data: any; type: "media" | "weights"; showCreator?: boolean; } -export default function ImageCard({ data, type, showCreator }: ImageCardProps) { +export default function ImageCard({ bookmarks, data, type, showCreator }: ImageCardProps) { const linkUrl = type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`; - console.log("🎲",data); - const handleInnerClick = (event: any) => { event.stopPropagation(); }; @@ -157,7 +156,11 @@ export default function ImageCard({ data, type, showCreator }: ImageCardProps) {
- + diff --git a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx new file mode 100644 index 0000000000..1c8436cb30 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import AudioCard from "./AudioCard"; +import ImageCard from "./ImageCard"; +import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory"; + +interface Props { + props: any, + type: string +} + +export default function WeightsCards({ props, type }: Props) { + switch (type) { + case WeightCategory.TTS: + case WeightCategory.VC: + case WeightCategory.ZS: return ; + case WeightCategory.SD: return ; + default: return
Unsupported media type
; + } +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx index ff0b7e4f1d..2470968740 100644 --- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx +++ b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx @@ -3,19 +3,18 @@ import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetch interface Props { addQueries?: any; + debug?: string, fetcher: any; list: any; listSet: any; + onInputChange?: (x?: any) => any; + onSuccess?: (x?: any) => any; requestList?: boolean; } -export default function useLazyLists({ - addQueries, - fetcher, - list = [], - listSet, - requestList = false, -}: Props) { +const n = () => {}; + +export default function useLazyLists({ addQueries, debug = "", fetcher, list = [], listSet, onInputChange = n, onSuccess = n, requestList = false }: Props) { const [filter, filterSet] = useState("all"); const [next, nextSet] = useState(""); const [previous, previousSet] = useState(""); // I am not used for anything yet :) @@ -33,6 +32,7 @@ export default function useLazyLists({ const onChange = ({ target }: { target: { name: string; value: any } }) => { const todo: { [key: string]: (x: any) => void } = { filterSet, sortSet }; todo[target.name + "Set"](target.value); + onInputChange({ target }); listSet([]); // Reset list on filter/sort change nextSet(""); previousSet(""); @@ -52,13 +52,12 @@ export default function useLazyLists({ ...(sort ? { sort_ascending: true } : {}), } ).then((res: any) => { - statusSet(FetchStatus.ready); - console.log("🎆", res); + if (debug) console.log(`🐞 useLazyLists success debug at: ${ debug }`, res); + statusSet(FetchStatus.success); + onSuccess(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) { @@ -78,18 +77,7 @@ export default function useLazyLists({ } }); } - }, [ - addQueries, - fetcher, - filter, - list, - listKeys, - listSet, - next, - sort, - status, - totalKeys, - ]); + }, [ addQueries, debug, fetcher, filter, listKeys, listSet, next, onSuccess, sort, status, totalKeys ]); return { fetchError, diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index 6f0f360ec4..7fa7be6223 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -9,12 +9,15 @@ interface Props { list: any; listSet: any; onInputChange?: (x?: any) => any; + onSuccess?: (x?: any) => any; pagePreset?: number; requestList?: boolean; urlParam: string; } -export default function useListContent({ addQueries, addSetters, debug = "", fetcher, list, listSet, onInputChange = () => {}, pagePreset = 0, requestList = false, urlParam = "" }: Props) { +const n = () => {}; + +export default function useListContent({ addQueries, addSetters, debug = "", fetcher, list, listSet, onInputChange = n, onSuccess = n, pagePreset = 0, requestList = false, urlParam = "" }: Props) { const [filter, filterSet] = useState("all"); const [page, pageSet] = useState(pagePreset); const [pageCount, pageCountSet] = useState(0); @@ -55,6 +58,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet ).then((res: any) => { if (debug) console.log(`🪲 useListContent success debug at: ${ debug }`, res); statusSet(FetchStatus.error); + onSuccess(res); if (res.results && res.pagination) { pageCountSet(res.pagination.total_page_count); listSet(res.results); @@ -62,7 +66,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet }); } } - }, [ addQueries, debug, fetcher, filter, listSet, page, sort, status, urlParam ]); + }, [ addQueries, debug, fetcher, filter, listSet, onSuccess, page, sort, status, urlParam ]); return { fetchError, 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 54fd01106e..1c06277d85 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 @@ -14,11 +14,14 @@ export default function FeaturedTab() { const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [list, listSet] = useState([]); + const [showMasonryGrid, setShowMasonryGrid] = useState(true); const media = useLazyLists({ fetcher: ListFeaturedMediaFiles, list, listSet, + onInputChange: () => setShowMasonryGrid(false), + onSuccess: () => setShowMasonryGrid(true), requestList: true, addQueries: { per_page: 12 }, }); @@ -41,7 +44,7 @@ export default function FeaturedTab() { ))} ) : ( - <> + showMasonryGrid && <> {media.list.length === 0 && media.status === 3 ? (
No featured media. 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 d5b77ccba0..8f88b68115 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 @@ -19,30 +19,18 @@ export default function MediaTab() { const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); - const [list, listSet] = useState([]); const media = useLazyLists({ + debug: "aaaa", fetcher: ListMediaFiles, list, listSet, + onInputChange: () => setShowMasonryGrid(false), + onSuccess: () => setShowMasonryGrid(true), requestList: true, addQueries: { per_page: 12 }, }); - const resetMasonryGrid = () => { - setShowMasonryGrid(false); - setTimeout(() => setShowMasonryGrid(true), 10); - }; - - const handleSortOrFilterChange = (event: any) => { - if (media.onChange) { - media.onChange(event); - } - - // Reset Masonry Grid - resetMasonryGrid(); - }; - const filterOptions = [ { value: "all", label: "All Media" }, { value: "images", label: "Images" }, @@ -65,7 +53,7 @@ export default function MediaTab() { icon: faArrowDownWideShort, options: sortOptions, name: "sort", - onChange: handleSortOrFilterChange, + onChange: media.onChange, value: media.sort, }} /> @@ -74,7 +62,7 @@ export default function MediaTab() { icon: faFilter, options: filterOptions, name: "filter", - onChange: handleSortOrFilterChange, + onChange: media.onChange, value: media.filter, }} /> 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 08094f7fbe..4c2053f270 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,8 +1,6 @@ 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"; -// import VideoCard from "components/common/Card/VideoCard"; +import WeightsCards from "components/common/Card/WeightsCards"; import { TempSelect } from "components/common"; import { faArrowDownWideShort, @@ -13,7 +11,6 @@ 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 InfiniteScroll from "react-infinite-scroll-component"; -import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory"; import { useBookmarks, useLazyLists } from "hooks"; export default function WeightsTab() { @@ -25,24 +22,12 @@ export default function WeightsTab() { fetcher: ListWeights, list, listSet, + onInputChange: () => setShowMasonryGrid(false), + onSuccess: () => setShowMasonryGrid(true), requestList: true, addQueries: { per_page: 12 }, }); - 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" }, @@ -74,6 +59,7 @@ export default function WeightsTab() { // { value: "SDXL", label: "SD XL" }, // ]; + return ( <>
@@ -83,7 +69,7 @@ export default function WeightsTab() { icon: faArrowDownWideShort, options: sortOptions, name: "sort", - onChange: handleSortOrFilterChange, + onChange: weights.onChange, value: weights.sort, }} /> @@ -92,7 +78,7 @@ export default function WeightsTab() { icon: faFilter, options: filterOptions, name: "filter", - onChange: handleSortOrFilterChange, + onChange: weights.onChange, value: weights.filter, }} /> @@ -154,67 +140,13 @@ export default function WeightsTab() { gridRef={gridContainerRef} onLayoutComplete={() => console.log("Layout complete!")} > - {weights.list.map((data: any, index: number) => { - let card; - switch (data.weights_category) { - case WeightCategory.TTS: - card = ( - - ); - break; - case WeightCategory.VC: - card = ( - - ); - break; - case WeightCategory.ZS: - card = ( - - ); - break; - case WeightCategory.SD: - card = ( - - ); - break; - case WeightCategory.VOCODER: - card = <>; - break; - default: - card =
Unsupported weight type
; - } - return ( -
- {card} -
- ); - })} + { weights.list.map((data: any, key: number) => { + let props = { bookmarks, data, showCreator: true, type: "weights" }; + + return
+ +
; + }) } )} 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 c9dfdf3e72..08f5bdf298 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 @@ -22,10 +22,10 @@ export default function BookmarksTab({ username }: { username: string }) { const [tts, ttsSet] = useState("all"); const [vc, vcSet] = useState("all"); const [list, listSet] = useState([]); - const resetMasonryGrid = () => { - setShowMasonryGrid(false); - setTimeout(() => setShowMasonryGrid(true), 10); - }; + // const resetMasonryGrid = () => { + // setShowMasonryGrid(false); + // setTimeout(() => setShowMasonryGrid(true), 10); + // }; const { filter, isLoading, list: dataList, onChange, page, pageChange, pageCount, sort, status } = useListContent({ addQueries: { per_page: 24 }, addSetters: { sdSet, ttsSet, vcSet }, @@ -33,7 +33,8 @@ export default function BookmarksTab({ username }: { username: string }) { fetcher: GetBookmarksByUser, list, listSet, - onInputChange: () => resetMasonryGrid(), + onInputChange: () => setShowMasonryGrid(false), + onSuccess: () => setShowMasonryGrid(true), requestList: true, urlParam: username, }); 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 331129d36f..fb2f47c1bc 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 @@ -21,16 +21,17 @@ export default function MediaTab({ username }: { username: string }) { const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); const [list, listSet] = useState([]); - const resetMasonryGrid = () => { - setShowMasonryGrid(false); - setTimeout(() => setShowMasonryGrid(true), 10); - }; + // const resetMasonryGrid = () => { + // setShowMasonryGrid(false); + // setTimeout(() => setShowMasonryGrid(true), 10); + // }; const media = useListContent({ // addQueries: { abc: "anything" }, an example fetcher: GetMediaByUser, list, listSet, - onInputChange: () => resetMasonryGrid(), + onInputChange: () => setShowMasonryGrid(false), + onSuccess: () => setShowMasonryGrid(true), requestList: true, urlParam: username, addQueries: { per_page: 24 }, 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 2e6ccc80c3..e9846ac3ee 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,7 +1,6 @@ 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"; +import WeightsCards from "components/common/Card/WeightsCards"; import { faArrowDownWideShort, faFilter, @@ -10,7 +9,6 @@ import Pagination from "components/common/Pagination"; import { useBookmarks, useListContent } from "hooks"; import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser"; import { TempSelect } from "components/common"; -import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory"; import SkeletonCard from "components/common/Card/SkeletonCard"; // interface IWeighttModelData { @@ -30,17 +28,14 @@ export default function WeightsTab({ username }: { username: string }) { const [showMasonryGrid, setShowMasonryGrid] = useState(true); const bookmarks = useBookmarks(); const [list, listSet] = useState([]); - const resetMasonryGrid = () => { - setShowMasonryGrid(false); - setTimeout(() => setShowMasonryGrid(true), 10); - }; const weights = useListContent({ addSetters: { sdSet, ttsSet, vcSet }, debug: "Weights tab", fetcher: GetWeightsByUser, list, listSet, - onInputChange: () => resetMasonryGrid(), + onInputChange: () => setShowMasonryGrid(false), + onSuccess: () => setShowMasonryGrid(true), requestList: true, urlParam: username, addQueries: { per_page: 24 }, @@ -88,16 +83,6 @@ export default function WeightsTab({ username }: { username: string }) { addQueries: { per_page: 24 }, }; - const Card = ({ props, type }: { props: any, type: string }) => { - switch (type) { - case WeightCategory.TTS: - case WeightCategory.VC: - case WeightCategory.ZS: return ; - case WeightCategory.SD: return ; - default: return
Unsupported media type
; - } - }; - return ( <>
@@ -176,7 +161,7 @@ export default function WeightsTab({ username }: { username: string }) { let props = { bookmarks, data, showCreator: true, type: "weights" }; return
- +
; }) }