From 840178147a49e0901776f189ce4826c623aebd4c Mon Sep 17 00:00:00 2001
From: Victor Turgeon <76506447+Medenos@users.noreply.github.com>
Date: Sat, 29 Oct 2022 14:17:59 -0700
Subject: [PATCH] basic search (to be changed)

---
 .../src/components/ResearchBar.js             | 44 +++++------
 .../grosses-mitaines-ui/src/pages/Morceaux.js | 75 ++++++++++++-------
 2 files changed, 72 insertions(+), 47 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
index e46aece..691f15b 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
+++ b/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>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index 33de673..614e5dc 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/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>
     );