From 61543da73f045501d913c61bf634b586e012800a Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Mon, 3 Jan 2022 06:12:14 -0500
Subject: [PATCH] Extract shared breadcrumbs component

---
 .../v2/view/_common/CategoryBreadcrumb.tsx    | 92 +++++++++++++++++++
 .../tts/tts_model_view/TtsModelViewFc.tsx     | 80 +---------------
 2 files changed, 96 insertions(+), 76 deletions(-)
 create mode 100644 fakeyou/src/v2/view/_common/CategoryBreadcrumb.tsx

diff --git a/fakeyou/src/v2/view/_common/CategoryBreadcrumb.tsx b/fakeyou/src/v2/view/_common/CategoryBreadcrumb.tsx
new file mode 100644
index 0000000000..e51ba5e7e7
--- /dev/null
+++ b/fakeyou/src/v2/view/_common/CategoryBreadcrumb.tsx
@@ -0,0 +1,92 @@
+import { faChevronRight, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { TtsCategory } from '../../api/category/ListTtsCategories';
+
+export interface Props {
+  // This is a list of categories in order: [grandparent/root, parent, child/leaf]
+  categoryHierarchy: TtsCategory[]
+  isCategoryMod: boolean,
+}
+
+export function CategoryBreadcrumb(props: Props) {
+
+  if (props.categoryHierarchy.length === 0) {
+    return null;
+  }
+
+  let parentCount = 0;
+  let hierarchyWarning = null;
+
+  let breadcrumbs = props.categoryHierarchy
+      .map((category, index) => {
+        let deletedWarning = null;
+        let notApprovedWarning = null;
+        let modelsNotAllowedWarning = null;
+
+        if (!!category.maybe_super_category_token) {
+          parentCount++;
+        }
+
+        if (!!category.category_deleted_at) {
+            deletedWarning = (
+            <>
+                <span className="tag is-rounded is-warning is-medium is-light">
+                Deleted category
+                &nbsp;
+                <FontAwesomeIcon icon={faExclamationCircle} />
+                </span>
+            </>
+            )
+        }
+
+        if (!category.is_mod_approved) {
+            notApprovedWarning = (
+            <>
+                <span className="tag is-rounded is-warning is-medium is-light">
+                Not Mod Approved
+                &nbsp;
+                <FontAwesomeIcon icon={faExclamationCircle} />
+                </span>
+            </>
+            )
+        }
+
+        const isLeaf = index === props.categoryHierarchy.length - 1;
+
+        if (isLeaf && !category.can_directly_have_models) {
+          modelsNotAllowedWarning = (
+            <>
+              <span className="tag is-rounded is-warning is-medium is-light">
+              Models not directly allowed
+              &nbsp;
+              <FontAwesomeIcon icon={faExclamationCircle} />
+              </span>
+            </>
+          )
+        }
+
+        return (
+          <> {category.name} {deletedWarning} {modelsNotAllowedWarning} {notApprovedWarning}</>
+        )
+    })
+    .reduce((acc, cur) => <>{acc} <FontAwesomeIcon icon={faChevronRight}/> {cur}</>)
+
+  if (props.isCategoryMod && parentCount !== props.categoryHierarchy.length - 1) {
+    hierarchyWarning = (
+      <>
+        <span className="tag is-rounded is-warning is-medium is-light">
+          Bad parent category in chain
+          &nbsp;
+          <FontAwesomeIcon icon={faExclamationCircle} />
+        </span>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {hierarchyWarning} {breadcrumbs}
+    </>
+  )
+}
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 2ffb46fd2c..4e071ef2d1 100644
--- a/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx
+++ b/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx
@@ -14,9 +14,8 @@ import { GravatarFc } from '../../_common/GravatarFc';
 import { GetTtsModelUseCount } from '../../../api/tts/GetTtsModelUseCount';
 import { BackLink } from '../../_common/BackLink';
 import { ListTtsCategoriesForModel, ListTtsCategoriesForModelIsError, ListTtsCategoriesForModelIsOk, TtsModelCategory } from '../../../api/category/ListTtsCategoriesForModel';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronRight, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { ListTtsCategories, ListTtsCategoriesIsError, ListTtsCategoriesIsOk, TtsCategory } from '../../../api/category/ListTtsCategories';
+import { CategoryBreadcrumb } from '../../_common/CategoryBreadcrumb';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -293,7 +292,6 @@ function TtsModelViewFc(props: Props) {
   if (showCategorySection) {
     let modelCategories = null;
 
-    // TODO: Should be a shared component
     if (assignedCategories.length !== 0) {
       modelCategories = (
         <>
@@ -305,81 +303,11 @@ function TtsModelViewFc(props: Props) {
                   assignedCategoriesByTokenMap,
                   category.category_token);
 
-              let breadcrumbs = <></>;
-              let parentCount = 0;
-              let hierarchyWarning = null;
-
-              if (categoryHierarchy.length !== 0) {
-                breadcrumbs = categoryHierarchy
-                    .map((category, index) => {
-                      let deletedWarning = null;
-                      let notApprovedWarning = null;
-                      let modelsNotAllowedWarning = null;
-
-                      if (!!category.maybe_super_category_token) {
-                        parentCount++;
-                      }
-
-                      if (!!category.category_deleted_at) {
-                        deletedWarning = (
-                          <>
-                            <span className="tag is-rounded is-warning is-medium is-light">
-                              Deleted category
-                              &nbsp;
-                              <FontAwesomeIcon icon={faExclamationCircle} />
-                            </span>
-                          </>
-                        )
-                      }
-
-                      if (!category.is_mod_approved) {
-                        notApprovedWarning = (
-                          <>
-                            <span className="tag is-rounded is-warning is-medium is-light">
-                              Not Mod Approved
-                              &nbsp;
-                              <FontAwesomeIcon icon={faExclamationCircle} />
-                            </span>
-                          </>
-                        )
-                      }
-
-                      const isLeaf = index === categoryHierarchy.length - 1;
-
-                      if (isLeaf && !category.can_directly_have_models) {
-                        modelsNotAllowedWarning = (
-                          <>
-                            <span className="tag is-rounded is-warning is-medium is-light">
-                              Models not directly allowed
-                              &nbsp;
-                              <FontAwesomeIcon icon={faExclamationCircle} />
-                            </span>
-                          </>
-                        )
-                      }
-
-                      return (
-                        <> {category.name} {deletedWarning} {modelsNotAllowedWarning} {notApprovedWarning}</>
-                      )
-                    })
-                    .reduce((acc, cur) => <>{acc} <FontAwesomeIcon icon={faChevronRight}/> {cur}</>)
-              }
-
-              if (isCategoryModerator && parentCount !== categoryHierarchy.length - 1) {
-                hierarchyWarning = (
-                  <>
-                    <span className="tag is-rounded is-warning is-medium is-light">
-                      Bad parent category in chain
-                      &nbsp;
-                      <FontAwesomeIcon icon={faExclamationCircle} />
-                    </span>
-                  </>
-                )
-              }
-
               return (
                 <>
-                  <li>{hierarchyWarning} {breadcrumbs}</li>
+                  <li>
+                    <CategoryBreadcrumb categoryHierarchy={categoryHierarchy} isCategoryMod={isCategoryModerator} />
+                  </li>
                 </>
               );
             })}