From 3aa61ad63fcd188776ad0c0a923a94c9f4a88f4b Mon Sep 17 00:00:00 2001
From: Arnaud AMBROSELLI <arnaud.ambroselli@yahoo.fr>
Date: Thu, 1 Feb 2024 11:49:14 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20possibilit=C3=A9=20de=20chercher=20une?=
 =?UTF-8?q?=20structure=20par=20npom,=20cat=C3=A9gorie,=20ville,=20etc.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/scenes/structure/list.js | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/scenes/structure/list.js b/dashboard/src/scenes/structure/list.js
index b55039b16..a5f212da9 100644
--- a/dashboard/src/scenes/structure/list.js
+++ b/dashboard/src/scenes/structure/list.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { SmallHeader } from '../../components/header';
 import Loading from '../../components/loading';
 import Table from '../../components/table';
@@ -13,6 +13,7 @@ import SelectCustom from '../../components/SelectCustom';
 import { useRecoilValue } from 'recoil';
 import { userState } from '../../recoil/auth';
 import { flattenedStructuresCategoriesSelector } from '../../recoil/structures';
+import { filterBySearch } from '../search/utils';
 
 const List = () => {
   const [structures, setStructures] = useState([]);
@@ -22,10 +23,14 @@ const List = () => {
   const [currentStructure, setCurrentStructure] = useState(null);
   const [currentStructureOpen, setCurrentStructureOpen] = useState(false);
 
+  const filteredStructures = useMemo(() => {
+    return filterBySearch(search, structures);
+  }, [search, structures]);
+
   useTitle('Structures');
 
   const getStructures = async () => {
-    const response = await API.get({ path: '/structure', query: { search } });
+    const response = await API.get({ path: '/structure' });
     if (response.ok) {
       setStructures(response.data);
     }
@@ -34,14 +39,13 @@ const List = () => {
 
   useEffect(() => {
     getStructures();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [search]);
+  }, []);
 
   if (isLoading) return <Loading />;
 
   return (
     <>
-      <SmallHeader title={`Structures (${structures?.length})`} />
+      <SmallHeader title={`Structures (${filteredStructures?.length})`} />
       <div className="tw-mb-5 tw-flex tw-flex-row tw-justify-center">
         <div className="noprint tw-flex tw-w-full tw-justify-end tw-gap-3">
           <Structure
@@ -65,11 +69,11 @@ const List = () => {
           <label htmlFor="search" className="tw-mr-5 tw-w-40 tw-shrink-0">
             Recherche&nbsp;:
           </label>
-          <Search placeholder="Par nom de la structure" value={search} onChange={setSearch} />
+          <Search placeholder="Nom, catégorie, ville, etc." value={search} onChange={setSearch} />
         </div>
       </div>
       <Table
-        data={structures}
+        data={filteredStructures}
         rowKey={'_id'}
         onRowClick={(s) => {
           setCurrentStructure(s);
@@ -79,10 +83,10 @@ const List = () => {
           {
             title: 'Nom',
             dataKey: 'name',
-            render: (structures) => {
+            render: (structure) => {
               return (
                 <div className="[overflow-wrap:anywhere]">
-                  <b>{structures.name}</b>
+                  <b>{structure.name}</b>
                 </div>
               );
             },
@@ -91,8 +95,8 @@ const List = () => {
           {
             title: 'Adresse',
             dataKey: 'adresse',
-            render: (structures) => {
-              return <div className="[overflow-wrap:anywhere]">{structures.adresse}</div>;
+            render: (structure) => {
+              return <div className="[overflow-wrap:anywhere]">{structure.adresse}</div>;
             },
           },
           { title: 'Code postal', dataKey: 'postcode' },