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 57a56586bb..7620418a69 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 @@ -1,6 +1,11 @@ import React, { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import { faEye, faLanguage, faPencil, faWaveform } from "@fortawesome/pro-solid-svg-icons"; +import { + faEye, + faLanguage, + faPencil, + faWaveform, +} from "@fortawesome/pro-solid-svg-icons"; import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import Panel from "components/common/Panel"; import { Stepper } from "./components/Stepper"; @@ -21,16 +26,23 @@ interface RouteParams { dataset_token?: string; } -function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueueInferenceJob: any, sessionWrapper: SessionWrapper }) { +function VoiceDesignerFormPage({ + enqueueInferenceJob, + sessionWrapper, +}: { + enqueueInferenceJob: any; + sessionWrapper: SessionWrapper; +}) { const history = useHistory(); - const { datasets, inputCtrl, languages, visibilityOptions, voices } = useVoiceRequests({}); + const { datasets, inputCtrl, languages, visibilityOptions, voices } = + useVoiceRequests({}); const [language, languageSet] = useState("en"); const [visibility, visibilitySet] = useState("hidden"); const [title, titleSet] = useState(""); - const [fetched,fetchedSet] = useState(false); - const [deleting,deletingSet] = useState([]); // samples currently being uploaded - const [inProgress,inProgressSet] = useState([]); // samples currently being uploaded - const [samples,samplesSet] = useState([]); // fetched/uploaded samples + const [fetched, fetchedSet] = useState(false); + const [deleting, deletingSet] = useState([]); // samples currently being uploaded + const [inProgress, inProgressSet] = useState([]); // samples currently being uploaded + const [samples, samplesSet] = useState([]); // fetched/uploaded samples const audioProps = useFile({}); const { user, sessionFetched } = useSession(); @@ -67,15 +79,26 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu const initialStep = history.location.pathname.includes("/upload") ? 1 : 0; const [currentStep, setCurrentStep] = useState(initialStep); - const steps = existingVoice ? ["Edit Details", "Edit Samples"] : ["Voice Details", "Upload Samples"]; - const uploadProps = { audioProps, datasetToken: dataset_token, deleting, deletingSet, inProgress, inProgressSet, samples, samplesSet }; + const steps = existingVoice + ? ["Edit Details", "Edit Samples"] + : ["Voice Details", "Upload Samples"]; + const uploadProps = { + audioProps, + datasetToken: dataset_token, + deleting, + deletingSet, + inProgress, + inProgressSet, + samples, + samplesSet, + }; const displayStep = (step: any) => { switch (step) { case 0: return ; case 1: - return ; + return ; default: return null; } @@ -96,27 +119,30 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu if (!existingVoice) { // It's a new creation and on the first step - datasets.create("",{ - title, - creator_set_visibility: visibility, - idempotency_token: uuidv4(), - }).then((res: any) => { - if (res && res.success && res.token) { - history.push(`/voice-designer/dataset/${ res.token }/upload`); - } - }); - + datasets + .create("", { + title, + creator_set_visibility: visibility, + idempotency_token: uuidv4(), + }) + .then((res: any) => { + if (res && res.success && res.token) { + history.push(`/voice-designer/dataset/${res.token}/upload`); + } + }); } else if (dataset_token) { // It's edit mode and on the first step - datasets.edit(dataset_token,{ - title, - creator_set_visibility: visibility, - ietf_language_tag: language - }).then((res: any) => { - if (res && res.success && res.token) { - history.push(`/voice-designer/dataset/${dataset_token}/upload`); - } - }); + datasets + .edit(dataset_token, { + title, + creator_set_visibility: visibility, + ietf_language_tag: language, + }) + .then((res: any) => { + if (res && res.success && res.token) { + history.push(`/voice-designer/dataset/${dataset_token}/upload`); + } + }); } setCurrentStep(currentStep + 1); } else if (currentStep < steps.length - 1) { @@ -145,14 +171,13 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu useEffect(() => { if (!fetched && dataset_token) { fetchedSet(true); - datasets.get(dataset_token,{}) - .then((res) => { + datasets.get(dataset_token, {}).then(res => { languageSet(res.ietf_language_tag); titleSet(res.title); visibilitySet(res.creator_set_visibility); }); } - },[dataset_token,datasets,fetched]); + }, [dataset_token, datasets, fetched]); if (sessionFetched && !user) { history.push("/voice-designer"); @@ -175,23 +200,27 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu existingVoice ? "/voice-designer/datasets" : "/voice-designer/voices" } /> - { sessionFetched && user && -
- -
+ {sessionFetched && user && ( + +
+ +
-
{displayStep(currentStep)}
+
{displayStep(currentStep)}
- -
- } + +
+ )} ); } diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx index 30de935985..50e33efa85 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx @@ -7,6 +7,7 @@ interface StepperControlsProps { createDisabled: boolean; steps: string[]; currentStep: number; + continueDisabled?: boolean; } const StepperControls: React.FC = ({ @@ -15,7 +16,8 @@ const StepperControls: React.FC = ({ steps, currentStep, onCreate, - createDisabled + createDisabled, + continueDisabled, }) => { return (
@@ -26,13 +28,21 @@ const StepperControls: React.FC = ({ )} {currentStep === 0 && ( - )} {currentStep === 1 && ( - )}