From 26f055f20701cf38d92067803f59333cd862be19 Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 26 Dec 2023 17:12:04 -0500 Subject: [PATCH] bookmark integration on cards, in progress --- .../common/Card/AudioCard/AudioCard.tsx | 13 +++-- .../common/Card/ImageCard/ImageCard.tsx | 2 + .../view/pages/explore/tabs/FeaturedTab.tsx | 17 +++--- .../v2/view/pages/explore/tabs/MediaTab.tsx | 39 ++++++------- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 57 ++++++++++--------- .../profile_view/tabs/BookmarksTab.tsx | 38 ++++++++----- .../profile/profile_view/tabs/MediaTab.tsx | 21 +++++-- .../profile/profile_view/tabs/WeightsTab.tsx | 57 ++++++++++--------- 8 files changed, 140 insertions(+), 104 deletions(-) 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 7986864cdc..d5546b8d72 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -12,6 +12,7 @@ import Button from "components/common/Button"; import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; import WeightCoverImage from "components/common/WeightCoverImage"; interface AudioCardProps { + bookmarks: any, data: any; type: "media" | "weights"; showCreator?: boolean; @@ -19,11 +20,13 @@ interface AudioCardProps { } export default function AudioCard({ + bookmarks, data, type, showCreator, showCover, }: AudioCardProps) { + console.log("😎",); const linkUrl = type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`; @@ -148,10 +151,12 @@ export default function AudioCard({
- + )} 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 75c027282d..e2684d7a09 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -21,6 +21,8 @@ export default function ImageCard({ data, type, showCreator }: ImageCardProps) { const linkUrl = type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`; + console.log("🎲",data); + const handleInnerClick = (event: any) => { event.stopPropagation(); }; 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 104bc6bc84..54fd01106e 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 @@ -6,11 +6,12 @@ import { Link } from "react-router-dom"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; -import { useLazyLists } from "hooks"; +import { useBookmarks, useLazyLists } from "hooks"; import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles"; import SkeletonCard from "components/common/Card/SkeletonCard"; export default function FeaturedTab() { + const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [list, listSet] = useState([]); @@ -52,13 +53,13 @@ export default function FeaturedTab() { > {media.list.map((data, index) => { let card = ( - + ); return (
(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); @@ -119,32 +120,32 @@ export default function MediaTab() { switch (data.media_type) { case "audio": card = ( - + ); break; case "image": card = ( - + ); break; case "video": card = ( - + ); break; default: 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 2697227ca7..08094f7fbe 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,9 +14,10 @@ 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 { useBookmarks, useLazyLists } from "hooks"; export default function WeightsTab() { + const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); const [list, listSet] = useState([]); @@ -158,45 +159,45 @@ export default function WeightsTab() { 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: 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 bacdf67db9..a4b934bd86 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 @@ -11,14 +11,15 @@ import { } from "@fortawesome/pro-solid-svg-icons"; import Pagination from "components/common/Pagination"; -import { useListContent } from "hooks"; +import { useBookmarks, useListContent } from "hooks"; import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; export default function BookmarksTab({ username }: { username: string }) { + const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [selectedFilter, setSelectedFilter] = useState("all"); const [list, listSet] = useState([]); - const bookmarks = useListContent({ + const { isLoading, list: dataList, page, pageChange, pageCount, status } = useListContent({ debug: "bookmarks tab", fetcher: GetBookmarksByUser, list, @@ -29,13 +30,13 @@ export default function BookmarksTab({ username }: { username: string }) { }); const handlePageClick = (selectedItem: { selected: number }) => { - bookmarks.pageChange(selectedItem.selected); + pageChange(selectedItem.selected); }; const paginationProps = { onPageChange: handlePageClick, - pageCount: bookmarks.pageCount, - currentPage: bookmarks.page, + pageCount, + currentPage: page, }; const filterOptions = [ @@ -117,7 +118,7 @@ export default function BookmarksTab({ username }: { username: string }) {
- { bookmarks.isLoading ? ( + { isLoading ? (
{Array.from({ length: 12 }).map((_, index) => ( @@ -125,7 +126,7 @@ export default function BookmarksTab({ username }: { username: string }) {
) : ( <> - {bookmarks.list.length === 0 && bookmarks.status === 3 ? ( + { dataList.length === 0 && status === 3 ? (
No bookmarked weights yet.
@@ -134,21 +135,32 @@ export default function BookmarksTab({ username }: { username: string }) { gridRef={gridContainerRef} onLayoutComplete={() => console.log("Layout complete!")} > - {bookmarks.list.map((data: any, index: number) => { - console.log("🧣", data); + { dataList.map((data: any, index: number) => { let card; switch (data.media_type) { case "audio": - card = ; + card = ; break; case "image": - card = ; + card = ; break; case "video": - card = ; + card = ; break; default: - card =
Unsupported media type
; + card =
Unsupported media type
; } return (
(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); @@ -117,13 +118,25 @@ export default function MediaTab({ username }: { username: string }) { let card; switch (data.media_type) { case "audio": - card = ; + card = ; break; case "image": - card = ; + card = ; break; case "video": - card = ; + card = ; break; default: card =
Unsupported media type
; 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 6b6608dc7e..e9b53ec588 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 @@ -7,7 +7,7 @@ import { faFilter, } from "@fortawesome/pro-solid-svg-icons"; import Pagination from "components/common/Pagination"; -import { useListContent } from "hooks"; +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"; @@ -29,6 +29,7 @@ export default function WeightsTab({ username }: { username: string }) { const [vc, vcSet] = useState("all"); const [showMasonryGrid, setShowMasonryGrid] = useState(true); const addSetters = { sdSet, ttsSet, vcSet }; + const bookmarks = useBookmarks(); const [list, listSet] = useState([]); const weights = useListContent({ @@ -177,45 +178,45 @@ export default function WeightsTab({ username }: { username: string }) { 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: