chore: refactor categories

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,

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 />

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>
   )
 }

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>
   )
 }

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>

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

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'

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'

src/pages/Research/Content/ResearchSearchParams.ts

@@ -0,0 +1,6 @@
+export enum ResearchSearchParams {
+  category = 'category',
+  q = 'q',
+  sort = 'sort',
+  status = 'status',
+}

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: {},
     },
   }),

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,