From 9ab82f38741b29932418e9375af4fff319ed64e6 Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 28 Dec 2023 19:59:25 -0500 Subject: [PATCH] added origin value to weights cards for navigating back to upon weight delete --- .../common/Card/AudioCard/AudioCard.tsx | 8 +++--- .../common/Card/ImageCard/ImageCard.tsx | 7 +++-- .../src/components/common/Card/MediaCards.tsx | 23 ++++++++++++++++ .../common/Card/VideoCard/VideoCard.tsx | 5 ++-- .../components/common/Card/WeightsCards.tsx | 1 + .../hooks/useWeightFetch/useWeightFetch.tsx | 22 +++++++++++++-- .../profile_view/tabs/BookmarksTab.tsx | 23 ++++------------ .../profile/profile_view/tabs/MediaTab.tsx | 23 ++++------------ .../profile/profile_view/tabs/WeightsTab.tsx | 5 ++++ .../src/v2/view/pages/weight/WeightPage.tsx | 27 +++++++------------ 10 files changed, 82 insertions(+), 62 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/Card/MediaCards.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 32750b312e..6d5bceeb8d 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -13,8 +13,9 @@ import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; import WeightCoverImage from "components/common/WeightCoverImage"; interface AudioCardProps { - bookmarks: any, + bookmarks: any; data: any; + origin?: string; type: "media" | "weights"; showCreator?: boolean; showCover?: boolean; @@ -23,12 +24,13 @@ interface AudioCardProps { export default function AudioCard({ bookmarks, data, + origin = "", type, showCreator, showCover, }: AudioCardProps) { const linkUrl = - type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`; + type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}${origin ? "?origin=" + origin + "&ehhh=mehh" : "" }`; const handleInnerClick = (event: any) => { event.stopPropagation(); @@ -45,7 +47,7 @@ export default function AudioCard({ useWeightTypeInfo(data.weights_type); return ( - + console.log("🌠 AUDIO CARD") }}> {type === "media" && ( <> 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 bc6ed4f978..6b02607743 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -14,11 +14,12 @@ import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; interface ImageCardProps { bookmarks: any, data: any; + origin?: string; type: "media" | "weights"; showCreator?: boolean; } -export default function ImageCard({ bookmarks, data, type, showCreator }: ImageCardProps) { +export default function ImageCard({ bookmarks, data, origin = "", type, showCreator }: ImageCardProps) { const linkUrl = type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`; @@ -38,8 +39,10 @@ export default function ImageCard({ bookmarks, data, type, showCreator }: ImageC const imageLink = new BucketConfig().getGcsUrl(data.public_bucket_path); + console.log("🌇", origin); + return ( - + console.log("🌠 IMG CARD") }}> {type === "media" && ( <> diff --git a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx new file mode 100644 index 0000000000..345357f1ab --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import AudioCard from "./AudioCard"; +import ImageCard from "./ImageCard"; +import VideoCard from "./VideoCard"; + +interface Props { + props: any, + type: string +} + +export default function MediaCards({ props, type }: Props) { + console.log("🔋",props); + switch (type) { + case "audio": + return ; + case "image": + return ; + case "video": + return ; + default: + return
Unsupported media type
; + } +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx index 5c3f2ccb97..112c873b4e 100644 --- a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx @@ -12,11 +12,12 @@ import { Link } from "react-router-dom"; interface VideoCardProps { data: any; + origin?: string; type: "media" | "weights"; showCreator?: boolean; } -export default function VideoCard({ data, type, showCreator }: VideoCardProps) { +export default function VideoCard({ data, origin = "", type, showCreator }: VideoCardProps) { const linkUrl = type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`; @@ -34,7 +35,7 @@ export default function VideoCard({ data, type, showCreator }: VideoCardProps) { const videoLink = new BucketConfig().getGcsUrl(data.public_bucket_path); return ( - + console.log("🌠 VIDEO CARD") }}> {type === "media" && ( <> diff --git a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx index 828b14a6d7..ac34cf75d3 100644 --- a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx +++ b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx @@ -9,6 +9,7 @@ interface Props { } export default function WeightsCards({ props, type }: Props) { + console.log("🧿",props); switch (type) { case WeightCategory.TTS: case WeightCategory.VC: diff --git a/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx b/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx index 73ab862330..0f7543c1f6 100644 --- a/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx +++ b/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx @@ -1,13 +1,16 @@ import { useEffect, useState } from 'react'; +import { useHistory } from 'react-router-dom'; import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; import { GetWeight, Weight } from "@storyteller/components/src/api/weights/GetWeight"; import { UpdateWeight } from "@storyteller/components/src/api/weights/UpdateWeight"; +import { DeleteWeight } from "@storyteller/components/src/api/weights/DeleteWeight"; interface Props { + onRemove?: (x: any) => void; token: string; } -export default function useWeightFetch({ token }: Props) { +export default function useWeightFetch({ onRemove = () => {}, token }: Props) { const [data, setData] = useState(null); const [status, statusSet] = useState(FetchStatus.ready); const [writeStatus, writeStatusSet] = useState(FetchStatus.paused); @@ -16,6 +19,7 @@ export default function useWeightFetch({ token }: Props) { const [descriptionMD, descriptionMDSet] = useState(""); const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress; const fetchError = status === FetchStatus.error; + const history = useHistory(); const onChange = ({ target }: { target: { name: string; value: any } }) => { const todo: { [key: string]: (x: any) => void } = { descriptionMDSet, titleSet, visibilitySet }; @@ -35,11 +39,25 @@ export default function useWeightFetch({ token }: Props) { .then((res: any) => { console.log("📝",res); writeStatusSet(FetchStatus.success); + history.replace(`/weight/${ token }`); }) .catch(err => { writeStatusSet(FetchStatus.error); }); }; + + const remove = () => { + writeStatusSet(FetchStatus.in_progress); + DeleteWeight(token,{ + as_mod: true, + set_delete: true + }) + .then((res: any) => { + writeStatusSet(FetchStatus.success); + console.log("✂️",res); + onRemove(res); + }); + }; useEffect(() => { if (token && !data && status === FetchStatus.ready) { @@ -60,5 +78,5 @@ export default function useWeightFetch({ token }: Props) { } }, [status, token, data]); - return { data, fetchError, isLoading, descriptionMD, onChange, status, title, update, visibility, writeStatus }; + return { data, fetchError, isLoading, descriptionMD, onChange, remove, status, title, update, visibility, writeStatus }; }; \ No newline at end of file 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 9b41e30e54..26a873fd94 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,8 +1,7 @@ import React, { useRef, useState } from "react"; +import { useLocation } from 'react-router-dom'; 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 MediaCards from "components/common/Card/MediaCards"; import SkeletonCard from "components/common/Card/SkeletonCard"; import { TempSelect } from "components/common"; import { @@ -15,6 +14,7 @@ import { useBookmarks, useListContent } from "hooks"; import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; export default function BookmarksTab({ username }: { username: string }) { + const { pathname: origin } = useLocation(); const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); @@ -90,19 +90,6 @@ export default function BookmarksTab({ username }: { username: string }) { { value: "SDXL", label: "SD XL" }, ]; - const Card = ({ props, type }: { props: any; type: string }) => { - switch (type) { - case "audio": - return ; - case "image": - return ; - case "video": - return ; - default: - return
Unsupported media type
; - } - }; - return ( <>
@@ -177,7 +164,7 @@ export default function BookmarksTab({ username }: { username: string }) { onLayoutComplete={() => console.log("Layout complete!")} > {dataList.map((data: any, key: number) => { - let props = { bookmarks, data, type: "weights" }; + let props = { bookmarks, data, origin, type: "weights" }; return (
- +
); })} 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 e968d70e8e..cf528e9907 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,8 +1,7 @@ import React, { useRef, useState } from "react"; +import { useLocation } from 'react-router-dom'; 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 MediaCards from "components/common/Card/MediaCards"; import { TempSelect } from "components/common"; import { faArrowDownWideShort, @@ -17,6 +16,7 @@ import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia" import { useBookmarks, useListContent } from "hooks"; export default function MediaTab({ username }: { username: string }) { + const { pathname: origin } = useLocation(); const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); @@ -60,19 +60,6 @@ export default function MediaTab({ username }: { username: string }) { // { value: "mostliked", label: "Most Liked" }, ]; - const Card = ({ props, type }: { props: any; type: string }) => { - switch (type) { - case "audio": - return ; - case "image": - return ; - case "video": - return ; - default: - return
Unsupported media type
; - } - }; - return ( <>
@@ -119,7 +106,7 @@ export default function MediaTab({ username }: { username: string }) { onLayoutComplete={() => console.log("Layout complete!")} > {media.list.map((data: MediaFile, key: number) => { - let props = { bookmarks, data, type: "media" }; + let props = { bookmarks, data, origin, type: "media" }; return (
- +
); })} 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 8f92b15b06..f3b347254e 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,5 @@ import React, { useRef, useState } from "react"; +import { useLocation } from "react-router-dom"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; import WeightsCards from "components/common/Card/WeightsCards"; import { @@ -21,6 +22,7 @@ import SkeletonCard from "components/common/Card/SkeletonCard"; // } export default function WeightsTab({ username }: { username: string }) { + const { pathname: origin } = useLocation(); const gridContainerRef = useRef(null); const [sd, sdSet] = useState("all"); const [tts, ttsSet] = useState("all"); @@ -41,6 +43,8 @@ export default function WeightsTab({ username }: { username: string }) { addQueries: { page_size: 24 }, }); + console.log("💎",origin); + const handlePageClick = (selectedItem: { selected: number }) => { weights.pageChange(selectedItem.selected); }; @@ -161,6 +165,7 @@ export default function WeightsTab({ username }: { username: string }) { let props = { bookmarks, data, + origin, showCreator: true, type: "weights", }; diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx index 67265eef90..11abaee32e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Link, useParams } from "react-router-dom"; +import { Link, useHistory, useParams, useLocation } from "react-router-dom"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; import Container from "components/common/Container"; @@ -63,14 +63,15 @@ export default function WeightPage({ enqueueTtsJob, inferenceJobsByCategory, }: WeightProps) { + const { search } = useLocation(); const { weight_token } = useParams<{ weight_token: string }>(); - const { - data: weight, - descriptionMD, - fetchError, - isLoading, - title, - } = useWeightFetch({ token: weight_token }); + const origin = search ? new URLSearchParams(search).get("origin") : ""; + const history = useHistory(); + const { data: weight, descriptionMD, fetchError, isLoading, title, remove } = useWeightFetch({ + onRemove: () => { history.push(origin || ""); }, + token: weight_token + }); + const timeUpdated = moment(weight?.updated_at || "").fromNow(); const dateUpdated = moment(weight?.updated_at || "").format("LLL"); const dateCreated = moment(weight?.updated_at || "").format("LLL"); @@ -332,14 +333,6 @@ export default function WeightPage({ setIsDeleteModalOpen(false); }; - const handleDelete = () => { - // if (deleteType === "voice") { - // voices.delete(deleteItem); - // voices.refresh(); - // } else if (deleteType === "dataset") datasets.delete(deleteItem); - // datasets.refresh(); - }; - let audioWeightCoverImage = "/images/avatars/default-pfp.png"; if (weight.maybe_cover_image_public_bucket_path !== null) { audioWeightCoverImage = bucketConfig.getCdnUrl( @@ -578,7 +571,7 @@ export default function WeightPage({ handleClose={closeDeleteModal} title="Delete Weight" content={`Are you sure you want to delete "${title}"? This action cannot be undone.`} - onConfirm={handleDelete} + onConfirm={remove} />
);