basic search (to be changed)

GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js

@@ -1,31 +1,33 @@
 import { useState } from 'react';
-import { Navigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-async function fetchData(query, preview) {
+
+
+const ResearchBar = () => {
+
+    const navigate = useNavigate();
+    const [value, setValue] = useState("");
+
+    const search = async (query) => {
+        const results = await fetchData(query, false);
+        console.log(results);
+        navigate('/morceaux', { state: { searchResults: results } });
+    }
+
+    const fetchData = async (query, preview) => {
         const response = await fetch(`https://localhost:7292/api/Search?query=${query}&preview=${preview}&deep=true`);
         const json = await response.json();
         return { json };
     }
 
-function useInput(defaultValue) {
+    const handleValueChange = async (value) => {
-    const [value, setValue] = useState(defaultValue);
+        setValue(value);
-    function onChange(e) {
-      setValue(e.target.value);
-      if (value.length > 1)
-        fetchData(value, true);
-    }
-    return {
-      value,
-      onChange,
-    };
     }
 
-const ResearchBar = () => {
-    const input = useInput();
     return (
         <div className="research-container">
-            <input className="research-input" placeholder="Rechercher..." {...input}></input>
+            <input className="research-input" value={value} onChange={(e) => handleValueChange(e.target.value)} placeholder="Rechercher..."></input>
-            <button className="research-btn" /*onClick={fetchData(input.value, false)}*/>
+            <button className="research-btn" onClick={() => search(value)}>
                 <div className="fa fa-search" />
             </button>
         </div>

GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js

@@ -4,19 +4,28 @@ import ItemList from "../components/ItemList";
 import { useState } from 'react';
 import Sorting from "../components/Sorting"
 import Filters from '../components/Filters';
+import { useLocation } from 'react-router-dom';
 
-const Morceaux = (startingProducts) => {
+const Morceaux = () => {
 
     const [products, setProducts] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
     const [order, setOrder] = useState("");
     const [filterPrice, setFilterPrice] = useState("");
     const [filterState, setFilterState] = useState("");
+    const [isSearch, setIsSearch] = useState(false);
 
+    const { state } = useLocation();
 
     useEffect(() => {
         document.title = 'Morceaux';
         setIsLoading(true);
+
+        if (state != null) {
+            setProducts([...state.searchResults.json]);
+            setIsSearch(true);
+        }
+        else {
             async function fetchData() {
                 const response = await fetch(`https://localhost:7292/api/Inventory`);
                 const json = await response.json();
@@ -24,6 +33,8 @@ const Morceaux = (startingProducts) => {
                     setProducts([...json]);
             }
             fetchData();
+        }
+
         setIsLoading(false);
     }, []);
 
@@ -49,6 +60,10 @@ const Morceaux = (startingProducts) => {
 
     const handleOrder = async (sortBy) => {
 
+        if (isSearch) {
+
+        }
+        else {
             setOrder(sortBy);
             var url = `https://localhost:7292/api/Inventory?order=${sortBy}&filterPrice=${filterPrice}&filterState=${filterState}`;
             setIsLoading(true);
@@ -58,8 +73,14 @@ const Morceaux = (startingProducts) => {
                 setProducts([...json]);
             setIsLoading(false);
         }
+    }
 
     const handleFilters = async (price, state) => {
+
+        if (isSearch) {
+
+        }
+        {
             setFilterPrice(price);
             setFilterState(state);
             var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
@@ -70,6 +91,8 @@ const Morceaux = (startingProducts) => {
             setIsLoading(false);
         }
 
+    }
+
     return (
         <div className="morceaux">
             <div className="morceaux-options-container">
@@ -86,9 +109,9 @@ const Morceaux = (startingProducts) => {
             <div className={isLoading ? "cat-load" : "d-none cat-load"} />
             <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
             <div>
-                <Button onClick={handleNextItems} className='btn-load-more'>
+                {!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
                     ...
-                </Button>
+                </Button>}
             </div>
         </div>
     );