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 3b053da286..6d50b7fc04 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -16,6 +16,7 @@ import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; interface AudioCardProps { bookmarks: any; data: any; + origin?: string; type: "media" | "weights"; showCreator?: boolean; showCover?: boolean; @@ -24,6 +25,7 @@ interface AudioCardProps { export default function AudioCard({ bookmarks, data, + origin = "", type, showCreator, showCover, @@ -31,7 +33,9 @@ export default function AudioCard({ const linkUrl = type === "media" ? `/media/${data.token}` - : `/weight/${data.weight_token || data.details.entity_token}`; + : `/weight/${data.weight_token}${ + origin ? "?origin=" + origin + "&ehhh=mehh" : "" + }`; const handleInnerClick = (event: any) => { event.stopPropagation(); @@ -74,7 +78,13 @@ export default function AudioCard({ } 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 58acc9aa6d..3313656a47 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -14,6 +14,7 @@ import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; interface ImageCardProps { bookmarks: any; data: any; + origin?: string; type: "media" | "weights"; showCreator?: boolean; } @@ -21,6 +22,7 @@ interface ImageCardProps { export default function ImageCard({ bookmarks, data, + origin = "", type, showCreator, }: ImageCardProps) { @@ -45,6 +47,9 @@ export default function ImageCard({ data.weights_type || data.details?.maybe_weights_data?.weights_type ); + const imageLink = new BucketConfig().getGcsUrl(data.public_bucket_path); + + console.log("🌇", origin); const bucketConfig = new BucketConfig(); let coverImage = "/images/avatars/default-pfp.png"; @@ -70,7 +75,13 @@ export default function ImageCard({ } 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 0f9123938b..2ddaa037e2 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,5 +1,7 @@ import React, { useRef, useState } from "react"; +import { useLocation } from "react-router-dom"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; +import MediaCards from "components/common/Card/MediaCards"; import SkeletonCard from "components/common/Card/SkeletonCard"; import { TempSelect } from "components/common"; import { @@ -13,6 +15,7 @@ import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/Ge import WeightsCards from "components/common/Card/WeightsCards"; export default function BookmarksTab({ username }: { username: string }) { + const { pathname: origin } = useLocation(); const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); @@ -165,6 +168,7 @@ export default function BookmarksTab({ username }: { username: string }) { let props = { bookmarks, data, + origin, type: "weights", showCreator: true, }; 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} />
);