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 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 [value, setValue] = useState(defaultValue);
-    function onChange(e) {
-      setValue(e.target.value);
-      if (value.length > 1)
-        fetchData(value, true);
-    }
-    return {
-      value,
-      onChange,
-    };
-}
 
 const ResearchBar = () => {
-    const input = useInput();
+
+    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 };
+    }
+
+    const handleValueChange = async (value) => {
+        setValue(value);
+    }
+
     return (
         <div className="research-container">
-            <input className="research-input" placeholder="Rechercher..." {...input}></input>
-            <button className="research-btn" /*onClick={fetchData(input.value, false)}*/>
+            <input className="research-input" value={value} onChange={(e) => handleValueChange(e.target.value)} placeholder="Rechercher..."></input>
+            <button className="research-btn" onClick={() => search(value)}>
                 <div className="fa fa-search" />
             </button>
         </div>

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

@@ -4,26 +4,37 @@ 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);
-        async function fetchData() {
-            const response = await fetch(`https://localhost:7292/api/Inventory`);
-            const json = await response.json();
-            if (json.length > 0)
-                setProducts([...json]);
+
+        if (state != null) {
+            setProducts([...state.searchResults.json]);
+            setIsSearch(true);
         }
-        fetchData();
+        else {
+            async function fetchData() {
+                const response = await fetch(`https://localhost:7292/api/Inventory`);
+                const json = await response.json();
+                if (json.length > 0)
+                    setProducts([...json]);
+            }
+            fetchData();
+        }
+
         setIsLoading(false);
     }, []);
 
@@ -49,25 +60,37 @@ const Morceaux = (startingProducts) => {
 
     const handleOrder = async (sortBy) => {
 
-        setOrder(sortBy);
-        var url = `https://localhost:7292/api/Inventory?order=${sortBy}&filterPrice=${filterPrice}&filterState=${filterState}`;
-        setIsLoading(true);
-        const response = await fetch(url);
-        const json = await response.json();
-        if (json.length > 0)
-            setProducts([...json]);
-        setIsLoading(false);
+        if (isSearch) {
+
+        }
+        else {
+            setOrder(sortBy);
+            var url = `https://localhost:7292/api/Inventory?order=${sortBy}&filterPrice=${filterPrice}&filterState=${filterState}`;
+            setIsLoading(true);
+            const response = await fetch(url);
+            const json = await response.json();
+            if (json.length > 0)
+                setProducts([...json]);
+            setIsLoading(false);
+        }
     }
 
     const handleFilters = async (price, state) => {
-        setFilterPrice(price);
-        setFilterState(state);
-        var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
-        setIsLoading(true);
-        const response = await fetch(url);
-        const json = await response.json();
-        setProducts([...json]);
-        setIsLoading(false);
+
+        if (isSearch) {
+
+        }
+        {
+            setFilterPrice(price);
+            setFilterState(state);
+            var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
+            setIsLoading(true);
+            const response = await fetch(url);
+            const json = await response.json();
+            setProducts([...json]);
+            setIsLoading(false);
+        }
+
     }
 
     return (
@@ -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>
     );