Merge pull request ONEARMY#3399 from benfurber/feat/questions/fix-cat…

…egory-select

fix: questions form category select

packages/cypress/src/integration/howto/read.spec.ts

@@ -13,15 +13,30 @@ describe('[How To]', () => {
     const howtoSlug = 'make-glass-like-beams'
     const howtoUrl = `/how-to/${howtoSlug}`
     const coverFileRegex = /howto-beams-glass-0-3.jpg/
+
     beforeEach(() => {
       cy.visit('/how-to')
     })
+
     it('[By Everyone]', () => {
       cy.step('More How-tos button is hidden')
       cy.get('[data-cy=more-how-tos]', SKIP_TIMEOUT).should('be.hidden')
 
       cy.step('All how-tos are shown')
+      cy.get('[data-cy=card]').its('length').should('be.eq', totalHowTo)
+
+      cy.step('Select a category')
+      cy.get('[data-cy=category-select]')
+      cy.selectTag('product', '[data-cy=category-select]')
+      cy.get('[data-cy=card]').its('length').should('be.eq', 4)
 
+      cy.step('Type and select a category')
+      cy.selectTag('injection', '[data-cy=category-select]')
+      cy.get('[data-cy=card]').its('length').should('be.eq', 2)
+
+      cy.step('Remove all category filter')
+      cy.get('.data-cy__clear-indicator').click()
+      cy.get('.data-cy__multi-value__label').should('not.exist')
       cy.get('[data-cy=card]').its('length').should('be.eq', totalHowTo)
 
       cy.step('How-to cards has basic info')
@@ -45,27 +60,6 @@ describe('[How To]', () => {
     })
   })
 
-  describe('[Filter by Category]', () => {
-    beforeEach(() => {
-      cy.visit('/how-to')
-    })
-    it('[By Everyone]', () => {
-      cy.step('Select a category')
-      cy.selectTag('product', '[data-cy="category-select"]')
-      cy.get('[data-cy=card]').its('length').should('be.eq', 4)
-
-      cy.step('Type and select a category')
-      cy.selectTag('injection', '[data-cy="category-select"]')
-
-      cy.get('[data-cy=card]').its('length').should('be.eq', 2)
-
-      cy.step('Remove all category filter')
-      cy.get('.data-cy__clear-indicator').click()
-      cy.get('.data-cy__multi-value__label').should('not.exist')
-      cy.get('[data-cy=card]').its('length').should('be.eq', totalHowTo)
-    })
-  })
-
   describe('[Read a How-to]', () => {
     const specificHowtoUrl = '/how-to/make-an-interlocking-brick'
     const coverFileRegex = /brick-12-1.jpg/

packages/cypress/src/integration/questions/write.spec.ts

@@ -7,6 +7,7 @@ describe('[Question]', () => {
     const initialExpectedSlug = 'health-consequences'
     const initialQuestionDescription =
       "Hello! I'm wondering how people feel about the health concerns about working with melting plastic and being in environments with microplastics. I have been working with recycling plastic (hdpe) for two years now, shredding and injection molding and haven't had any bad consequences yet. But with the low knowledge around micro plastics and its effects on the human body, and many concerns and hypotheses I have been a bit concerned lately.So I would like to ask the people in this community how you are feeling about it, and if you have experienced any issues with the microplastics or gases yet, if so how long have you been working with it? And what extra steps do you take to be protected from it? I use a gas mask with dust filters"
+    const category = 'exhibition'
     const tag1 = 'product'
     const tag2 = 'workshop'
 
@@ -38,8 +39,10 @@ describe('[Question]', () => {
         .find(':file')
         .attachFile('images/howto-step-pic2.jpg')
 
-      // To do - Set categories so this can then be selected here.
+      cy.step('Add category')
+      cy.selectTag(category, '[data-cy=category-select]')
 
+      cy.step('Add tags')
       cy.selectTag(tag1, '[data-cy="tag-select"]')
       cy.selectTag(tag2, '[data-cy="tag-select"]')
 
@@ -52,6 +55,7 @@ describe('[Question]', () => {
       cy.step('All question fields visible')
       cy.contains(initialTitle)
       cy.contains(initialQuestionDescription)
+      cy.contains(category)
       cy.contains(tag1)
       cy.contains(tag2)
 
@@ -87,8 +91,7 @@ describe('[Question]', () => {
       cy.step('All updated fields visiable on list')
       cy.visit('/questions')
       cy.contains(updatedTitle)
-      // cy.contains(tag1) <-- These should be added to the main list display
-      // cy.contains(tag2)
+      cy.contains(category)
     })
   })
 })

src/pages/Question/Content/Common/FormFields/QuestionCategory.field.tsx

@@ -1,25 +1,44 @@
+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 } from 'src/pages/Howto/Content/Common'
 import { fields } from 'src/pages/Question/labels'
+import { questionService } from 'src/pages/Question/question.service'
+
+import type { SelectValue } from 'src/pages/common/Category/CategoriesSelectV2'
 
 export const QuestionCategoryField = () => {
+  const [categories, setCategories] = useState<SelectValue[]>([])
+
   const { placeholder, title } = fields.category
   const name = 'questionCategory'
 
+  useEffect(() => {
+    const initCategories = async () => {
+      const categories = await questionService.getQuestionCategories()
+      const selectOptions = categories.map((category) => ({
+        value: category,
+        label: category.label,
+      }))
+      setCategories(selectOptions)
+    }
+
+    initCategories()
+  }, categories)
+
   return (
     <FormFieldWrapper htmlFor={name} text={title}>
       <Field
         name={name}
         id={name}
         render={({ input, ...rest }) => (
-          <CategoriesSelect
+          <CategoriesSelectV2
             {...rest}
+            categories={categories || []}
             isForm={true}
             onChange={input.onChange}
             value={input.value}
-            placeholder={placeholder}
-            type="question"
+            placeholder={placeholder as string}
           />
         )}
       />

src/pages/Question/QuestionFilterHeader.tsx

@@ -3,11 +3,11 @@ import { useSearchParams } from 'react-router-dom'
 import debounce from 'debounce'
 import { Select } from 'oa-components'
 import { FieldContainer } from 'src/common/Form/FieldContainer'
+import { questionService } from 'src/pages/Question/question.service'
 import { Flex, Input } from 'theme-ui'
 
 import { CategoriesSelectV2 } from '../common/Category/CategoriesSelectV2'
 import { listing } from './labels'
-import { questionService } from './question.service'
 import { QuestionSortOptions } from './QuestionSortOptions'
 
 import type { SelectValue } from '../common/Category/CategoriesSelectV2'

src/pages/Question/question.routes.test.tsx

@@ -15,6 +15,7 @@ import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Provider } from 'mobx-react'
 import { IModerationStatus, UserRole } from 'oa-shared'
+import { questionService } from 'src/pages/Question/question.service'
 import { useDiscussionStore } from 'src/stores/Discussions/discussions.store'
 import { useQuestionStore } from 'src/stores/Question/question.store'
 import {
@@ -26,7 +27,6 @@ import { FactoryUser } from 'src/test/factories/User'
 import { testingThemeStyles } from 'src/test/utils/themeUtils'
 
 import { questionRouteElements } from './question.routes'
-import { questionService } from './question.service'
 
 import type { QuestionStore } from 'src/stores/Question/question.store'
 
@@ -96,13 +96,6 @@ class mockQuestionStoreClass implements Partial<QuestionStore> {
   userCanEditQuestion = true
 }
 
-jest.mock('./question.service', () => ({
-  questionService: {
-    search: jest.fn(),
-    getQuestionCategories: jest.fn(),
-  },
-}))
-
 const mockQuestionService: typeof questionService = {
   getQuestionCategories: jest.fn(() => {
     return new Promise((resolve) => {
@@ -128,6 +121,7 @@ describe('question.routes', () => {
       fetchOrCreateDiscussionBySource: jest.fn().mockResolvedValue(null),
       activeUser: mockActiveUser,
     })
+    questionService.getQuestionCategories = jest.fn().mockResolvedValue([])
   })
 
   afterEach(() => {

src/pages/common/Category/CategoriesSelectV2.tsx

@@ -2,7 +2,9 @@ import { Select } from 'oa-components'
 
 import { FieldContainer } from '../../../common/Form/FieldContainer'
 
-export type SelectValue = { label: string; value: string }
+import type { ICategory } from 'src/models/categories.model'
+
+export type SelectValue = { label: string; value: string | ICategory }
 
 export type CategoriesSelectProps = {
   value: SelectValue | null