(PC-31042) feat: use new categoryTree in categoriesModal

pass-culture · Sep 16, 2024 · f93485e · f93485e
1 parent 866bb7e
commit f93485e
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 40 deletions.
diff --git a/src/features/search/components/CategoriesSection/CategoriesSection.tsx b/src/features/search/components/CategoriesSection/CategoriesSection.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components/native'
 
 import { SearchGroupNameEnumv2 } from 'api/gen'
 import { CategoriesSectionItem } from 'features/search/components/CategoriesSectionItem/CategoriesSectionItem'
+import { CategoryTree } from 'features/search/helpers/categoriesHelpers/categoryTree'
 import {
   MappedGenreTypes,
   MappedNativeCategories,
@@ -14,7 +15,11 @@ import { RadioButton } from 'ui/components/radioButtons/RadioButton'
 import { VerticalUl } from 'ui/components/Ul'
 import { AccessibleBicolorIcon } from 'ui/svg/icons/types'
 
-export type CategoriesMapping = MappingTree | MappedNativeCategories | MappedGenreTypes
+export type CategoriesMapping =
+  | CategoryTree
+  | MappingTree
+  | MappedNativeCategories
+  | MappedGenreTypes
 
 export interface CategoriesSectionProps<
   T extends CategoriesMapping,
@@ -24,7 +29,7 @@ export interface CategoriesSectionProps<
   allValue: N
   data?: T
   descriptionContext: DescriptionContext
-  getIcon?: T extends MappingTree
+  getIcon?: T extends MappingTree | CategoryTree
     ? (categoryName: SearchGroupNameEnumv2) => FC<AccessibleBicolorIcon> | undefined
     : undefined
   onSelect: (item: N) => void

diff --git a/src/features/search/helpers/categoriesHelpers/categoriesHelpers.test.ts b/src/features/search/helpers/categoriesHelpers/categoriesHelpers.test.ts
@@ -13,10 +13,11 @@ import {
   isOnlyOnline,
   searchGroupOrNativeCategorySortComparator,
 } from 'features/search/helpers/categoriesHelpers/categoriesHelpers'
-import { createMappingTree } from 'features/search/helpers/categoriesHelpers/mapping-tree'
+import { createCategoryTree } from 'features/search/helpers/categoriesHelpers/categoryTree'
 import { BooksNativeCategoriesEnum, SearchState } from 'features/search/types'
 import { FACETS_FILTERS_ENUM } from 'libs/algolia/enums/facetsEnums'
 import {
+  categoriesDataTest,
   searchGroupsDataTest,
   subcategoriesDataTest,
 } from 'libs/subcategories/fixtures/subcategoriesResponse'
@@ -25,9 +26,7 @@ let mockSearchState: SearchState = {
   ...initialSearchState,
 }
 
-const mockedFacets = undefined
-
-const tree = createMappingTree(subcategoriesDataTest, mockedFacets)
+const categoryTree = createCategoryTree(categoriesDataTest)
 
 jest.mock('libs/firebase/analytics/analytics')
 jest.mock('libs/firebase/remoteConfig/remoteConfig.services')
@@ -296,7 +295,9 @@ describe('categoriesHelpers', () => {
           offerCategories: [],
         }
 
-        expect(getDefaultFormView(tree, mockSearchState)).toEqual(CategoriesModalView.CATEGORIES)
+        expect(getDefaultFormView(categoryTree, mockSearchState)).toEqual(
+          CategoriesModalView.CATEGORIES
+        )
       })
 
       it('when category selected is "Cartes jeunes" because it does not native categories', () => {
@@ -305,7 +306,9 @@ describe('categoriesHelpers', () => {
           offerCategories: [SearchGroupNameEnumv2.CARTES_JEUNES],
         }
 
-        expect(getDefaultFormView(tree, mockSearchState)).toEqual(CategoriesModalView.CATEGORIES)
+        expect(getDefaultFormView(categoryTree, mockSearchState)).toEqual(
+          CategoriesModalView.CATEGORIES
+        )
       })
     })
 
@@ -317,7 +320,7 @@ describe('categoriesHelpers', () => {
           offerNativeCategories: [],
         }
 
-        expect(getDefaultFormView(tree, mockSearchState)).toEqual(
+        expect(getDefaultFormView(categoryTree, mockSearchState)).toEqual(
           CategoriesModalView.NATIVE_CATEGORIES
         )
       })
@@ -329,7 +332,7 @@ describe('categoriesHelpers', () => {
           offerNativeCategories: [NativeCategoryIdEnumv2.LIVRES_AUDIO_PHYSIQUES],
         }
 
-        expect(getDefaultFormView(tree, mockSearchState)).toEqual(
+        expect(getDefaultFormView(categoryTree, mockSearchState)).toEqual(
           CategoriesModalView.NATIVE_CATEGORIES
         )
       })
@@ -343,7 +346,9 @@ describe('categoriesHelpers', () => {
           offerNativeCategories: [NativeCategoryIdEnumv2.SPECTACLES_REPRESENTATIONS],
         }
 
-        expect(getDefaultFormView(tree, mockSearchState)).toEqual(CategoriesModalView.GENRES)
+        expect(getDefaultFormView(categoryTree, mockSearchState)).toEqual(
+          CategoriesModalView.GENRES
+        )
       })
 
       it('when a category, a native category, a genre type categories selected', () => {
@@ -356,7 +361,9 @@ describe('categoriesHelpers', () => {
           ],
         }
 
-        expect(getDefaultFormView(tree, mockSearchState)).toEqual(CategoriesModalView.GENRES)
+        expect(getDefaultFormView(categoryTree, mockSearchState)).toEqual(
+          CategoriesModalView.GENRES
+        )
       })
     })
   })

diff --git a/src/features/search/helpers/categoriesHelpers/categoriesHelpers.ts b/src/features/search/helpers/categoriesHelpers/categoriesHelpers.ts
@@ -9,12 +9,13 @@ import {
   SearchGroupResponseModelv2,
   SubcategoriesResponseModelv2,
 } from 'api/gen'
-import { useSearchResults } from 'features/search/api/useSearchResults/useSearchResults'
 import { CATEGORY_CRITERIA, CategoriesModalView } from 'features/search/enums'
+import {
+  CategoryTree,
+  createCategoryTree,
+} from 'features/search/helpers/categoriesHelpers/categoryTree'
 import {
   MappedNativeCategories,
-  MappingTree,
-  createMappingTree,
   getBooksGenreTypes,
   getBooksNativeCategories,
   getKeyFromStringLabel,
@@ -27,7 +28,7 @@ import {
   SearchState,
 } from 'features/search/types'
 import { FACETS_FILTERS_ENUM } from 'libs/algolia/enums/facetsEnums'
-import { useSubcategories } from 'libs/subcategories/useSubcategories'
+import { useCategories } from 'libs/subcategories/useCategories'
 
 type Item = SearchGroupNameEnumv2 | NativeCategoryIdEnumv2 | string | null
 
@@ -342,15 +343,13 @@ export function getNativeCategories(
 }
 
 export const useNativeCategories = (searchGroup?: SearchGroupNameEnumv2) => {
-  const { data: subcategories } = useSubcategories()
-  const { facets } = useSearchResults()
-
-  const tree = createMappingTree(subcategories, facets)
+  const { data: categoryTree } = useCategories()
+  const tree = createCategoryTree(categoryTree)
 
   const mappedNativeCategories =
     searchGroup &&
     searchGroup !== SearchGroupNameEnumv2.NONE &&
-    (tree[searchGroup].children as MappedNativeCategories)
+    (tree[searchGroup]?.children as MappedNativeCategories)
 
   const nativeCategories = mappedNativeCategories ? Object.entries(mappedNativeCategories) : []
 
@@ -499,7 +498,7 @@ export function getDescription(
   return undefined
 }
 
-export function getDefaultFormView(tree: MappingTree, searchState: SearchState) {
+export function getDefaultFormView(tree: CategoryTree, searchState: SearchState) {
   const { offerGenreTypes, offerCategories, offerNativeCategories } = searchState
 
   if (!offerCategories?.[0]) return CategoriesModalView.CATEGORIES
@@ -516,7 +515,7 @@ export function getDefaultFormView(tree: MappingTree, searchState: SearchState)
 }
 
 export function getDefaultFormValues(
-  tree: MappingTree | undefined,
+  tree: CategoryTree | undefined,
   searchState: SearchState
 ): CategoriesModalFormProps {
   if (!tree)

diff --git a/src/features/search/pages/modals/CategoriesModal/CategoriesModal.tsx b/src/features/search/pages/modals/CategoriesModal/CategoriesModal.tsx
@@ -16,13 +16,14 @@ import {
   getIcon,
   handleCategoriesSearchPress,
 } from 'features/search/helpers/categoriesHelpers/categoriesHelpers'
+import { createCategoryTree } from 'features/search/helpers/categoriesHelpers/categoryTree'
 import {
-  createMappingTree,
   MappedGenreTypes,
   MappedNativeCategories,
 } from 'features/search/helpers/categoriesHelpers/mapping-tree'
 import { NativeCategoryEnum, SearchState } from 'features/search/types'
 import { FacetData } from 'libs/algolia/types'
+import { useCategories } from 'libs/subcategories/useCategories'
 import { useSubcategories } from 'libs/subcategories/useSubcategories'
 import { Form } from 'ui/components/Form'
 import { AppModal } from 'ui/components/modals/AppModal'
@@ -54,15 +55,15 @@ export const CategoriesModal = ({
   isVisible = false,
   hideModal,
   onClose,
-  facets,
 }: CategoriesModalProps) => {
-  const { data } = useSubcategories()
+  const { data: categoryList } = useCategories()
+  const { data: subcategoriesData } = useSubcategories()
   const { modal } = useTheme()
   const { dispatch, searchState } = useSearch()
 
   const tree = useMemo(() => {
-    return createMappingTree(data, facets)
-  }, [data, facets])
+    return createCategoryTree(categoryList)
+  }, [categoryList])
 
   const {
     formState: { isSubmitting },
@@ -80,9 +81,8 @@ export const CategoriesModal = ({
   }, [reset, searchState, tree])
 
   const nativeCategories = useMemo(() => {
-    return (category &&
-      category !== SearchGroupNameEnumv2.NONE &&
-      tree[category].children) as MappedNativeCategories
+    return ((category && category !== SearchGroupNameEnumv2.NONE && tree[category]?.children) ||
+      {}) as MappedNativeCategories
   }, [category, tree])
 
   const genreTypes = useMemo(() => {
@@ -115,8 +115,7 @@ export const CategoriesModal = ({
         setValue('genreType', null)
       }
 
-      // @ts-expect-error: because of noUncheckedIndexedAccess
-      if (nativeCategoryKey && nativeCategories[nativeCategoryKey].children) {
+      if (nativeCategoryKey && nativeCategories[nativeCategoryKey]?.children) {
         setValue('currentView', CategoriesModalView.GENRES)
       }
     },
@@ -160,11 +159,11 @@ export const CategoriesModal = ({
 
   const handleSearchPress = useCallback(
     (form: CategoriesModalFormProps) => {
-      if (!data) {
+      if (!subcategoriesData) {
         return
       }
 
-      const searchPressData = handleCategoriesSearchPress(form, data)
+      const searchPressData = handleCategoriesSearchPress(form, subcategoriesData)
 
       let additionalSearchState: SearchState = { ...searchState, ...searchPressData?.payload }
       additionalSearchState = {
@@ -175,7 +174,7 @@ export const CategoriesModal = ({
       dispatch({ type: 'SET_STATE', payload: additionalSearchState })
       hideModal()
     },
-    [data, dispatch, hideModal, searchState]
+    [subcategoriesData, dispatch, hideModal, searchState]
   )
 
   const handleReset = useCallback(() => {
@@ -197,8 +196,8 @@ export const CategoriesModal = ({
   )
 
   const modalTitle = useMemo(() => {
-    return getCategoriesModalTitle(data, currentView, category, nativeCategory)
-  }, [category, currentView, data, nativeCategory])
+    return getCategoriesModalTitle(subcategoriesData, currentView, category, nativeCategory)
+  }, [category, currentView, subcategoriesData, nativeCategory])
 
   const shouldDisplayBackButton = useMemo(
     () =>

diff --git a/src/libs/subcategories/fixtures/subcategoriesResponse.ts b/src/libs/subcategories/fixtures/subcategoriesResponse.ts
@@ -1,6 +1,7 @@
-import { SubcategoriesResponseModelv2 } from 'api/gen'
-import { PLACEHOLDER_DATA } from 'libs/subcategories/placeholderData'
+import { CategoriesResponseModel, SubcategoriesResponseModelv2 } from 'api/gen'
+import { CATEGORY_TREE_PLACE_HOLDER, PLACEHOLDER_DATA } from 'libs/subcategories/placeholderData'
 
 export const subcategoriesDataTest: SubcategoriesResponseModelv2 = PLACEHOLDER_DATA
+export const categoriesDataTest: CategoriesResponseModel = CATEGORY_TREE_PLACE_HOLDER
 
 export const searchGroupsDataTest = PLACEHOLDER_DATA.searchGroups