updates to support hidden tts models for banned users

vocodes/src/v2/api/tts/GetTtsModel.ts

@@ -1,10 +1,5 @@
 import { ApiConfig } from "../../../common/ApiConfig";
 
-interface TtsModelViewResponsePayload {
-  success: boolean,
-  model: TtsModel,
-}
-
 export interface TtsModel {
   model_token: string,
   title: string,
@@ -25,13 +20,36 @@ export interface TtsModel {
 }
 
 export interface TtsModelModeratorFields {
+  creator_is_banned: boolean,
   creator_ip_address_creation: string,
   creator_ip_address_last_update: string,
   mod_deleted_at: string | undefined | null,
   user_deleted_at: string | undefined | null,
 }
 
-export async function GetTtsModel(modelToken: string) : Promise<TtsModel | undefined> {
+export enum TtsModelLookupError {
+  NotFound,
+  ServerError,
+  FrontendError,
+}
+
+export type GetTtsModelResponse = TtsModel | TtsModelLookupError;
+
+export function GetTtsModelIsOk(response: GetTtsModelResponse): response is TtsModel {
+  return response.hasOwnProperty('model_token');
+}
+
+export function GetTtsModelIsErr(response: GetTtsModelResponse): response is TtsModelLookupError {
+  return !response.hasOwnProperty('model_token');
+}
+
+interface TtsModelViewResponsePayload {
+  success: boolean,
+  error_reason?: string,
+  model?: TtsModel,
+}
+
+export async function GetTtsModel(modelToken: string) : Promise<GetTtsModelResponse> {
   const endpoint = new ApiConfig().viewTtsModel(modelToken);
   
   return await fetch(endpoint, {
@@ -44,12 +62,22 @@ export async function GetTtsModel(modelToken: string) : Promise<TtsModel | undef
   .then(res => res.json())
   .then(res => {
     const response : TtsModelViewResponsePayload = res;
-    if (!response.success) {
-      return;
+
+    if (response?.success) {
+      return response.model!;
+    } 
+
+    if (response?.success === false) {
+      if (response.error_reason?.includes("not found")) {
+        return TtsModelLookupError.NotFound;
+      } else {
+        return TtsModelLookupError.ServerError;
+      }
     }
-    return response?.model;
+
+    return TtsModelLookupError.FrontendError;
   })
   .catch(e => {
-    return undefined;
+    return TtsModelLookupError.FrontendError;
   });
 }

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

@@ -9,7 +9,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';
 import { HiddenIconFc } from '../../_icons/HiddenIcon';
 import { VisibleIconFc } from '../../_icons/VisibleIcon';
-import { GetTtsModel, TtsModel } from '../../../api/tts/GetTtsModel';
+import { GetTtsModel, GetTtsModelIsErr, GetTtsModelIsOk, TtsModel, TtsModelLookupError } from '../../../api/tts/GetTtsModel';
 import { GravatarFc } from '../../_common/GravatarFc';
 import { GetTtsModelUseCount } from '../../../api/tts/GetTtsModelUseCount';
 import { BackLink } from '../../_common/BackLink';
@@ -28,11 +28,19 @@ function TtsModelViewFc(props: Props) {
 
   const [ttsModel, setTtsModel] = useState<TtsModel|undefined>(undefined);
   const [ttsModelUseCount, setTtsModelUseCount] = useState<number|undefined>(undefined);
+  const [notFoundState, setNotFoundState] = useState<boolean>(false);
 
   const getModel = useCallback(async (token) => {
     const model = await GetTtsModel(token);
-    if (model) {
+
+    if (GetTtsModelIsOk(model)) {
       setTtsModel(model);
+    } else if (GetTtsModelIsErr(model))  {
+      switch(model) {
+        case TtsModelLookupError.NotFound:
+          setNotFoundState(true);
+          break;
+      }
     }
   }, []);
 
@@ -46,6 +54,17 @@ function TtsModelViewFc(props: Props) {
     getModelUseCount(token);
   }, [token, getModel, getModelUseCount]);
 
+
+  if (notFoundState) {
+    return (
+      <h1 className="title is-1">Model not found</h1>
+    );
+  }
+
+  if (!ttsModel) {
+    return <div />
+  }
+
   const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => { 
     const textValue = (ev.target as HTMLTextAreaElement).value;
     props.setTextBuffer(textValue);
@@ -142,6 +161,10 @@ function TtsModelViewFc(props: Props) {
             <h4 className="subtitle is-4"> Moderator Details </h4>
           </td>
         </tr>
+        <tr>
+          <th>Creator is banned</th>
+          <td>{ttsModel?.maybe_moderator_fields?.creator_is_banned ? "banned" : "good standing" }</td>
+        </tr>
         <tr>
           <th>Creation IP address</th>
           <td>{ttsModel?.maybe_moderator_fields?.creator_ip_address_creation || "server error"}</td>