fix: search on comparator

src/components/comparateur/overscreens/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from 'next-intl'
-import React, { ForwardedRef, forwardRef, useEffect, useState } from 'react'
+import { ForwardedRef, forwardRef, useEffect, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { ComputedEquivalent } from 'types/equivalent'
 import { getName } from 'utils/Equivalent/equivalent'
@@ -34,7 +34,9 @@ const Checkbox = (
   }
 
   useEffect(() => {
-    setInteracted(false)
+    if (interacted) {
+      setInteracted(false)
+    }
   }, [equivalents])
 
   return (

src/components/comparateur/overscreens/EquivalentsOverscreen.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { useSearchEquivalent } from 'src/providers/useSearchEquivalent'
 import { categories } from 'data/categories'
 import { track } from 'utils/matomo'
+import useDebounce from 'hooks/useDebounce'
 import Button from 'components/base/buttons/Button'
 import SearchIcon from 'components/base/icons/search'
 import HiddenLabel from 'components/form/HiddenLabel'
@@ -29,10 +30,13 @@ const EquivalentsOverscreen = () => {
   }, [equivalents])
 
   const [search, setSearch] = useState('')
-  const results = useSearchEquivalent(search, true)
+
+  const debouncedSearch: string = useDebounce(search)
+  const results = useSearchEquivalent(debouncedSearch, true, undefined, true)
 
   const t = useTranslations('comparateur.overscreen')
   const tModal = useTranslations('modal')
+
   return (
     <>
       <div className={styles.header}>
@@ -63,7 +67,7 @@ const EquivalentsOverscreen = () => {
           {tModal('close')}
         </Button>
       </div>
-      {search ? (
+      {debouncedSearch ? (
         results.length > 0 ? (
           <ul className={styles.content}>
             <Equivalents

src/providers/useSearchEquivalent.ts

@@ -38,7 +38,12 @@ const equivalents = computedEquivalents
   })
   .flatMap(getEquivalentWithCarpool)
 
-export const useSearchEquivalent = (search: string, excludeEmpty?: boolean, category?: number) => {
+export const useSearchEquivalent = (
+  search: string,
+  excludeEmpty?: boolean,
+  category?: number,
+  emptyResults?: boolean
+) => {
   const [results, setResults] = useState<ComputedEquivalent[]>([])
   const [fuses, setFuses] = useState<{ fuse: Fuse<ComputedEquivalent>; nonEmptyFuse: Fuse<ComputedEquivalent> }>()
 
@@ -72,17 +77,23 @@ export const useSearchEquivalent = (search: string, excludeEmpty?: boolean, cate
 
   useEffect(() => {
     if (fuses) {
-      setResults(
-        excludeEmpty
-          ? search.length > 0
-            ? fuses.nonEmptyFuse.search(search.normalize('NFD').replace(/[\u0300-\u036f]/g, '')).map(({ item }) => item)
-            : computedEquivalents.filter((equivalent) => equivalent.value).sort((a, b) => (a.slug > b.slug ? 1 : -1))
-          : search.length > 0
-            ? fuses.fuse.search(search.normalize('NFD').replace(/[\u0300-\u036f]/g, '')).map(({ item }) => item)
-            : computedEquivalents.sort((a, b) => (a.slug > b.slug ? 1 : -1))
-      )
+      if (emptyResults && search.length === 0) {
+        setResults([])
+      } else {
+        setResults(
+          excludeEmpty
+            ? search.length > 0
+              ? fuses.nonEmptyFuse
+                  .search(search.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
+                  .map(({ item }) => item)
+              : computedEquivalents.filter((equivalent) => equivalent.value).sort((a, b) => (a.slug > b.slug ? 1 : -1))
+            : search.length > 0
+              ? fuses.fuse.search(search.normalize('NFD').replace(/[\u0300-\u036f]/g, '')).map(({ item }) => item)
+              : computedEquivalents.sort((a, b) => (a.slug > b.slug ? 1 : -1))
+        )
+      }
     }
-  }, [search, fuses])
+  }, [search, fuses, emptyResults])
 
   return results
 }