added session context along with useSession hook to access it, along with more progress on voice designer api implementation

packages/fakeyou.com/src/App.tsx

@@ -58,7 +58,7 @@ import { VoiceConversionModelUploadJob } from "@storyteller/components/src/jobs/
 import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels";
 import HttpBackend from "i18next-http-backend";
 
-import { InferenceJobs } from "components/providers";
+import { InferenceJobs, Session as SessionProvider } from "components/providers";
 
 // NB: We're transitioning over to this instance of i18n-next that loads translations over HTTP from Json Files.
 // The old i18n-next instance (see below) bakes in translations into the compiled javascript blob.
@@ -789,104 +789,108 @@ class App extends React.Component<Props, State> {
             */}
 
             <div className="migrationComponentWrapper">
-            <InferenceJobs {...{ byCategory: this.state.inferenceJobsByCategory }}>
-              <Switch>
-                <Route path="/">
-                  <PageContainer
-                    sessionWrapper={this.state.sessionWrapper}
-                    querySessionAction={this.querySession}
-                    sessionSubscriptionsWrapper={
-                      this.state.sessionSubscriptionsWrapper
-                    }
-                    querySessionSubscriptionsAction={
-                      this.querySessionSubscriptions
-                    }
-                    isShowingVocodesNotice={this.state.isShowingVocodesNotice}
-                    clearVocodesNotice={this.clearVocodesNotice}
-                    isShowingLangaugeNotice={this.state.isShowingLanguageNotice}
-                    clearLanguageNotice={this.clearLanguageNotice}
-                    displayLanguage={this.state.displayLanguage}
-                    primaryLanguageCode={this.state.primaryLanguageCode}
-                    isShowingTwitchTtsNotice={
-                      this.state.isShowingTwitchTtsNotice
-                    }
-                    clearTwitchTtsNotice={this.clearTwitchTtsNotice}
-                    isShowingPleaseFollowNotice={
-                      this.state.isShowingPleaseFollowNotice
-                    }
-                    clearPleaseFollowNotice={this.clearPleaseFollowNotice}
-                    isShowingBootstrapLanguageNotice={
-                      this.state.isShowingBootstrapLanguageNotice
-                    }
-                    clearBootstrapLanguageNotice={
-                      this.clearBootstrapLanguageNotice
-                    }
-                    enqueueInferenceJob={this.enqueueInferenceJob}
-                    inferenceJobs={this.state.inferenceJobs}
-                    inferenceJobsByCategory={this.state.inferenceJobsByCategory}
-                    enqueueTtsJob={this.enqueueTtsJob}
-                    ttsInferenceJobs={this.state.ttsInferenceJobs}
-                    enqueueW2lJob={this.enqueueW2lJob}
-                    w2lInferenceJobs={this.state.w2lInferenceJobs}
-                    enqueueTtsModelUploadJob={this.enqueueTtsModelUploadJob}
-                    ttsModelUploadJobs={this.state.ttsModelUploadJobs}
-                    enqueueW2lTemplateUploadJob={
-                      this.enqueueW2lTemplateUploadJob
-                    }
-                    w2lTemplateUploadJobs={this.state.w2lTemplateUploadJobs}
-                    enqueueVocoderUploadJob={this.enqueueVocoderUploadJob}
-                    vocoderUploadJobs={this.state.vocoderUploadJobs}
-                    enqueueVoiceConversionModelUploadJob={
-                      this.enqueueVoiceConversionModelUploadJob
-                    }
-                    voiceConversionModelUploadJobs={
-                      this.state.voiceConversionModelUploadJobs
-                    }
-                    textBuffer={this.state.textBuffer}
-                    setTextBuffer={this.setTextBuffer}
-                    clearTextBuffer={this.clearTextBuffer}
-                    ttsModels={this.props.allTtsModels}
-                    setTtsModels={this.props.setAllTtsModels}
-                    allTtsCategories={this.props.allTtsCategories}
-                    setAllTtsCategories={this.props.setAllTtsCategories}
-                    computedTtsCategoryAssignments={
-                      this.props.computedTtsCategoryAssignments
-                    }
-                    setComputedTtsCategoryAssignments={
-                      this.props.setComputedTtsCategoryAssignments
-                    }
-                    allTtsCategoriesByTokenMap={
-                      this.props.allTtsCategoriesByTokenMap
-                    }
-                    allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
-                    ttsModelsByCategoryToken={
-                      this.props.ttsModelsByCategoryToken
-                    }
-                    dropdownCategories={this.props.dropdownCategories}
-                    setDropdownCategories={this.props.setDropdownCategories}
-                    selectedCategories={this.props.selectedCategories}
-                    setSelectedCategories={this.props.setSelectedCategories}
-                    maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
-                    setMaybeSelectedTtsModel={
-                      this.props.setMaybeSelectedTtsModel
-                    }
-                    selectedTtsLanguageScope={
-                      this.props.selectedTtsLanguageScope
-                    }
-                    setSelectedTtsLanguageScope={
-                      this.props.setSelectedTtsLanguageScope
-                    }
-                    voiceConversionModels={this.state.voiceConversionModels}
-                    setVoiceConversionModels={this.setAllVoiceConversionModels}
-                    maybeSelectedVoiceConversionModel={
-                      this.state.maybeSelectedVoiceConversionModel
-                    }
-                    setMaybeSelectedVoiceConversionModel={
-                      this.setMaybeSelectedVoiceConversionModel
-                    }
-                  />
-                </Route>
-              </Switch>
+            <InferenceJobs {...{
+              byCategory: this.state.inferenceJobsByCategory
+            }}>
+              <SessionProvider {...{ sessionWrapper: this.state.sessionWrapper }}>
+                <Switch>
+                  <Route path="/">
+                    <PageContainer
+                      sessionWrapper={this.state.sessionWrapper}
+                      querySessionAction={this.querySession}
+                      sessionSubscriptionsWrapper={
+                        this.state.sessionSubscriptionsWrapper
+                      }
+                      querySessionSubscriptionsAction={
+                        this.querySessionSubscriptions
+                      }
+                      isShowingVocodesNotice={this.state.isShowingVocodesNotice}
+                      clearVocodesNotice={this.clearVocodesNotice}
+                      isShowingLangaugeNotice={this.state.isShowingLanguageNotice}
+                      clearLanguageNotice={this.clearLanguageNotice}
+                      displayLanguage={this.state.displayLanguage}
+                      primaryLanguageCode={this.state.primaryLanguageCode}
+                      isShowingTwitchTtsNotice={
+                        this.state.isShowingTwitchTtsNotice
+                      }
+                      clearTwitchTtsNotice={this.clearTwitchTtsNotice}
+                      isShowingPleaseFollowNotice={
+                        this.state.isShowingPleaseFollowNotice
+                      }
+                      clearPleaseFollowNotice={this.clearPleaseFollowNotice}
+                      isShowingBootstrapLanguageNotice={
+                        this.state.isShowingBootstrapLanguageNotice
+                      }
+                      clearBootstrapLanguageNotice={
+                        this.clearBootstrapLanguageNotice
+                      }
+                      enqueueInferenceJob={this.enqueueInferenceJob}
+                      inferenceJobs={this.state.inferenceJobs}
+                      inferenceJobsByCategory={this.state.inferenceJobsByCategory}
+                      enqueueTtsJob={this.enqueueTtsJob}
+                      ttsInferenceJobs={this.state.ttsInferenceJobs}
+                      enqueueW2lJob={this.enqueueW2lJob}
+                      w2lInferenceJobs={this.state.w2lInferenceJobs}
+                      enqueueTtsModelUploadJob={this.enqueueTtsModelUploadJob}
+                      ttsModelUploadJobs={this.state.ttsModelUploadJobs}
+                      enqueueW2lTemplateUploadJob={
+                        this.enqueueW2lTemplateUploadJob
+                      }
+                      w2lTemplateUploadJobs={this.state.w2lTemplateUploadJobs}
+                      enqueueVocoderUploadJob={this.enqueueVocoderUploadJob}
+                      vocoderUploadJobs={this.state.vocoderUploadJobs}
+                      enqueueVoiceConversionModelUploadJob={
+                        this.enqueueVoiceConversionModelUploadJob
+                      }
+                      voiceConversionModelUploadJobs={
+                        this.state.voiceConversionModelUploadJobs
+                      }
+                      textBuffer={this.state.textBuffer}
+                      setTextBuffer={this.setTextBuffer}
+                      clearTextBuffer={this.clearTextBuffer}
+                      ttsModels={this.props.allTtsModels}
+                      setTtsModels={this.props.setAllTtsModels}
+                      allTtsCategories={this.props.allTtsCategories}
+                      setAllTtsCategories={this.props.setAllTtsCategories}
+                      computedTtsCategoryAssignments={
+                        this.props.computedTtsCategoryAssignments
+                      }
+                      setComputedTtsCategoryAssignments={
+                        this.props.setComputedTtsCategoryAssignments
+                      }
+                      allTtsCategoriesByTokenMap={
+                        this.props.allTtsCategoriesByTokenMap
+                      }
+                      allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
+                      ttsModelsByCategoryToken={
+                        this.props.ttsModelsByCategoryToken
+                      }
+                      dropdownCategories={this.props.dropdownCategories}
+                      setDropdownCategories={this.props.setDropdownCategories}
+                      selectedCategories={this.props.selectedCategories}
+                      setSelectedCategories={this.props.setSelectedCategories}
+                      maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
+                      setMaybeSelectedTtsModel={
+                        this.props.setMaybeSelectedTtsModel
+                      }
+                      selectedTtsLanguageScope={
+                        this.props.selectedTtsLanguageScope
+                      }
+                      setSelectedTtsLanguageScope={
+                        this.props.setSelectedTtsLanguageScope
+                      }
+                      voiceConversionModels={this.state.voiceConversionModels}
+                      setVoiceConversionModels={this.setAllVoiceConversionModels}
+                      maybeSelectedVoiceConversionModel={
+                        this.state.maybeSelectedVoiceConversionModel
+                      }
+                      setMaybeSelectedVoiceConversionModel={
+                        this.setMaybeSelectedVoiceConversionModel
+                      }
+                    />
+                  </Route>
+                </Switch>
+              </SessionProvider>
             </InferenceJobs>
             </div>
           </div>

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

@@ -8,9 +8,12 @@ import FileDetails from "./FileDetails";
 import FileWrapper from "./FileWrapper";
 import FileLabel from "./FileLabel";
 import ImageInput from "./ImageInput";
+import Input from "./Input";
 import NumberSlider from "./NumberSlider";
+import Panel from "./Panel";
 import Radio from "./Radio";
 import SegmentButtons from "./SegmentButtons";
+import Select from "./Select";
 import Slider from "./Slider";
 import Spinner from "./Spinner";
 
@@ -25,9 +28,12 @@ export {
   FileWrapper,
   FileLabel,
   ImageInput,
+  Input,
   NumberSlider,
+  Panel,
   Radio,
   SegmentButtons,
+  Select,
   Slider,
   Spinner
 };

packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx

@@ -5,7 +5,13 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import Button from "components/common/Button";
 import BackButton from "components/common/BackButton";
 
+interface BackConfig {
+  label: string;
+  to: string;
+};
+
 interface PageHeaderProps {
+  back?: BackConfig;
   titleIcon?: IconDefinition;
   title: string | React.ReactNode;
   subText: string | React.ReactNode;
@@ -25,6 +31,7 @@ interface PageHeaderProps {
 }
 
 export default function PageHeader({
+  back,
   titleIcon,
   title,
   subText,
@@ -50,9 +57,9 @@ export default function PageHeader({
     return (
       <div className="py-3 py-lg-4">
         <Panel clear={true}>
-          {showBackButton && (
+          {( back || showBackButton) && (
             <div className="d-flex mb-2 mb-lg-3">
-              <BackButton label={backbuttonLabel} to={backbuttonTo} />
+              <BackButton label={back ? back.label : backbuttonLabel} to={ back ? back.to : backbuttonTo } />
             </div>
           )}
           <div className="row">

packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx

@@ -6,9 +6,10 @@ import { InferenceJobsContext } from 'context';
 interface Props {
   children?: any;
   byCategory?: any;
+  sessionWrapper?: any;
 }
 
-export default function InferenceJobs({ children, byCategory }: Props) {
+export default function InferenceJobs({ children, byCategory, sessionWrapper }: Props) {
 	const processStatus = (job: InferenceJob) => {
     switch (job.jobState) {
       case JobState.PENDING:
@@ -21,7 +22,7 @@ export default function InferenceJobs({ children, byCategory }: Props) {
       default: return -1;
     }
   };
-	return <InferenceJobsContext.Provider {...{ value: { byCategory, processStatus } }}>
+	return <InferenceJobsContext.Provider {...{ value: { byCategory, processStatus, sessionWrapper } }}>
 		{ children }
 	</InferenceJobsContext.Provider>
 };

packages/fakeyou.com/src/components/providers/Session/Session.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SessionContext } from 'context';
+
+interface Props {
+  children?: any;
+  sessionWrapper?: any;
+}
+
+export default function Session({ children, sessionWrapper }: Props) { 
+  return <SessionContext.Provider {...{ value: { sessionWrapper } }}>
+    { children }
+  </SessionContext.Provider>
+};

packages/fakeyou.com/src/components/providers/Session/index.ts

@@ -0,0 +1 @@
+export { default } from './Session';

packages/fakeyou.com/src/components/providers/index.ts

@@ -1,3 +1,4 @@
 import InferenceJobs from "./InferenceJobs";
+import Session from "./Session";
 
-export { InferenceJobs };
+export { InferenceJobs, Session };

packages/fakeyou.com/src/context/SessionContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+
+interface SessionContextType {
+	sessionWrapper?: any
+}
+
+export default createContext<SessionContextType>({});

packages/fakeyou.com/src/context/index.ts

@@ -1,3 +1,4 @@
 import InferenceJobsContext from "./InferenceJobsContext";
+import SessionContext from "./SessionContext";
 
-export { InferenceJobsContext };
+export { InferenceJobsContext, SessionContext };

packages/fakeyou.com/src/hooks/index.tsx

@@ -4,6 +4,7 @@ import useId from './useId';
 import useIdempotency from './useIdempotency';
 import useInferenceJobs from './useInferenceJobs';
 import useLocalize from './useLocalize';
+import useSession from './useSession';
 import useVideo from './useVideo';
 
-export { useFile, useHover, useId, useIdempotency, useInferenceJobs, useLocalize, useVideo };
+export { useFile, useHover, useId, useIdempotency, useInferenceJobs, useLocalize, useSession, useVideo };

packages/fakeyou.com/src/hooks/useSession/index.ts

@@ -0,0 +1 @@
+export { default } from './useSession';

packages/fakeyou.com/src/hooks/useSession/useSession.tsx

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { SessionContext } from 'context';
+
+export default function useInferenceJobs() {
+  const { sessionWrapper } = useContext(SessionContext);
+  return sessionWrapper?.sessionStateResponse || {};
+};

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

@@ -82,6 +82,7 @@ import { VoiceConversionModelListItem } from "@storyteller/components/src/api/vo
 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";
 import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage";
@@ -630,7 +631,10 @@ class PageContainer extends React.Component<
             <Route
               exact
               path="/voice-designer/dataset/:dataset_token/edit"
-              component={VoiceDesignerFormPage}
+              {...{
+                sessionWrapper: this.props.sessionWrapper
+              }}
+              component={DatasetEditor}
             />
 
             {/* Route for handling dataset token for uploading samples */}
@@ -645,9 +649,7 @@ class PageContainer extends React.Component<
             </Route>
 
             <Route path="/voice-designer">
-              <VoiceDesignerMainPage {...{
-                sessionWrapper: this.props.sessionWrapper
-              }}/>
+              <VoiceDesignerMainPage/>
             </Route>
 
             <Route path="/generate-speech">

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

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from "react-router-dom";
+import Container from "components/common/Container";
+import PageHeader from "components/layout/PageHeader";
+// import { Stepper } from "./components/Stepper";
+// import { StepperControls } from "./components/StepperControls";
+import { faPencil, faWaveform } from "@fortawesome/pro-solid-svg-icons";
+import { Input, Panel, Select } from "components/common";
+import useVoiceRequests from "./useVoiceRequests";
+
+
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+
+interface Props {
+  value?: any;
+  sessionWrapper: SessionWrapper;
+}
+
+interface RouteParams {
+  dataset_token?: string;
+}
+
+export default function DatasetEditor({ sessionWrapper, value }: Props) {
+  const { datasets, datasetByToken } = useVoiceRequests();
+  const [title, titleSet] = useState("");
+  const [language,languageSet] = useState({ value: "en", label: "English"});
+  const [visibility,visibilitySet] = useState("");
+  const [ready,readySet] = useState(false);
+  // const [currentStep, currentStepSet] = useState(0);
+  const { dataset_token: token } = useParams<RouteParams>();
+  const pageTitle = token ? `Edit` : "Create Dataset";
+  const subText = token ?
+    "Edit your dataset by uploading more samples to create a new voice" :
+    "Add voice details and upload audio samples to clone your voice!";
+  const titleIcon = token ? faPencil : faWaveform;
+  const back = {
+    label: "Back to Voice Designer",
+    to: token ? "/voice-designer/datasets" : "/voice-designer/voices"
+  };
+  // const steps = ["A","B"];
+
+  useEffect(() => {
+    if (token && datasets && datasets.length && !ready) {
+      const { creator_set_visibility, ietf_language_tag, title: resTitle } = datasetByToken(token);
+      console.log("☔️",ietf_language_tag);
+      readySet(true);
+      titleSet(resTitle);
+      languageSet({ value: ietf_language_tag, label: "asss" });
+      visibilitySet(creator_set_visibility);
+    }
+  },[datasetByToken,datasets,ready,token]);
+
+  const inputCtrl = (todo: any) => ({ target }: { target: any}) => todo(target.value);
+
+  const selectChange = ({ value }: any) => { // react-select doesn't format events like events, doesn't pass name prop, ew
+    console.log("🍕",value);
+    // languageSet(value);
+  }
+
+  const options = [
+    { value: "en", label: "English" },
+    { value: "es", label: "Spanish" },
+    { value: "fr", label: "French" },
+  ];
+
+  const [abc,abcSet] = useState("123");
+
+      console.log("🚜", visibility, language, title);
+  return <Container type="panel">
+  	<PageHeader {...{ back, subText, title: pageTitle, titleIcon }} panel={false} />
+      <Panel>
+        <div className="p-3 py-4 p-md-4">
+          <Input {...{ label: "Title", onChange: inputCtrl(titleSet), value: title }}/>
+          <Select {...{  label: "Language", name: "language", onChange: selectChange, options, value: language }}/>
+          <select {...{ name: 'abc', value: abc, onChange: (e:any) => console.log("🌸",e.target.value) }}>
+            <option value="123">123</option>
+            <option value="456">456</option>
+            <option value="789">789</option>
+          </select>
+        </div>
+      </Panel>
+  </Container>;
+};

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

@@ -9,18 +9,17 @@ import { Route, NavLink, Switch, Redirect } from "react-router-dom";
 import ListItems from "./components/NewList";
 import Modal from "components/common/Modal";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+// import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { faMicrophone } from "@fortawesome/pro-solid-svg-icons";
-
 import useVoiceRequests from "./useVoiceRequests";
 
-interface Props {
-  sessionWrapper: SessionWrapper;
-}
+// interface Props {
+//   sessionWrapper: SessionWrapper;
+// }
 
-function VoiceDesignerMainPage({ sessionWrapper }: Props) {
+function VoiceDesignerMainPage() {
 
-  const { datasets, deleteDataSet } = useVoiceRequests({ sessionWrapper });
+  const { datasets, deleteDataSet } = useVoiceRequests();
 
   const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false);
   const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] =
@@ -47,7 +46,7 @@ function VoiceDesignerMainPage({ sessionWrapper }: Props) {
 
   const history = useHistory();
 
-  const navToEdit = (token: string) => { history.push(`/voice-designer/voice/${token}/edit`) }
+  const navToEdit = (token: string) => { history.push(`/voice-designer/dataset/${token}/edit`) }
 
   const rowClick = (todo: any) => ({ target }: { target: any }) => {
     let datasetToken = datasets[target.name.split(",")[0].split(":")[1]].dataset_token;

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

@@ -1,15 +1,12 @@
 import { useEffect, useState } from 'react';
-import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+// import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 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 { useSession } from "hooks";
 
-interface Props {
-  sessionWrapper: SessionWrapper;
-}
-
-export default function useVoiceRequests({ sessionWrapper }: Props) {
-	const { user } = sessionWrapper.sessionStateResponse || {};
+export default function useVoiceRequests() {
   const [datasets, datasetsSet] = useState<Dataset[]>([]);
+  const { user } = useSession();
 
   const deleteDataSet = (voiceToken:  string) => DeleteDataset(voiceToken,{
   	set_delete: true,
@@ -18,6 +15,8 @@ export default function useVoiceRequests({ sessionWrapper }: Props) {
   	console.log("🏧",res);
   });
 
+  const datasetByToken = (datasetToken?: string) => datasets.filter(({ dataset_token },i) => datasetToken === dataset_token)[0];
+
 	useEffect(() => {
 
 		if (!datasets.length && user && user.username) {
@@ -28,5 +27,5 @@ export default function useVoiceRequests({ sessionWrapper }: Props) {
 
 	},[user, datasets]);
 
-  return { datasets, deleteDataSet };
+  return { datasetByToken, datasets, deleteDataSet };
 };