From db5f30a960f58a7c8afe7229c896fe2a82470fcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mariojsnunes@gmail.com>
Date: Sun, 7 Jul 2024 10:05:40 +0100
Subject: [PATCH 1/2] chore: refactor categories

---
 src/pages/Howto/Category/CategoriesSelect.tsx | 50 -----------------
 .../Howto/Content/Common/Howto.form.test.tsx  |  3 --
 src/pages/Howto/Content/Common/Howto.form.tsx |  3 +-
 .../Content/Common/HowtoFieldCategory.tsx     | 46 ++++++++++------
 .../Research/Content/Common/Research.form.tsx | 18 +------
 .../Content/Common/ResearchCategorySelect.tsx | 42 +++++++++++++++
 .../Research/Content/ResearchFilterHeader.tsx |  3 +-
 src/pages/Research/Content/ResearchList.tsx   |  3 +-
 .../Research/Content/ResearchSearchParams.ts  |  6 +++
 src/pages/Research/research.routes.test.tsx   | 12 +++--
 src/pages/Research/research.service.ts        |  7 ---
 src/stores/Categories/categories.store.tsx    | 44 ---------------
 .../questionCategories.store.tsx              | 54 -------------------
 .../researchCategories.store.tsx              | 54 -------------------
 src/stores/RootStore.tsx                      |  9 ----
 15 files changed, 94 insertions(+), 260 deletions(-)
 delete mode 100644 src/pages/Howto/Category/CategoriesSelect.tsx
 create mode 100644 src/pages/Research/Content/Common/ResearchCategorySelect.tsx
 create mode 100644 src/pages/Research/Content/ResearchSearchParams.ts
 delete mode 100644 src/stores/Categories/categories.store.tsx
 delete mode 100644 src/stores/QuestionCategories/questionCategories.store.tsx
 delete mode 100644 src/stores/ResearchCategories/researchCategories.store.tsx

diff --git a/src/pages/Howto/Category/CategoriesSelect.tsx b/src/pages/Howto/Category/CategoriesSelect.tsx
deleted file mode 100644
index c007c69b51..0000000000
--- a/src/pages/Howto/Category/CategoriesSelect.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { observer } from 'mobx-react'
-import { Select } from 'oa-components'
-import { useCommonStores } from 'src/common/hooks/useCommonStores'
-
-import { FieldContainer } from '../../../common/Form/FieldContainer'
-
-import type { ICategory } from 'src/models/categories.model'
-
-/**
- * @deprecated in favor of CategoriesSelectV2
- */
-export const CategoriesSelect = observer(
-  ({ value, onChange, placeholder, isForm, type }) => {
-    const { categoriesStore, researchCategoriesStore } =
-      useCommonStores().stores
-
-    let categories: ICategory[] = []
-    if (type === 'howto') {
-      categories = categoriesStore.allCategories
-    } else if (type === 'research') {
-      categories = researchCategoriesStore.allResearchCategories
-    }
-
-    const selectOptions = categories
-      .map((category) => ({
-        value: { ...category },
-        label: category.label,
-      }))
-      .filter((option) => option?.value?.label !== value?.label)
-
-    const handleChange = (changedValue) => {
-      onChange(changedValue?.value ?? null)
-    }
-
-    return (
-      <FieldContainer
-        data-cy={categories ? 'category-select' : 'category-select-empty'}
-      >
-        <Select
-          variant={isForm ? 'form' : undefined}
-          options={selectOptions}
-          placeholder={placeholder}
-          value={value ? value : null}
-          onChange={handleChange}
-          isClearable={true}
-        />
-      </FieldContainer>
-    )
-  },
-)
diff --git a/src/pages/Howto/Content/Common/Howto.form.test.tsx b/src/pages/Howto/Content/Common/Howto.form.test.tsx
index 54fa083c09..dc994434f0 100644
--- a/src/pages/Howto/Content/Common/Howto.form.test.tsx
+++ b/src/pages/Howto/Content/Common/Howto.form.test.tsx
@@ -25,9 +25,6 @@ vi.mock('src/common/hooks/useCommonStores', () => {
   return {
     useCommonStores: () => ({
       stores: {
-        categoriesStore: {
-          allCategories: [],
-        },
         howtoStore: {
           uploadStatus: {
             Start: false,
diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
index ad387b5182..22eea8ab05 100644
--- a/src/pages/Howto/Content/Common/Howto.form.tsx
+++ b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -58,6 +58,7 @@ const FormContainer = styled.form`
 `
 export const HowtoForm = observer((props: IProps) => {
   const { howtoStore } = useCommonStores().stores
+
   const [state, setState] = useState<IState>({
     formSaved: false,
     _toDocsList: false,
@@ -195,7 +196,7 @@ export const HowtoForm = observer((props: IProps) => {
                               store={howtoStore}
                               _id={formValues._id}
                             />
-                            <HowtoFieldCategory category={values.category} />
+                            <HowtoFieldCategory />
                             <HowtoFieldTags />
                             <HowtoFieldTime />
                             <HowtoFieldDifficulty />
diff --git a/src/pages/Howto/Content/Common/HowtoFieldCategory.tsx b/src/pages/Howto/Content/Common/HowtoFieldCategory.tsx
index 9f5b70292f..7230192fcd 100644
--- a/src/pages/Howto/Content/Common/HowtoFieldCategory.tsx
+++ b/src/pages/Howto/Content/Common/HowtoFieldCategory.tsx
@@ -1,36 +1,50 @@
+import { useEffect, useState } from 'react'
 import { Field } from 'react-final-form'
-import { CategoriesSelect } from 'src/pages/Howto/Category/CategoriesSelect'
+import { CategoriesSelectV2 } from 'src/pages/common/Category/CategoriesSelectV2'
 import {
   FormFieldWrapper,
   HowtoCategoryGuidance,
 } from 'src/pages/Howto/Content/Common'
 import { intro } from 'src/pages/Howto/labels'
 
-import type { ICategory } from 'src/models/categories.model'
+import { howtoService } from '../../howto.service'
 
-interface IProps {
-  category: ICategory | undefined
-}
+import type { SelectValue } from 'src/pages/common/Category/CategoriesSelectV2'
 
-export const HowtoFieldCategory = ({ category }: IProps) => {
+export const HowtoFieldCategory = () => {
   const { placeholder, title } = intro.category
+  const [options, setOptions] = useState<SelectValue[]>([])
+
+  useEffect(() => {
+    const getCategories = async () => {
+      const categories = await howtoService.getHowtoCategories()
+      setOptions(
+        categories
+          .filter((x) => !x._deleted)
+          .map((x) => ({ label: x.label, value: x })),
+      )
+    }
+
+    getCategories()
+  }, [])
 
   return (
     <FormFieldWrapper text={title} required>
       <Field
         name="category"
-        render={({ input, ...rest }) => (
-          <CategoriesSelect
-            {...rest}
-            isForm={true}
-            onChange={(category) => input.onChange(category)}
-            value={input.value}
-            placeholder={placeholder}
-            type="howto"
-          />
+        render={({ input }) => (
+          <>
+            <CategoriesSelectV2
+              isForm={true}
+              onChange={(category) => input.onChange(category)}
+              value={input.value}
+              placeholder={placeholder || ''}
+              categories={options}
+            />
+            <HowtoCategoryGuidance category={input.value} type="main" />
+          </>
         )}
       />
-      <HowtoCategoryGuidance category={category} type="main" />
     </FormFieldWrapper>
   )
 }
diff --git a/src/pages/Research/Content/Common/Research.form.tsx b/src/pages/Research/Content/Common/Research.form.tsx
index ebab4b4f59..f09ff09ee2 100644
--- a/src/pages/Research/Content/Common/Research.form.tsx
+++ b/src/pages/Research/Content/Common/Research.form.tsx
@@ -15,7 +15,6 @@ import { SelectField } from 'src/common/Form/Select.field'
 import { TagsSelectField } from 'src/common/Form/TagsSelect.field'
 import { usePrompt } from 'src/common/hooks/usePrompt'
 import { researchStatusOptions } from 'src/models/research.models'
-import { CategoriesSelect } from 'src/pages/Howto/Category/CategoriesSelect'
 import {
   ResearchErrors,
   ResearchPostingGuidelines,
@@ -41,6 +40,7 @@ import {
   RESEARCH_TITLE_MIN_LENGTH,
 } from '../../constants'
 import { buttons, headings, overview } from '../../labels'
+import ResearchFieldCategory from './ResearchCategorySelect'
 
 import type { MainFormAction } from 'src/common/Form/types'
 import type { IResearch } from 'src/models/research.models'
@@ -294,21 +294,7 @@ const ResearchForm = observer((props: IProps) => {
                               <ResearchFormLabel>
                                 {categories.title}
                               </ResearchFormLabel>
-                              <Field
-                                name="researchCategory"
-                                render={({ input, ...rest }) => (
-                                  <CategoriesSelect
-                                    {...rest}
-                                    isForm={true}
-                                    onChange={(category) =>
-                                      input.onChange(category)
-                                    }
-                                    value={input.value}
-                                    placeholder={categories.placeholder}
-                                    type="research"
-                                  />
-                                )}
-                              />
+                              <ResearchFieldCategory />
                             </Flex>
                             <Flex sx={{ flexDirection: 'column' }} mb={3}>
                               <ResearchFormLabel>
diff --git a/src/pages/Research/Content/Common/ResearchCategorySelect.tsx b/src/pages/Research/Content/Common/ResearchCategorySelect.tsx
new file mode 100644
index 0000000000..8144e2e736
--- /dev/null
+++ b/src/pages/Research/Content/Common/ResearchCategorySelect.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+import { Field } from 'react-final-form'
+import { CategoriesSelectV2 } from 'src/pages/common/Category/CategoriesSelectV2'
+
+import { overview } from '../../labels'
+import { researchService } from '../../research.service'
+
+import type { SelectValue } from 'src/pages/common/Category/CategoriesSelectV2'
+
+const ResearchFieldCategory = () => {
+  const [options, setOptions] = useState<SelectValue[]>([])
+
+  useEffect(() => {
+    const getCategories = async () => {
+      const categories = await researchService.getResearchCategories()
+      setOptions(
+        categories
+          .filter((x) => !x._deleted)
+          .map((x) => ({ label: x.label, value: x })),
+      )
+    }
+
+    getCategories()
+  }, [])
+
+  return (
+    <Field
+      name="researchCategory"
+      render={({ input }) => (
+        <CategoriesSelectV2
+          isForm={true}
+          onChange={(category) => input.onChange(category)}
+          value={input.value}
+          placeholder={overview.categories.placeholder || ''}
+          categories={options}
+        />
+      )}
+    />
+  )
+}
+
+export default ResearchFieldCategory
diff --git a/src/pages/Research/Content/ResearchFilterHeader.tsx b/src/pages/Research/Content/ResearchFilterHeader.tsx
index be384a24f6..cb7ea7dcfd 100644
--- a/src/pages/Research/Content/ResearchFilterHeader.tsx
+++ b/src/pages/Research/Content/ResearchFilterHeader.tsx
@@ -8,8 +8,9 @@ import { Flex, Input } from 'theme-ui'
 
 import { CategoriesSelectV2 } from '../../common/Category/CategoriesSelectV2'
 import { listing } from '../labels'
-import { ResearchSearchParams, researchService } from '../research.service'
+import { researchService } from '../research.service'
 import { ResearchSortOptions } from '../ResearchSortOptions'
+import { ResearchSearchParams } from './ResearchSearchParams'
 
 import type { SelectValue } from '../../common/Category/CategoriesSelectV2'
 import type { ResearchSortOption } from '../ResearchSortOptions'
diff --git a/src/pages/Research/Content/ResearchList.tsx b/src/pages/Research/Content/ResearchList.tsx
index 9e873f2e87..2aa2f9e0a6 100644
--- a/src/pages/Research/Content/ResearchList.tsx
+++ b/src/pages/Research/Content/ResearchList.tsx
@@ -13,9 +13,10 @@ import { Box, Flex, Heading } from 'theme-ui'
 
 import { ITEMS_PER_PAGE, RESEARCH_EDITOR_ROLES } from '../constants'
 import { listing } from '../labels'
-import { ResearchSearchParams, researchService } from '../research.service'
+import { researchService } from '../research.service'
 import { ResearchFilterHeader } from './ResearchFilterHeader'
 import ResearchListItem from './ResearchListItem'
+import { ResearchSearchParams } from './ResearchSearchParams'
 
 import type { DocumentData, QueryDocumentSnapshot } from 'firebase/firestore'
 import type { ResearchStatus } from 'oa-shared'
diff --git a/src/pages/Research/Content/ResearchSearchParams.ts b/src/pages/Research/Content/ResearchSearchParams.ts
new file mode 100644
index 0000000000..5082c70fa4
--- /dev/null
+++ b/src/pages/Research/Content/ResearchSearchParams.ts
@@ -0,0 +1,6 @@
+export enum ResearchSearchParams {
+  category = 'category',
+  q = 'q',
+  sort = 'sort',
+  status = 'status',
+}
diff --git a/src/pages/Research/research.routes.test.tsx b/src/pages/Research/research.routes.test.tsx
index b4f4ac7708..f3bf19934f 100644
--- a/src/pages/Research/research.routes.test.tsx
+++ b/src/pages/Research/research.routes.test.tsx
@@ -30,7 +30,14 @@ import type { Mock } from 'vitest'
 const Theme = testingThemeStyles
 const mockActiveUser = FactoryUser()
 
-vi.mock('src/pages/Research/research.service')
+vi.mock('src/pages/Research/research.service', () => ({
+  researchService: {
+    search: vi.fn(),
+    getDraftCount: vi.fn(),
+    getDrafts: vi.fn(),
+    getResearchCategories: vi.fn(() => []),
+  },
+}))
 
 // Similar to issues in Academy.test.tsx - stub methods called in user store constructor
 // TODO - replace with mock store or avoid direct call
@@ -49,9 +56,6 @@ vi.mock('src/common/hooks/useCommonStores', () => ({
           HowtoAuthor: true,
         },
       },
-      researchCategoriesStore: {
-        allResearchCategories: [],
-      },
       tagsStore: {},
     },
   }),
diff --git a/src/pages/Research/research.service.ts b/src/pages/Research/research.service.ts
index 87f5d88981..72198425ee 100644
--- a/src/pages/Research/research.service.ts
+++ b/src/pages/Research/research.service.ts
@@ -25,13 +25,6 @@ import type { IResearch } from '../../models'
 import type { ICategory } from '../../models/categories.model'
 import type { ResearchSortOption } from './ResearchSortOptions'
 
-export enum ResearchSearchParams {
-  category = 'category',
-  q = 'q',
-  sort = 'sort',
-  status = 'status',
-}
-
 const search = async (
   words: string[],
   category: string,
diff --git a/src/stores/Categories/categories.store.tsx b/src/stores/Categories/categories.store.tsx
deleted file mode 100644
index 4b02be276c..0000000000
--- a/src/stores/Categories/categories.store.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { action, computed, makeObservable, observable } from 'mobx'
-import { arrayToJson } from 'src/utils/helpers'
-
-import { ModuleStore } from '../common/module.store'
-
-import type { ICategory } from 'src/models/categories.model'
-import type { IRootStore } from '../RootStore'
-
-export class CategoriesStore extends ModuleStore {
-  public allCategories: ICategory[] = []
-  public allCategoriesByKey: { [key: string]: ICategory } = {}
-
-  constructor(rootStore: IRootStore) {
-    super(rootStore, 'categories')
-    // call init immediately for tags so they are available to all pages
-    super.init()
-    makeObservable(this, {
-      allCategories: observable,
-      allCategoriesByKey: observable,
-      setAllCategories: action,
-      saveCategory: action,
-      deleteCategory: action,
-      categoriesLabels: computed,
-    })
-    this.allDocs$.subscribe((docs) => this.setAllCategories(docs))
-  }
-
-  public setAllCategories(docs: ICategory[]) {
-    this.allCategories = docs.sort((a, b) => (a.label > b.label ? 1 : -1))
-    this.allCategoriesByKey = arrayToJson(docs, '_id')
-  }
-
-  public saveCategory(category: Partial<ICategory>) {
-    return this.db.collection('categories').doc(category._id).set(category)
-  }
-
-  public deleteCategory(category: Partial<ICategory>) {
-    return this.db.collection('categories').doc(category._id).delete()
-  }
-
-  get categoriesLabels() {
-    return this.allCategories.map((category) => category.label)
-  }
-}
diff --git a/src/stores/QuestionCategories/questionCategories.store.tsx b/src/stores/QuestionCategories/questionCategories.store.tsx
deleted file mode 100644
index 9e74aa8670..0000000000
--- a/src/stores/QuestionCategories/questionCategories.store.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { action, computed, makeObservable, observable } from 'mobx'
-import { arrayToJson } from 'src/utils/helpers'
-
-import { ModuleStore } from '../common/module.store'
-
-import type { IQuestionCategory } from '../../models/questionCategories.model'
-import type { IRootStore } from '../RootStore'
-
-export class QuestionCategoriesStore extends ModuleStore {
-  public allQuestionCategories: IQuestionCategory[] = []
-  public allQuestionCategoriesByKey: { [key: string]: IQuestionCategory } = {}
-
-  constructor(rootStore: IRootStore) {
-    super(rootStore, 'questionCategories')
-    // call init immediately for tags so they are available to all pages
-    super.init()
-    makeObservable(this, {
-      allQuestionCategories: observable,
-      allQuestionCategoriesByKey: observable,
-      setAllQuestionCategories: action,
-      saveQuestionCategory: action,
-      deleteQuestionCategory: action,
-      questionCategoriesLabels: computed,
-    })
-    this.allDocs$.subscribe((docs) => this.setAllQuestionCategories(docs))
-  }
-
-  public setAllQuestionCategories(docs: IQuestionCategory[]) {
-    this.allQuestionCategories = docs.sort((a, b) =>
-      a.label > b.label ? 1 : -1,
-    )
-    this.allQuestionCategoriesByKey = arrayToJson(docs, '_id')
-  }
-
-  public saveQuestionCategory(questionCategory: Partial<IQuestionCategory>) {
-    return this.db
-      .collection('questionCategories')
-      .doc(questionCategory._id)
-      .set(questionCategory)
-  }
-
-  public deleteQuestionCategory(questionCategory: Partial<IQuestionCategory>) {
-    return this.db
-      .collection('questionCategories')
-      .doc(questionCategory._id)
-      .delete()
-  }
-
-  get questionCategoriesLabels() {
-    return this.allQuestionCategories.map(
-      (questionCategory) => questionCategory.label,
-    )
-  }
-}
diff --git a/src/stores/ResearchCategories/researchCategories.store.tsx b/src/stores/ResearchCategories/researchCategories.store.tsx
deleted file mode 100644
index c1c12e1213..0000000000
--- a/src/stores/ResearchCategories/researchCategories.store.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { action, computed, makeObservable, observable } from 'mobx'
-import { arrayToJson } from 'src/utils/helpers'
-
-import { ModuleStore } from '../common/module.store'
-
-import type { IResearchCategory } from 'src/models/researchCategories.model'
-import type { IRootStore } from '../RootStore'
-
-export class ResearchCategoriesStore extends ModuleStore {
-  public allResearchCategories: IResearchCategory[] = []
-  public allResearchCategoriesByKey: { [key: string]: IResearchCategory } = {}
-
-  constructor(rootStore: IRootStore) {
-    super(rootStore, 'researchCategories')
-    // call init immediately for tags so they are available to all pages
-    super.init()
-    makeObservable(this, {
-      allResearchCategories: observable,
-      allResearchCategoriesByKey: observable,
-      setAllResearchCategories: action,
-      saveResearchCategory: action,
-      deleteResearchCategory: action,
-      researchCategoriesLabels: computed,
-    })
-    this.allDocs$.subscribe((docs) => this.setAllResearchCategories(docs))
-  }
-
-  public setAllResearchCategories(docs: IResearchCategory[]) {
-    this.allResearchCategories = docs.sort((a, b) =>
-      a.label > b.label ? 1 : -1,
-    )
-    this.allResearchCategoriesByKey = arrayToJson(docs, '_id')
-  }
-
-  public saveResearchCategory(researchCategory: Partial<IResearchCategory>) {
-    return this.db
-      .collection('researchCategories')
-      .doc(researchCategory._id)
-      .set(researchCategory)
-  }
-
-  public deleteResearchCategory(researchCategory: Partial<IResearchCategory>) {
-    return this.db
-      .collection('researchCategories')
-      .doc(researchCategory._id)
-      .delete()
-  }
-
-  get researchCategoriesLabels() {
-    return this.allResearchCategories.map(
-      (researchCategory) => researchCategory.label,
-    )
-  }
-}
diff --git a/src/stores/RootStore.tsx b/src/stores/RootStore.tsx
index a4f6c66fa9..d4dacbdf9c 100644
--- a/src/stores/RootStore.tsx
+++ b/src/stores/RootStore.tsx
@@ -1,13 +1,10 @@
 import { AggregationsStore } from './Aggregations/aggregations.store'
-import { CategoriesStore } from './Categories/categories.store'
 import { DatabaseV2 } from './databaseV2/DatabaseV2'
 import { DiscussionStore } from './Discussions/discussions.store'
 import { HowtoStore } from './Howto/howto.store'
 import { MapsStore } from './Maps/maps.store'
 import { QuestionStore } from './Question/question.store'
-import { QuestionCategoriesStore } from './QuestionCategories/questionCategories.store'
 import { ResearchStore } from './Research/research.store'
-import { ResearchCategoriesStore } from './ResearchCategories/researchCategories.store'
 import { TagsStore } from './Tags/tags.store'
 import { ThemeStore } from './Theme/theme.store'
 import { UserNotificationsStore } from './User/notifications.store'
@@ -22,15 +19,12 @@ export interface IStores {
   howtoStore: HowtoStore
   userStore: UserStore
   tagsStore: TagsStore
-  categoriesStore: CategoriesStore
-  researchCategoriesStore: ResearchCategoriesStore
   researchStore: ResearchStore
   mapsStore: MapsStore
   themeStore: ThemeStore
   aggregationsStore: AggregationsStore
   userNotificationsStore: UserNotificationsStore
   questionStore: QuestionStore
-  questionCategoriesStore: QuestionCategoriesStore
   discussionStore: DiscussionStore
 }
 
@@ -54,14 +48,11 @@ const stores = (rootStore: IRootStore) => {
     howtoStore: new HowtoStore(rootStore),
     userStore: new UserStore(rootStore),
     tagsStore: new TagsStore(rootStore),
-    categoriesStore: new CategoriesStore(rootStore),
-    researchCategoriesStore: new ResearchCategoriesStore(rootStore),
     researchStore: new ResearchStore(rootStore),
     mapsStore: new MapsStore(rootStore),
     themeStore: new ThemeStore(),
     userNotificationsStore: new UserNotificationsStore(rootStore),
     questionStore: new QuestionStore(rootStore),
-    questionCategoriesStore: new QuestionCategoriesStore(rootStore),
     discussionStore: new DiscussionStore(rootStore),
   }
   return stores

From 78f1ccf9331ab1edaf994494889c3c637b4711c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mariojsnunes@gmail.com>
Date: Sun, 7 Jul 2024 10:09:07 +0100
Subject: [PATCH 2/2] chore: code cleanup

---
 .../Content/Common/HowtoCategoryGuidance.tsx  | 30 ++++++++++---------
 src/test/components/HowtoProvider.tsx         |  3 --
 src/test/components/ResearchProvider.tsx      |  3 --
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/pages/Howto/Content/Common/HowtoCategoryGuidance.tsx b/src/pages/Howto/Content/Common/HowtoCategoryGuidance.tsx
index 50359e4fa8..d92bc1ce10 100644
--- a/src/pages/Howto/Content/Common/HowtoCategoryGuidance.tsx
+++ b/src/pages/Howto/Content/Common/HowtoCategoryGuidance.tsx
@@ -10,24 +10,26 @@ interface IProps {
 }
 
 export const HowtoCategoryGuidance = ({ category, type }: IProps) => {
-  if (!category) return null
+  if (!category) {
+    return null
+  }
 
   const label = category.label.toLowerCase()
   const labelExists = !!guidance[label] && !!guidance[label][type]
 
+  if (!labelExists) {
+    return null
+  }
+
   return (
-    <>
-      {labelExists && (
-        <Alert variant="info" marginY={2}>
-          <Text
-            dangerouslySetInnerHTML={{ __html: guidance[label][type] }}
-            sx={{
-              fontSize: 1,
-              textAlign: 'left',
-            }}
-          />
-        </Alert>
-      )}
-    </>
+    <Alert variant="info" marginY={2}>
+      <Text
+        dangerouslySetInnerHTML={{ __html: guidance[label][type] }}
+        sx={{
+          fontSize: 1,
+          textAlign: 'left',
+        }}
+      />
+    </Alert>
   )
 }
diff --git a/src/test/components/HowtoProvider.tsx b/src/test/components/HowtoProvider.tsx
index ca9e3e596f..0f2e279795 100644
--- a/src/test/components/HowtoProvider.tsx
+++ b/src/test/components/HowtoProvider.tsx
@@ -9,9 +9,6 @@ vi.mock('src/common/hooks/useCommonStores', () => {
   return {
     useCommonStores: () => ({
       stores: {
-        categoriesStore: {
-          allCategories: [],
-        },
         howtoStore: {
           uploadStatus: {
             Start: false,
diff --git a/src/test/components/ResearchProvider.tsx b/src/test/components/ResearchProvider.tsx
index 15d4460dc7..9c87075162 100644
--- a/src/test/components/ResearchProvider.tsx
+++ b/src/test/components/ResearchProvider.tsx
@@ -9,9 +9,6 @@ vi.mock('src/common/hooks/useCommonStores', () => {
   return {
     useCommonStores: () => ({
       stores: {
-        categoriesStore: {
-          allCategories: [],
-        },
         researchStore: {
           validateTitleForSlug: vi.fn(),
           uploadHowTo: vi.fn(),