list categories for model

fakeyou/src/common/ApiConfig.ts

@@ -250,6 +250,10 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/category/create`;
   }
 
+  listCategoriesForTtsModel(ttsModelToken: string) : string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/category/assignments/tts/${ttsModelToken}`;
+  }
+
   firehoseEvents() : string {
     return `${this.getScheme()}://${this.getNewApiHost()}/events`;
   }

fakeyou/src/v2/api/category/ListCategoriesForTtsModel.ts

@@ -0,0 +1,67 @@
+import { ApiConfig } from "../../../common/ApiConfig";
+
+export interface ListCategoriesForTtsModelSuccessResponse {
+  success: boolean,
+  categories: Array<TtsModelCategory>
+}
+
+export interface TtsModelCategory {
+  category_token: string,
+  model_type: string,
+  maybe_super_category_token?: string,
+
+  can_directly_have_models: boolean,
+  can_have_subcategories: boolean,
+  can_only_mods_apply: boolean,
+
+  name: string,
+  maybe_dropdown_name?: string,
+
+  is_mod_approved?: boolean,
+
+  category_created_at: Date,
+  category_updated_at: Date,
+  category_deleted_at?: Date,
+}
+
+export interface ListCategoriesForTtsModelErrorResponse {
+  success: boolean,
+}
+
+type ListCategoriesForTtsModelResponse = ListCategoriesForTtsModelSuccessResponse | ListCategoriesForTtsModelErrorResponse;
+
+export function ListCategoriesForTtsModelIsOk(response: ListCategoriesForTtsModelResponse): response is ListCategoriesForTtsModelSuccessResponse {
+  return response?.success === true;
+}
+
+export function ListCategoriesForTtsModelIsError(response: ListCategoriesForTtsModelResponse): response is ListCategoriesForTtsModelErrorResponse {
+  return response?.success === false;
+}
+
+export async function ListCategoriesForTtsModel(ttsModelToken: string) : Promise<ListCategoriesForTtsModelResponse> 
+{
+  const endpoint = new ApiConfig().listCategoriesForTtsModel(ttsModelToken);
+  
+  return await fetch(endpoint, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+    credentials: 'include',
+  })
+  .then(res => res.json())
+  .then(res => {
+    if (!res) {
+      return { success : false }; // TODO: This loses error semantics and is deprecated
+    }
+
+    if (res && 'success' in res) {
+      return res;
+    } else {
+      return { success : false };
+    }
+  })
+  .catch(e => {
+    return { success : false };
+  });
+}

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

@@ -4,6 +4,7 @@ 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';
+import { ListCategoriesForTtsModel, ListCategoriesForTtsModelIsError, ListCategoriesForTtsModelIsOk, TtsModelCategory } from '../../../api/category/ListCategoriesForTtsModel';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -17,6 +18,8 @@ function TtsEditCategoriesPage(props: Props) {
   const [ttsModel, setTtsModel] = useState<TtsModel|undefined>(undefined);
   const [notFoundState, setNotFoundState] = useState<boolean>(false);
 
+  const [assignedCategories, setAssignedCategories] = useState<TtsModelCategory[]>([]);
+
   const getModel = useCallback(async (token) => {
     const model = await GetTtsModel(token);
 
@@ -31,8 +34,19 @@ function TtsEditCategoriesPage(props: Props) {
     }
   }, []);
 
+  const listCategoriesForModel = useCallback(async (token) => {
+    const categoryList = await ListCategoriesForTtsModel(token);
+
+    if (ListCategoriesForTtsModelIsOk(categoryList)) {
+      setAssignedCategories(categoryList.categories);
+    } else if (ListCategoriesForTtsModelIsError(categoryList))  {
+      // TODO: Improve
+    }
+  }, []);
+
   useEffect(() => {
     getModel(token);
+    listCategoriesForModel(token);
   }, [token, getModel]);
 
 
@@ -48,17 +62,44 @@ function TtsEditCategoriesPage(props: Props) {
 
   const modelLink = FrontendUrlConfig.ttsModelPage(token);
 
+  let currentCategoriesList = (
+    <>
+      <p>No categories yet...</p>
+    </>
+  );
+
+  if (assignedCategories.length !== 0) {
+    currentCategoriesList = (
+      <>
+        {assignedCategories.map(category => {
+          return (
+            <li>
+              {category.name} [<a href="#">edit category</a>] [<a href="#">remove</a>]
+            </li>
+          );
+        })}
+      </>
+    );
+  }
+
   return (
     <div className="content">
-      <h1 className="title is-1"> Edit TTS Categories </h1>
+      <h1 className="title is-1">Edit TTS Categories</h1>
+      <h4 className="subtitle is-4"> Model: {ttsModel.title} </h4>
 
       <p>
         <BackLink link={modelLink} text="Back to model" />
       </p>
 
+      <h3 className="is-3"> Current categories </h3>
+      <ul>{currentCategoriesList}</ul>
+
+      <h3 className="is-3"> Add new category </h3>
+
       <p>
-        Model: {ttsModel.title}
+        <BackLink link={modelLink} text="Back to model" />
       </p>
+
     </div>
   )
 }