From e4e3ac2d2e8b5edf584a36494ca952c00fa5b5cb Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Fri, 7 Jan 2022 17:09:06 -0500
Subject: [PATCH] optimize model / category UI for power use

---
 fakeyou/src/common/FrontendUrlConfig.ts       |  4 ++
 .../view/contribute/ContributeIndexPage.tsx   |  3 +-
 .../ModerationTtsCategoryListPage.tsx         |  7 +++
 .../TtsEditCategoriesPage.tsx                 |  4 ++
 .../tts/tts_model_view/TtsModelViewFc.tsx     | 51 ++++++++++---------
 5 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/fakeyou/src/common/FrontendUrlConfig.ts b/fakeyou/src/common/FrontendUrlConfig.ts
index a164a1a19c..3f1ab5c7f7 100644
--- a/fakeyou/src/common/FrontendUrlConfig.ts
+++ b/fakeyou/src/common/FrontendUrlConfig.ts
@@ -89,6 +89,10 @@ class FrontendUrlConfig {
   static contributePage() : string {
     return '/contribute';
   }
+
+  static createCategoryPage(): string {
+    return '/category/create';
+  }
   
   // Moderation links
 
diff --git a/fakeyou/src/v2/view/contribute/ContributeIndexPage.tsx b/fakeyou/src/v2/view/contribute/ContributeIndexPage.tsx
index 79f0ba9143..10c6041b24 100644
--- a/fakeyou/src/v2/view/contribute/ContributeIndexPage.tsx
+++ b/fakeyou/src/v2/view/contribute/ContributeIndexPage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { SessionWrapper } from '../../../session/SessionWrapper';
 import { Link } from "react-router-dom";
 import { DiscordLink } from '../_common/DiscordLink';
+import { FrontendUrlConfig } from '../../../common/FrontendUrlConfig';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -54,7 +55,7 @@ function ContributeIndexPage(props: Props) {
         <p>Help us organize the models!</p>
 
         <Link
-          to="/category/create"
+          to={FrontendUrlConfig.createCategoryPage()}
           className="button is-info is-large is-fullwidth"
           >{categoryActionName} category</Link>
 
diff --git a/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryListPage.tsx b/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryListPage.tsx
index 57d794ebf1..978c42fffd 100644
--- a/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryListPage.tsx
+++ b/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryListPage.tsx
@@ -267,6 +267,13 @@ function ModerationTtsCategoryListPage(props: Props) {
       </p>
 
       <br />
+      
+      <Link
+        to={FrontendUrlConfig.createCategoryPage()}
+        className="button is-info is-large is-fullwidth"
+        >Create new category</Link>
+
+      <br />
 
       <BackLink link={FrontendUrlConfig.moderationMain()} text="Back to moderation" />
     </div>
diff --git a/fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx b/fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx
index f29521fa41..e3a9eafb34 100644
--- a/fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx
+++ b/fakeyou/src/v2/view/tts/tts_edit_categories/TtsEditCategoriesPage.tsx
@@ -218,6 +218,10 @@ function TtsEditCategoriesPage(props: Props) {
 
       {errorFlash}
 
+      <p>
+        <BackLink link={FrontendUrlConfig.indexPage()} text="Back to main" />
+      </p>
+
       <p>
         <BackLink link={modelLink} text="Back to model" />
       </p>
diff --git a/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx b/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx
index 43d2231924..40e4cd3df9 100644
--- a/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx
+++ b/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx
@@ -362,31 +362,6 @@ function TtsModelViewFc(props: Props) {
         <BackLink link="/" text="Back to all models" />
       </p>
       
-      <h4 className="title is-4"> Use Model </h4>
-
-      <form onSubmit={handleFormSubmit}>
-        <textarea 
-            onChange={handleChangeText}
-            value={props.textBuffer}
-            className="textarea is-large" 
-            placeholder="Textual shenanigans go here..."></textarea>
-
-        <div className="button-group">
-          <div className="columns is-mobile">
-            <div className="column has-text-centered">
-              <button className="button is-info is-large" >Speak</button>
-            </div>
-            <div className="column has-text-centered">
-              <button className="button is-info is-light is-large" onClick={handleClearClick}>Clear</button>
-            </div>
-          </div>
-        </div>
-      </form>
-
-      <br />
-      
-      <SessionTtsInferenceResultListFc ttsInferenceJobs={props.ttsInferenceJobs} />
-    
       {modelDescription}
 
       {modelCategoriesSection}
@@ -443,6 +418,32 @@ function TtsModelViewFc(props: Props) {
       {deleteModelButton}
 
       <br />
+
+      <h4 className="title is-4"> Use Model </h4>
+
+      <form onSubmit={handleFormSubmit}>
+        <textarea 
+            onChange={handleChangeText}
+            value={props.textBuffer}
+            className="textarea is-large" 
+            placeholder="Textual shenanigans go here..."></textarea>
+
+        <div className="button-group">
+          <div className="columns is-mobile">
+            <div className="column has-text-centered">
+              <button className="button is-info is-large" >Speak</button>
+            </div>
+            <div className="column has-text-centered">
+              <button className="button is-info is-light is-large" onClick={handleClearClick}>Clear</button>
+            </div>
+          </div>
+        </div>
+      </form>
+
+      <br />
+      
+      <SessionTtsInferenceResultListFc ttsInferenceJobs={props.ttsInferenceJobs} />
+
       <br />
       <BackLink link="/" text="Back to all models" />
     </div>