diff --git a/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryEditPage.tsx b/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryEditPage.tsx index f725f399a0..f9f90b61b8 100644 --- a/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryEditPage.tsx +++ b/fakeyou/src/v2/view/moderation/categories/ModerationTtsCategoryEditPage.tsx @@ -7,6 +7,8 @@ import { SessionWrapper } from '../../../../session/SessionWrapper'; import { useParams } from 'react-router-dom'; import { EditCategory, EditCategoryIsError, EditCategoryIsSuccess, EditCategoryRequest } from '../../../api/moderation/category/EditCategory'; import { ListTtsCategories, ListTtsCategoriesIsError, ListTtsCategoriesIsOk, TtsCategory } from '../../../api/category/ListTtsCategories'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faChevronRight } from '@fortawesome/free-solid-svg-icons'; interface Props { sessionWrapper: SessionWrapper, @@ -31,7 +33,6 @@ function ModerationTtsCategoryEditPage(props: Props) { // Additional object lookups to support parent categories const [allTtsCategories, setAllTtsCategories] = useState([]); - //const [maybeSuperCategory, setMaybeSuperCategory] = useState(undefined); const [errorMessage, setErrorMessage] = useState(undefined); @@ -54,17 +55,6 @@ function ModerationTtsCategoryEditPage(props: Props) { } }, []); - //const getSuperCategory = useCallback(async (parentCategoryToken: string) => { - // const categoryList = await GetCategory(parentCategoryToken); - - // if (GetCategoryIsOk(categoryList)) { - // const category = categoryList.category; - // setMaybeSuperCategory(category); - // } else if (GetCategoryIsError(categoryList)) { - // setErrorMessage("error fetching parent category"); - // } - //}, []); - const listTtsCategories = useCallback(async () => { const categoryList = await ListTtsCategories(); @@ -207,12 +197,25 @@ function ModerationTtsCategoryEditPage(props: Props) { ); } + const categoryHierarchy = recursiveBuildHierarchy(allTtsCategories, token); + + const breadcrumbs = categoryHierarchy + .map(category => <> + {category.name} + ) + .reduce((acc, cur) => <>{acc} {cur}) + return (

Moderate TTS Category

+
+
+ + {breadcrumbs}
{errorFlash} @@ -328,4 +331,15 @@ function ModerationTtsCategoryEditPage(props: Props) { ) } +function recursiveBuildHierarchy(allCategories: TtsCategory[], currentToken: string): TtsCategory[] { + let found = allCategories.find(category => category.category_token === currentToken); + if (found === undefined) { + return []; + } + if (found.maybe_super_category_token === undefined) { + return [found]; + } + return [...recursiveBuildHierarchy(allCategories, found.maybe_super_category_token), found]; +} + export { ModerationTtsCategoryEditPage };