feat: create API for questions search

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

@@ -0,0 +1,60 @@
+describe('[How To]', () => {
+  beforeEach(() => {
+    cy.visit('/questions')
+  })
+
+  describe('[By Everyone]', () => {
+    it('should clear filters after navigation', () => {
+      cy.get('[data-cy=questions-search-box]').clear().type(`raincoat`)
+      cy.url().should('include', 'q=raincoat')
+      cy.url().should('include', 'sort=MostRelevant')
+
+      cy.get('[data-cy=category-select]').click()
+      cy.get('[id^="react-select-"]').contains('screening').click()
+      cy.url().should('include', 'category=categoryoix4r6grC1mMA0Xz3K')
+
+      cy.get('[data-cy=page-link]').contains('Questions').click()
+
+      cy.wait(2000)
+      cy.get('[data-cy=questions-search-box]')
+        .invoke('val')
+        .then((searchText) => expect(searchText).to.equal(''))
+      cy.get('[data-cy=category-select]').should('have.value', '')
+    })
+
+    it('should remove category filter after back navigation', () => {
+      cy.get('[data-cy=category-select]').click()
+      cy.get('[id^="react-select-"]').contains('screening').click()
+      cy.url().should('include', 'category=categoryoix4r6grC1mMA0Xz3K')
+      cy.go('back')
+      cy.get('[data-cy=category-select]').should('have.value', '')
+      cy.url().should('not.include', 'category=categoryoix4r6grC1mMA0Xz3K')
+    })
+
+    it('should remove search filter after back navigation', () => {
+      cy.get('[data-cy=questions-search-box]').clear().type(`raincoat`)
+      cy.url().should('include', 'q=raincoat')
+
+      cy.go('back')
+      cy.wait(2000)
+
+      cy.get('[data-cy=questions-search-box]')
+        .invoke('val')
+        .then((searchText) => expect(searchText).to.equal(''))
+      cy.url().should('not.include', 'q=raincoat')
+    })
+
+    it('should show question list items after visit a question', () => {
+      cy.get('[data-cy=question-list-item]:eq(0)').click()
+      cy.get('[data-cy=question-title]').should('be.visible')
+      cy.go('back')
+      cy.get('[data-cy=question-list-item]').should('be.visible')
+    })
+
+    it('should load more questions', () => {
+      cy.get('[data-cy=question-list-item]:eq(21)').should('not.exist')
+      cy.get('[data-cy=load-more]').click()
+      cy.get('[data-cy=question-list-item]:eq(21)').should('exist')
+    })
+  })
+})

src/pages/Question/QuestionFilterHeader.tsx

@@ -45,6 +45,10 @@ export const QuestionFilterHeader = () => {
     initCategories()
   }, [])
 
+  useEffect(() => {
+    setSearchString(q || '')
+  }, [q])
+
   const updateFilter = useCallback(
     (key: QuestionSearchParams, value: string) => {
       const params = new URLSearchParams(searchParams.toString())

src/pages/Question/QuestionListing.tsx

@@ -6,22 +6,20 @@ import { logger } from 'src/logger'
 import { questionService } from 'src/pages/Question/question.service'
 import { Flex, Heading } from 'theme-ui'
 
-import { ITEMS_PER_PAGE } from './constants'
 import { headings, listing } from './labels'
 import { QuestionFilterHeader } from './QuestionFilterHeader'
 import { QuestionListItem } from './QuestionListItem'
 
-import type { DocumentData, QueryDocumentSnapshot } from 'firebase/firestore'
 import type { IQuestion } from 'oa-shared'
 import type { QuestionSortOption } from './QuestionSortOptions'
 
 export const QuestionListing = () => {
   const [isFetching, setIsFetching] = useState<boolean>(true)
   const [questions, setQuestions] = useState<IQuestion.Item[]>([])
   const [total, setTotal] = useState<number>(0)
-  const [lastVisible, setLastVisible] = useState<
-    QueryDocumentSnapshot<DocumentData, DocumentData> | undefined
-  >(undefined)
+  const [lastVisibleId, setLastVisibleId] = useState<string | undefined>(
+    undefined,
+  )
   const { userStore } = useCommonStores().stores
 
   const [searchParams, setSearchParams] = useSearchParams()
@@ -46,9 +44,7 @@ export const QuestionListing = () => {
     }
   }, [q, category, sort])
 
-  const fetchQuestions = async (
-    skipFrom?: QueryDocumentSnapshot<DocumentData, DocumentData>,
-  ) => {
+  const fetchQuestions = async (skipFrom?: string | undefined) => {
     setIsFetching(true)
 
     try {
@@ -59,7 +55,6 @@ export const QuestionListing = () => {
         category,
         sort,
         skipFrom,
-        ITEMS_PER_PAGE,
       )
 
       if (result) {
@@ -70,7 +65,7 @@ export const QuestionListing = () => {
           setQuestions(result.items)
         }
 
-        setLastVisible(result.lastVisible)
+        setLastVisibleId(result.lastVisibleId)
 
         setTotal(result.total)
       }
@@ -151,7 +146,11 @@ export const QuestionListing = () => {
             justifyContent: 'center',
           }}
         >
-          <Button type="button" onClick={() => fetchQuestions(lastVisible)}>
+          <Button
+            type="button"
+            onClick={() => fetchQuestions(lastVisibleId)}
+            data-cy="load-more"
+          >
             {listing.loadMore}
           </Button>
         </Flex>