Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp

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 (
-    <Link to={linkUrl}>
+    <Link
+      {...{
+        to: linkUrl,
+        state: { origin },
+        onClick: () => console.log("🌠 AUDIO CARD"),
+      }}
+    >
       <Card padding={true} canHover={true}>
         {type === "media" && (
           <>

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 (
-    <Link to={linkUrl}>
+    <Link
+      {...{
+        to: linkUrl,
+        state: { origin },
+        onClick: () => console.log("🌠 IMG CARD"),
+      }}
+    >
       <Card padding={false} canHover={true}>
         {type === "media" && (
           <>

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 <AudioCard {...props} />;
+    case "image":
+      return <ImageCard {...props} />;
+    case "video":
+      return <VideoCard {...props} />;
+    default:
+      return <div>Unsupported media type</div>;
+  }
+};

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 (
-    <Link to={linkUrl}>
+    <Link {...{ to: linkUrl, state: { origin }, onClick: () => console.log("🌠 VIDEO CARD") }}>
       <Card padding={false} canHover={true}>
         {type === "media" && (
           <>

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:

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<Weight | undefined | null>(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 };
 };

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<HTMLDivElement | null>(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,
                   };

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<HTMLDivElement | null>(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 <AudioCard {...props} />;
-      case "image":
-        return <ImageCard {...props} />;
-      case "video":
-        return <VideoCard {...props} />;
-      default:
-        return <div>Unsupported media type</div>;
-    }
-  };
-
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -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 (
                         <div
                           {...{
@@ -127,7 +114,7 @@ export default function MediaTab({ username }: { username: string }) {
                             key,
                           }}
                         >
-                          <Card {...{ type: data.media_type, props }} />
+                          <MediaCards {...{ type: data.media_type, props }} />
                         </div>
                       );
                     })}

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<HTMLDivElement | null>(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",
                     };

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}
       />
     </div>
   );