Api2.5/ MyMovies aka Generate Modal (#499)

the MyMovies button is named GenerateModal in the code for reason I am
not sure about

anyway, only 1 endpoint left here, it's getting the info of the details
of the movie, it works if you can click a completed movie and it brings
you to its detailed page

Co-authored-by: wil <wil@storyteller.ai>

app/api.tsx

@@ -26,8 +26,8 @@ export const uploadAudioV2V = `${apiHost}/v1/media_uploads/upload_audio`;
 //   `${apiHost}/v1/media_files/list/user/${username}`;
 
 // Get Any Media
-export const getMediaFileByToken = (fileToken: string) =>
-  `${apiHost}/v1/media_files/file/${fileToken}`;
+// export const getMediaFileByToken = (fileToken: string) =>
+//   `${apiHost}/v1/media_files/file/${fileToken}`;
 
 // Upload File
 export const uploadMedia = `${apiHost}/v1/media_files/upload`;

app/pages/PageEnigma/comps/GenerateModals/GenerateModals.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { useSignals } from "@preact/signals-react/runtime";
+import { useCallback, useState } from "react";
+import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
 
 import { MediaFile } from "~/pages/PageEnigma/models";
 
@@ -7,34 +7,37 @@ import { generateMovieId } from "~/pages/PageEnigma/signals";
 import { ToastTypes } from "~/enums";
 import { addToast } from "~/signals";
 
-import { GetMediaFileByToken } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab/utilities";
-
 import { MyMovies } from "~/pages/PageEnigma/comps/GenerateModals/MyMovies";
 import { Sharing } from "~/pages/PageEnigma/comps/GenerateModals/Sharing";
+import { MediaFilesApi } from "~/Classes/ApiManager/MediaFilesApi";
 
 export function GenerateModals() {
   useSignals();
-  const [movieId, setMovieId] = useState(generateMovieId.value);
   const [mediaFile, setMediaFile] = useState<MediaFile | null>(null);
 
-  useEffect(() => {
-    if (!mediaFile) {
-      setMovieId("");
+  const GetMediaFileByToken = useCallback(async (movieId: string) => {
+    const mediaFilesApi = new MediaFilesApi();
+    const response = await mediaFilesApi.GetMediaFileByToken({
+      mediaFileToken: movieId,
+    });
+    if (response.success && response.data) {
+      setMediaFile(response.data);
+      return;
     }
-  }, [mediaFile]);
-
-  useEffect(() => {
-    // console.log(2, movieId);
-    if (movieId) {
-      GetMediaFileByToken(movieId).then((res) => {
-        if (!res.success) {
-          addToast(ToastTypes.ERROR, "Unable to read media file");
-          return;
-        }
-        setMediaFile(res.media_file ?? null);
-      });
+    addToast(
+      ToastTypes.ERROR,
+      response.errorMessage ||
+        `Unknown Error in Getting Movie (token=${movieId}`,
+    );
+  }, []);
+  const setMovieId = useCallback((movieId: string) => {
+    generateMovieId.value = movieId;
+  }, []);
+  useSignalEffect(() => {
+    if (generateMovieId.value) {
+      GetMediaFileByToken(generateMovieId.value);
     }
-  }, [movieId]);
+  });
 
   if (!mediaFile) {
     return <MyMovies setMovieId={setMovieId} />;

app/pages/PageEnigma/comps/GenerateModals/Sharing.tsx

@@ -22,12 +22,13 @@ interface Props {
 
 export function Sharing({ mediaFile, setMediaFile }: Props) {
   useSignals();
-  // console.log(mediaFile);
 
   const mediaTitle = mediaFile?.maybe_title ?? mediaFile?.token;
+  // TODO: ApiManager should provide all endpoints
   const shareUrl = `https://storyteller.ai/media/${mediaFile?.token || ""}`;
   const shareText = "Check out this media on StoryTeller.ai";
   const [buttonLabel, setButtonLabel] = useState("Copy");
+  // TODO: ApiManager should provide all endpoints
   const downloadLink = `${environmentVariables.value.GOOGLE_API}/vocodes-public${mediaFile?.public_bucket_path}`;
 
   const handleCopyLink = () => {

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab/utilities.ts

@@ -1,44 +1,9 @@
-import { getMediaFileByToken, inferV2V } from "~/api";
+import { inferV2V } from "~/api";
 import {
   EnqueueVoiceConversionRequest,
   EnqueueVoiceConversionResponse,
 } from "./typesImported";
 
-import { GetMediaFileResponse } from "~/pages/PageEnigma/models";
-
-export function GetMediaFileByToken(
-  fileToken: string,
-): Promise<GetMediaFileResponse> {
-  return fetch(getMediaFileByToken(fileToken), {
-    method: "GET",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    credentials: "include",
-  })
-    .then((res) => res.json())
-    .then((res) => {
-      const response: GetMediaFileResponse = res;
-
-      if (response && response.success && response.media_file) {
-        // NB: Timestamps aren't converted to Date objects on their own!
-        response.media_file.created_at = new Date(
-          response.media_file.created_at,
-        );
-        response.media_file.updated_at = new Date(
-          response.media_file.updated_at,
-        );
-        return response;
-      } else {
-        return { success: false };
-      }
-    })
-    .catch(() => {
-      return { success: false };
-    });
-}
-
 export function GenerateVoiceConversion(
   request: EnqueueVoiceConversionRequest,
 ): Promise<EnqueueVoiceConversionResponse> {