datasets edit integrated into exisiting workflow

packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx

@@ -4,12 +4,12 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import "../Select/Select.scss";
 import ReactSelect, { Props as ReactSelectProps } from "react-select";
 
-interface Option {
+export interface Option {
   value: string,
   label: string
 }
 
-interface SelectProps extends ReactSelectProps {
+export interface SelectProps extends ReactSelectProps {
   icon?: IconDefinition;
   label?: string;
   rounded?: boolean;

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -81,7 +81,6 @@ import { UploadVoiceConversionModel } from "./pages/upload/UploadVoiceConversion
 import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels";
 import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPage";
 import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage";
-import { VoiceDesignerFormPage } from "./pages/voice_designer/VoiceDesignerFormPage";
 import DatasetEditor from "./pages/voice_designer/DatasetEditor";
 import { GenerateSpeechPage } from "./pages/generate_speech/GenerateSpeechPage";
 import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage";
@@ -92,6 +91,7 @@ import MobileMenu from "components/layout/MobileMenu/MobileMenu";
 import { TopNav } from "./nav/TopNav";
 import TtsModelSearchPage from "./pages/tts/tts_model_search/TtsModelSearchPage";
 import MediaPage from "./pages/media/MediaPage";
+import { VoiceDesignerFormPage } from "./pages/voice_designer/VoiceDesignerFormPage";
 import { VoiceDesignerMainPage } from "./pages/voice_designer/VoiceDesignerMainPage";
 import { VoiceDesignerVoiceEditPage } from "./pages/voice_designer/VoiceDesignerVoiceEditPage";
 import VoiceDesignerUseVoicePage from "./pages/voice_designer/VoiceDesignerUseVoicePage";
@@ -646,7 +646,7 @@ class PageContainer extends React.Component<
             <Route
               exact
               path="/voice-designer/create"
-              component={VoiceDesignerVoiceEditPage}
+              component={VoiceDesignerFormPage}
             />
 
             {/* Route for initial voice creation */}

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

@@ -6,7 +6,7 @@ import { faPencil, faWaveform } from "@fortawesome/pro-solid-svg-icons";
 import { TempInput, Panel, SegmentButtons, TempSelect } from "components/common";
 import useVoiceRequests from "./useVoiceRequests";
 
-import { v4 as uuidv4 } from "uuid";
+// import { v4 as uuidv4 } from "uuid";
 
 import "./VoiceDesigner.scss";
 
@@ -19,12 +19,12 @@ interface RouteParams {
 }
 
 export default function DatasetEditor({ value }: Props) {
-  const { datasets } = useVoiceRequests();
+  const { datasets, inputCtrl } = useVoiceRequests();
   const [title, titleSet] = useState("");
   const [language,languageSet] = useState("en");
   const [visibility,visibilitySet] = useState("");
   const [ready,readySet] = useState(false);
-  const inputCtrl = (todo: any) => ({ target }: { target: any}) => todo(target.value);
+  // const inputCtrl = (todo: any) => ({ target }: { target: any}) => todo(target.value);
   const { dataset_token: token } = useParams<RouteParams>();
   const pageTitle = token ? `Edit` : "Create Dataset";
   const subText = token ?
@@ -50,13 +50,14 @@ export default function DatasetEditor({ value }: Props) {
         creator_set_visibility: visibility,
         ietf_language_tag: language
       });
-    } else {
-      datasets.create({
-          title,
-          creator_set_visibility: visibility,
-          idempotency_token: uuidv4(),
-      });
-    }
+    } 
+    // else {
+    //   datasets.create({
+    //       title,
+    //       creator_set_visibility: visibility,
+    //       idempotency_token: uuidv4(),
+    //   });
+    // }
   };
   const headerProps = { back, buttonOnClick, buttonLabel, panel: false, showButton: true, subText, title: pageTitle, titleIcon };
 

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useParams } from "react-router-dom";
-import { 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";
@@ -11,12 +11,36 @@ import PageHeader from "components/layout/PageHeader";
 import Container from "components/common/Container";
 import { useHistory } from "react-router-dom";
 
+import { v4 as uuidv4 } from "uuid";
+
+
+import useVoiceRequests from "./useVoiceRequests";
+
 interface RouteParams {
   dataset_token?: string;
 }
 
 function VoiceDesignerFormPage() {
   const history = useHistory();
+  const { datasets, inputCtrl } = useVoiceRequests();
+  const [language,languageSet] = useState("en");
+  const [visibility,visibilitySet] = useState("");
+  const [title, titleSet] = useState("");
+
+  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", label: "Title", placeholder: "Voice name", value: title, onChange: inputCtrl(titleSet) },
+    { type: "select", icon: faLanguage, label: "Language", value: language, onChange: inputCtrl(languageSet), options: languages },
+    { type: "select", icon: faEye, label: "Visibility", value: visibility, onChange: inputCtrl(visibilitySet), options: visibilityOptions }
+  ];
+
   const { dataset_token } = useParams<RouteParams>();
   const [isNewCreation] = useState(!dataset_token);
   const isEditMode = Boolean(dataset_token) && !isNewCreation;
@@ -33,7 +57,7 @@ function VoiceDesignerFormPage() {
   const displayStep = (step: any) => {
     switch (step) {
       case 0:
-        return <VoiceDetails />;
+        return <VoiceDetails {...{ datasetInputs }} />;
       case 1:
         return <UploadSamples />;
       default:
@@ -55,8 +79,18 @@ function VoiceDesignerFormPage() {
     if (currentStep === 0) {
       if (isNewCreation) {
         // It's a new creation and on the first step
-        const dummyDatasetToken = "dummyToken123";
-        history.push(`/voice-designer/dataset/${dummyDatasetToken}/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
         history.push(`/voice-designer/dataset/${dataset_token}/upload`);

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

@@ -86,9 +86,9 @@ function VoiceDesignerMainPage() {
   });
 
   const button = {
-    label: `Create new ${ view ? "voice" : "dataset" }`,
+    label: `Create new voice`,
     icon: faPlus,
-    to: view ? "/voice-designer/create" : "/voice-designer/dataset/create"
+    to: "/voice-designer/create" 
   };
 
   return (

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx

@@ -1,15 +1,9 @@
-import {
-  faEye,
-  faLanguage,
-  // faMicrophoneLines,
-  // faTags,
-} from "@fortawesome/pro-solid-svg-icons";
+import React from "react";
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 // import { Button } from "components/common";
 import Input from "components/common/Input";
-import useVoiceDetailsStore from "hooks/useVoiceDetailsStore/";
-import React from "react";
-import Select from "components/common/Select";
+// import useVoiceDetailsStore from "hooks/useVoiceDetailsStore/";
+import Select from "components/common/TempSelect";
 
 export const SearchFieldClass = {
   control: (state: any) =>
@@ -26,35 +20,15 @@ export const SearchFieldClass = {
     state.isFocused ? "select-separator" : "select-separator",
 };
 
-function VoiceDetails() {
-  const { visibility, setVisibility } = useVoiceDetailsStore();
+function VoiceDetails({ datasetInputs }: { datasetInputs: any }) {
+  const classNames = SearchFieldClass;
 
   return (
     <div className="d-flex flex-column gap-4">
-      <div className="row gy-4">
-        <Input label="Name" placeholder="Voice name" />
-      </div>
-
-      <div>
-        <Select
-          classNames={SearchFieldClass}
-          value="English"
-          defaultValue="English"
-          placeholder="English"
-          icon={faLanguage}
-          label="Language"
-        />
-      </div>
-
-      <div>
-        <Select
-          classNames={SearchFieldClass}
-          value={visibility}
-          onChange={(e) => setVisibility(e.target.value)}
-          icon={faEye}
-          label="Visibility"
-        />
-      </div>
+      { datasetInputs.map(({ type = "", options = [], ...props }, key: number) => {
+        if (type === "text") return <Input {...{ ...props, key }} />;
+        else return <Select {...{ ...props, classNames, key, options } }/>;
+      }) }
     </div>
   );
 }

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

@@ -9,11 +9,13 @@ import { DeleteVoice } from "@storyteller/components/src/api/voice_designer/voic
 
 import { ListDatasetsByUser, Dataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser";
 import { DeleteDataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/DeleteDataset";
-import { CreateDataset, CreateDatasetRequest, CreateDatasetResponse } from "@storyteller/components/src/api/voice_designer/voice_datasets/CreateDataset";
+import { CreateDataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/CreateDataset";
 import { UpdateDataset, UpdateDatasetRequest } from "@storyteller/components/src/api/voice_designer/voice_datasets/UpdateDataset";
 import { useSession } from "hooks";
 
 export default function useVoiceRequests() {
+
+  // this state will be provided as params, triggering the appropriate api call if present
   const [datasets, datasetsSet] = useState<Dataset[]>([]);
   const [voices, voicesSet] = useState<Voice[]>([]);
   const [fetched,fetchedSet] = useState(false);
@@ -28,17 +30,6 @@ export default function useVoiceRequests() {
     // console.log("🏧",res);
   });
 
-
-  // datasets
-
-  const createDataset = (request: CreateDatasetRequest) => {
-  	// console.log("🌎",);
-  	CreateDataset("",request).then((res: CreateDatasetResponse) => {
-  		// console.log("☘️",res);
-  	});
-  };
-
-
   const deleteDataset = (voiceToken:  string) => DeleteDataset(voiceToken,{
   	set_delete: true,
   	as_mod: false
@@ -74,7 +65,7 @@ export default function useVoiceRequests() {
 
   return { 
   	datasets: {
-  		create: createDataset,
+  		create: CreateDataset,
   		delete: deleteDataset,
   		edit: editDataSet,
   		list: datasets,
@@ -85,5 +76,8 @@ export default function useVoiceRequests() {
       delete: deleteVoice,
       list: voices
     },
+    inputCtrl: (todo: any) => ({ target }: { target: any}) => {
+      console.log("🌿",target);
+      todo(target.value)}
   };
 };