Merge pull request #362 from storytold/olivicmic-fy-voice-designer-consume-api-react

voice designer voice update working

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx

@@ -28,7 +28,7 @@ interface RouteParams {
 
 function VoiceDesignerFormPage() {
   const history = useHistory();
-  const { datasets, inputCtrl, voices } = useVoiceRequests();
+  const { datasets, inputCtrl, languages, visibilityOptions, voices } = useVoiceRequests();
   const [language, languageSet] = useState("en");
   const [visibility, visibilitySet] = useState("");
   const [title, titleSet] = useState("");
@@ -36,17 +36,6 @@ function VoiceDesignerFormPage() {
 
   const audioProps = useFile({}); // contains upload inout state and controls, see docs
 
-  const languages = [
-    { value: "en", label: "English" },
-    { value: "es", label: "Spanish" },
-    { value: "fr", label: "French" },
-  ];
-
-  const visibilityOptions = [
-    { label: "Public", value: "public" },
-    { label: "Hidden", value: "hidden" },
-  ];
-
   const datasetInputs = [
     {
       type: "text",
@@ -119,7 +108,7 @@ function VoiceDesignerFormPage() {
           creator_set_visibility: visibility,
           idempotency_token: uuidv4(),
         }).then((res: any) => {
-          
+
           console.log("😎",res);
           if (res && res.success && res.token) {
             history.push(`/voice-designer/dataset/${ res.token }/upload`);

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import {
   faEye,
   faLanguage,
@@ -8,18 +9,48 @@ import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import Panel from "components/common/Panel";
 import PageHeader from "components/layout/PageHeader";
 import Container from "components/common/Container";
-import Input from "components/common/Input";
-import Select from "components/common/Select";
-import { Button } from "components/common";
+import TempInput from "components/common/TempInput";
+import { Button, TempSelect } from "components/common";
+import useVoiceRequests from "./useVoiceRequests";
+import { useHistory } from "react-router-dom";
 
 function VoiceDesignerVoiceEditPage() {
+  const [language, languageSet] = useState("en");
+  const [visibility, visibilitySet] = useState("");
+  const [title, titleSet] = useState("");
+
+  const [fetched,fetchedSet] = useState(false);
+
+  const history = useHistory();
+  const { voice_token } = useParams();
+
+  const { inputCtrl, languages, visibilityOptions, voices } = useVoiceRequests();
+
   usePrefixedDocumentTitle("Edit Voice");
 
-  const dummyData = {
-    name: "Name",
-    visibility: "public",
-    language: "English",
-  };
+  const onClick = () => voices.update(voice_token,{
+    title,
+    creator_set_visibility: visibility,
+    ietf_language_tag: language,
+  })
+  .then((res: any) => {
+    if (res && res.success) {
+      history.push("/voice-designer");
+    }
+  });
+
+  useEffect(() => {
+    if (!fetched && voice_token) {
+      fetchedSet(true);
+      voices.get(voice_token,{})
+      .then((res) => {
+        languageSet(res.ietf_language_tag);
+        titleSet(res.title);
+        visibilitySet(res.creator_set_visibility);
+      });
+    }
+
+  },[fetched, voice_token, voices]);
 
   return (
     <Container type="panel">
@@ -36,26 +67,40 @@ function VoiceDesignerVoiceEditPage() {
       <Panel padding={true}>
         <div className="d-flex flex-column gap-4">
           <div className="row gy-4">
-            <Input label="Name" placeholder="Voice name" />
+            <TempInput {...{
+              label: "Title",
+              placeholder: "Voice name",
+              onChange: inputCtrl(titleSet),
+              value: title
+            }}/>
           </div>
 
           <div>
-            <Select
-              value={dummyData.language}
-              icon={faLanguage}
-              label="Language"
+            <TempSelect {...{
+              icon: faLanguage,
+              label: "Language",
+              // placeholder: "Voice name",
+              onChange: inputCtrl(languageSet),
+              options: languages,
+              value: language
+            }}
             />
           </div>
 
           <div>
-            <Select
-              value={dummyData.visibility}
-              icon={faEye}
-              label="Visibility"
+            <TempSelect
+              {...{
+                icon: faEye,
+                label: "Visibility",
+                // placeholder: "Voice name",
+                onChange: inputCtrl(visibilitySet),
+                options: visibilityOptions,
+                value: visibility
+              }}
             />
           </div>
 
-          <Button label="Save" />
+          <Button {...{ label: "Save", onClick }}/>
         </div>
       </Panel>
     </Container>

packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx

@@ -9,6 +9,7 @@ import {
   DeleteVoice, 
   // DeleteVoiceRequest, use me somewhere pls
   DeleteVoiceResponse } from "@storyteller/components/src/api/voice_designer/voices/DeleteVoice";
+  import { UpdateVoice } from "@storyteller/components/src/api/voice_designer/voices/UpdateVoice";
 
 // dataset imports
 
@@ -38,13 +39,13 @@ export default function useVoiceRequests() {
 
   const createDataset = (urlRouteArgs: string, request: CreateDatasetRequest): Promise<CreateDatasetResponse> =>
     CreateDataset(urlRouteArgs, request).then(res => {
-      refreshData();
+      // refreshData(); // not needed because creating a dataset navigates to the upload page with no lists
       return res;
     });
 
 
   const createVoice = (urlRouteArgs: string, request: CreateVoiceRequest): Promise<CreateVoiceResponse> => CreateVoice(urlRouteArgs, request).then(res => {
-    refreshData();
+    // refreshData(); // not needed because creating a voice navigates to a new page with a new instance of useVoiceRequest 
     return res;
   });
 
@@ -79,6 +80,17 @@ export default function useVoiceRequests() {
     });
   };
 
+  const languages = [
+    { value: "en", label: "English" },
+    { value: "es", label: "Spanish" },
+    { value: "fr", label: "French" },
+  ];
+
+  const visibilityOptions = [
+    { label: "Public", value: "public" },
+    { label: "Hidden", value: "hidden" },
+  ];
+
 	useEffect(() => {
     if (user && user.username) {
       if (!fetchedDatasets) {
@@ -109,12 +121,15 @@ export default function useVoiceRequests() {
     inference: {
       enqueue: EnqueueTts,
     },
+    languages,
+    visibilityOptions,
     voices: {
       create: createVoice,
       delete: deleteVoice,
       get: GetVoice,
       list: voices,
-      refresh: refreshData
+      refresh: refreshData,
+      update: UpdateVoice,
     },
     inputCtrl:
       (todo: any) =>