fix(mespapiers): Search result wasn't using correct datas

The hook to return datas is async so we need to compute required data at the same time of the func execution. Before the fix, the required data was computing one render before, so there was a discrepancy between the rendering and the search result.
cozy · May 31, 2023 · 6258887 · 6258887
1 parent fbaba49
commit 6258887
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/Home/ContentWhenSearching.jsx b/packages/cozy-mespapiers-lib/src/components/Home/ContentWhenSearching.jsx
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types'
-import React, { useMemo } from 'react'
+import React from 'react'
 
 import Empty from 'cozy-ui/transpiled/react/Empty'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 
 import { makePapersGroupByQualificationLabel } from './helpers'
 import SearchEmpty from '../../assets/icons/SearchEmpty.svg'
-import { useMultiSelection } from '../Hooks/useMultiSelection'
 import PaperGroup from '../Papers/PaperGroup'
 import useSearchResult from '../Search/useSearchResult'
 import FlexsearchResult from '../SearchResult/FlexsearchResult'
@@ -20,25 +19,21 @@ const ContentWhenSearching = ({
   selectedTheme
 }) => {
   const { t } = useI18n()
-  const { isMultiSelectionActive } = useMultiSelection()
-
-  const allDocs = useMemo(() => papers.concat(contacts), [papers, contacts])
-  const showResultByGroup = searchValue?.length === 0
-  const docsToBeSearched =
-    isMultiSelectionActive || showResultByGroup ? papers : allDocs
 
   const {
-    pending,
+    loading,
     hasResult,
     filteredDocs,
-    firstSearchResultMatchingAttributes
+    firstSearchResultMatchingAttributes,
+    showResultByGroup
   } = useSearchResult({
-    docsToBeSearched,
+    papers,
+    contacts,
     searchValue,
     selectedTheme
   })
 
-  if (pending) {
+  if (loading) {
     return (
       <Spinner
         size="xxlarge"

diff --git a/packages/cozy-mespapiers-lib/src/components/Search/useSearchResult.jsx b/packages/cozy-mespapiers-lib/src/components/Search/useSearchResult.jsx
@@ -1,18 +1,31 @@
 import { useState, useEffect } from 'react'
 
 import { useSearch } from './SearchProvider'
+import { useMultiSelection } from '../Hooks/useMultiSelection'
 
-const useSearchResult = ({ docsToBeSearched, searchValue, selectedTheme }) => {
+const useSearchResult = ({ papers, contacts, searchValue, selectedTheme }) => {
   const { search } = useSearch()
+  const { isMultiSelectionActive } = useMultiSelection()
   const [searchResult, setSearchResult] = useState({
-    pending: true,
+    loading: true,
     hasResult: null,
     filteredDocs: null,
-    firstSearchResultMatchingAttributes: null
+    firstSearchResultMatchingAttributes: null,
+    showResultByGroup: null
   })
 
   useEffect(() => {
+    setSearchResult(state => ({
+      ...state,
+      loading: true
+    }))
+
     const asyncFn = async () => {
+      const allDocs = papers.concat(contacts)
+      const showResultByGroup = searchValue?.length === 0
+      const docsToBeSearched =
+        isMultiSelectionActive || showResultByGroup ? papers : allDocs
+
       const { filteredDocs, firstSearchResultMatchingAttributes } =
         await search({
           docs: docsToBeSearched,
@@ -23,15 +36,23 @@ const useSearchResult = ({ docsToBeSearched, searchValue, selectedTheme }) => {
       const hasResult = filteredDocs?.length > 0
 
       setSearchResult({
-        pending: false,
+        loading: false,
         hasResult,
         filteredDocs,
-        firstSearchResultMatchingAttributes
+        firstSearchResultMatchingAttributes,
+        showResultByGroup
       })
     }
 
     asyncFn()
-  }, [docsToBeSearched, search, searchValue, selectedTheme])
+  }, [
+    papers,
+    contacts,
+    search,
+    searchValue,
+    selectedTheme,
+    isMultiSelectionActive
+  ])
 
   return searchResult
 }