diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
index e6bf8d2da7..019826e094 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
+++ b/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`);
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx
index 0f76408868..4048c8a7e0 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx
+++ b/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 (
@@ -36,26 +67,40 @@ function VoiceDesignerVoiceEditPage() {
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx
index 22bbb93483..7e867740bd 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx
+++ b/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 =>
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 => 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) =>