Initial commit

frontend/src/components/Search.js

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'npm:react';
+import Form from 'react-bootstrap/Form';
+import InputGroup from 'react-bootstrap/InputGroup';
+import { Search } from 'react-bootstrap-icons';
+
+function Component({callback}) {
+  const [searchValue, setSearchValue] = useState("");
+
+  const updateSearch = event => {
+    var value = event.target.value;
+    setSearchValue(value);
+    parseSearch(value);
+  }
+
+  const parseSearch = value => {
+    var zip = 0;
+    var findZip = value.match(/[0-9]{4}/g);
+    if (findZip) {
+      zip = parseInt(findZip[0]);
+    }
+
+    var city = "";
+    var findCity = value.replace(/[0-9]/g, '');
+    if (findCity.length > 0) {
+      city = findCity.trim();
+    }
+
+    callback(value, zip, city);
+  }
+
+  useEffect(() => {
+    const paramsString = window.location.search;
+    const searchParams = new URLSearchParams(paramsString);
+    const value = searchParams.get("s");
+
+    if (value && value.length > 0) {
+      setSearchValue(value);
+      parseSearch(value);
+    }
+  }, []);
+
+  return (
+    <>
+      <InputGroup size="lg">
+        <InputGroup.Text>
+          <Search />
+        </InputGroup.Text>
+        <Form.Control
+          placeholder="Rechercher un code postal ou une localité"
+          onChange={updateSearch}
+          value={searchValue}
+        />
+      </InputGroup>
+    </>
+  );
+}
+
+export default Component;