don't allow continue if no title

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 <VoiceDetails {...{ datasetInputs }} />;
       case 1:
-        return <UploadSamples {...uploadProps }/>;
+        return <UploadSamples {...uploadProps} />;
       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 && <Panel>
-        <div className="p-3 px-lg-4 bg-stepper">
-          <Stepper steps={steps} currentStep={currentStep} />
-        </div>
+      {sessionFetched && user && (
+        <Panel>
+          <div className="p-3 px-lg-4 bg-stepper">
+            <Stepper steps={steps} currentStep={currentStep} />
+          </div>
 
-        <div className="p-3 py-4 p-md-4">{displayStep(currentStep)}</div>
+          <div className="p-3 py-4 p-md-4">{displayStep(currentStep)}</div>
 
-        <StepperControls
-          steps={steps}
-          currentStep={currentStep}
-          onBack={handleBack}
-          onNext={handleNext}
-          onCreate={handleCreateVoice}
-          createDisabled={ !!deleting.length || !!inProgress.length || !samples.length } // deleting, uploading, or no samples = disabled
-        />
-      </Panel>
-    }
+          <StepperControls
+            steps={steps}
+            currentStep={currentStep}
+            onBack={handleBack}
+            onNext={handleNext}
+            onCreate={handleCreateVoice}
+            createDisabled={
+              !!deleting.length || !!inProgress.length || !samples.length
+            } // deleting, uploading, or no samples = disabled
+            continueDisabled={title.length === 0}
+          />
+        </Panel>
+      )}
     </Container>
   );
 }

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<StepperControlsProps> = ({
@@ -15,7 +16,8 @@ const StepperControls: React.FC<StepperControlsProps> = ({
   steps,
   currentStep,
   onCreate,
-  createDisabled
+  createDisabled,
+  continueDisabled,
 }) => {
   return (
     <div className="p-3 pb-4 px-lg-4 pt-0 d-flex gap-3">
@@ -26,13 +28,21 @@ const StepperControls: React.FC<StepperControlsProps> = ({
       )}
 
       {currentStep === 0 && (
-        <button className="btn btn-primary w-100" onClick={onNext}>
+        <button
+          className="btn btn-primary w-100"
+          onClick={onNext}
+          disabled={continueDisabled}
+        >
           Continue
         </button>
       )}
 
       {currentStep === 1 && (
-        <button disabled={ createDisabled } className="btn btn-primary w-100" onClick={onCreate}>
+        <button
+          disabled={createDisabled}
+          className="btn btn-primary w-100"
+          onClick={onCreate}
+        >
           Create Voice
         </button>
       )}