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>