initial edit categories page

fakeyou/src/common/FrontendUrlConfig.ts

@@ -16,6 +16,10 @@ class FrontendUrlConfig {
     return `/tts/${modelToken}/edit`;
   }
 
+  static ttsModelEditCategoriesPage(modelToken: string) : string {
+    return `/tts/${modelToken}/categories`;
+  }
+
   static ttsModelDeletePage(modelToken: string) : string {
     return `/tts/${modelToken}/delete`;
   }

fakeyou/src/v2/view/NewVocodesContainer.tsx

@@ -43,6 +43,7 @@ import { ModerationJobStatsFc } from './moderation/moderation_job_stats/Moderati
 import { ModerationPendingW2lTemplatesFc } from './moderation/moderation_pending_w2l_templates/ModerationPendingW2lTemplatesFc';
 import { ModerationVoiceStatsFc } from './moderation/moderation_voice_stats/ModerationVoiceStatsFc';
 import { CreateCategoryPage } from './category/CreateCategoryPage';
+import { TtsEditCategoriesPage } from './tts/tts_edit_categories/TtsEditCategoriesPage';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -173,6 +174,12 @@ class NewVocodesContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/tts/:token/categories">
+              <TtsEditCategoriesPage
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
             <Route path="/tts/:token">
               <TtsModelViewFc
                 sessionWrapper={this.props.sessionWrapper}

fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { SessionWrapper } from '../../../../session/SessionWrapper';
+import { useParams, useHistory } from 'react-router-dom';
+import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';
+import { BackLink } from '../../_common/BackLink';
+import { GetTtsModel, GetTtsModelIsErr, GetTtsModelIsOk, TtsModel, TtsModelLookupError } from '../../../api/tts/GetTtsModel';
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+}
+
+function TtsEditCategoriesPage(props: Props) {
+  let { token } = useParams() as { token : string };
+
+  const history = useHistory();
+
+  const [ttsModel, setTtsModel] = useState<TtsModel|undefined>(undefined);
+  const [notFoundState, setNotFoundState] = useState<boolean>(false);
+
+  const getModel = useCallback(async (token) => {
+    const model = await GetTtsModel(token);
+
+    if (GetTtsModelIsOk(model)) {
+      setTtsModel(model);
+    } else if (GetTtsModelIsErr(model))  {
+      switch(model) {
+        case TtsModelLookupError.NotFound:
+          setNotFoundState(true);
+          break;
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    getModel(token);
+  }, [token, getModel]);
+
+
+  if (notFoundState) {
+    return (
+      <h1 className="title is-1">Model not found</h1>
+    );
+  }
+
+  if (!ttsModel) {
+    return <div />
+  }
+
+  const modelLink = FrontendUrlConfig.ttsModelPage(token);
+
+  return (
+    <div className="content">
+      <h1 className="title is-1"> Edit TTS Categories </h1>
+
+      <p>
+        <BackLink link={modelLink} text="Back to model" />
+      </p>
+
+      <p>
+        Model: {ttsModel.title}
+      </p>
+    </div>
+  )
+}
+
+export { TtsEditCategoriesPage };

fakeyou/src/v2/view/tts/tts_model_edit/TtsModelEditFc.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useCallback } from 'react';
-//import axios from 'axios';
 import { ApiConfig } from '../../../../common/ApiConfig';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { TtsInferenceJob } from '../../../../App';

fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx

@@ -54,7 +54,6 @@ function TtsModelViewFc(props: Props) {
     getModelUseCount(token);
   }, [token, getModel, getModelUseCount]);
 
-
   if (notFoundState) {
     return (
       <h1 className="title is-1">Model not found</h1>
@@ -186,6 +185,7 @@ function TtsModelViewFc(props: Props) {
   }
 
   let editModelButton = <span />;
+  let editModelCategoriesButton = <span />;
 
   if (props.sessionWrapper.canEditTtsModelByUserToken(ttsModel?.creator_user_token)) {
     editModelButton = (
@@ -197,6 +197,15 @@ function TtsModelViewFc(props: Props) {
           >Edit Model Details</Link>
       </>
     );
+    editModelCategoriesButton = (
+      <>
+        <br />
+        <Link 
+          className={"button is-large is-info is-fullwidth"}
+          to={FrontendUrlConfig.ttsModelEditCategoriesPage(token)}
+          >Edit Model Categories</Link>
+      </>
+    );
   }
 
   let deleteModelButton = <span />;
@@ -335,6 +344,8 @@ function TtsModelViewFc(props: Props) {
 
       {editModelButton}
 
+      {editModelCategoriesButton}
+
       {deleteModelButton}
 
       <br />