feat(components): implement location feature

implement location feature to search bar resolves #79
202306-NEA-DZ-FEW · Nov 9, 2023 · d7af056 · d7af056
1 parent f614d42
commit d7af056
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 17 deletions.
diff --git a/src/components/searching/SearchLocation.jsx b/src/components/searching/SearchLocation.jsx
@@ -4,20 +4,78 @@ import { FaLocationDot } from "react-icons/fa6";
 const SearchLocation = ({ setResults }) => {
     const [input, setInput] = useState("");
 
+    const locationStates = [
+        "Adrar",
+        "Ain Defla",
+        "Ain Temouchent",
+        "Algiers",
+        "Annaba",
+        "Batna",
+        "Bechar",
+        "Bejaia",
+        "Biskra",
+        "Blida",
+        "Bordj Bou Arreridj",
+        "Bouira",
+        "Boumerdes",
+        "Chlef",
+        "Constantine",
+        "Djelfa",
+        "El Bayadh",
+        "El Oued",
+        "El Tarf",
+        "Ghardaia",
+        "Guelma",
+        "Illizi",
+        "Jijel",
+        "Khenchela",
+        "Laghouat",
+        "M'Sila",
+        "Mascara",
+        "Medea",
+        "Mila",
+        "Mostaganem",
+        "Naama",
+        "Oran",
+        "Ouargla",
+        "Oum El Bouaghi",
+        "Relizane",
+        "Saida",
+        "Setif",
+        "Sidi Bel Abbes",
+        "Skikda",
+        "Souk Ahras",
+        "Tamanrasset",
+        "Tebessa",
+        "Tiaret",
+        "Tindouf",
+        "Tipaza",
+        "Tissemsilt",
+        "Tizi Ouzou",
+        "Tlemcen",
+        "Timimoun",
+        "Bordj Badji Mokhtar",
+        "Ouled Djellal",
+        "Béni Abbès",
+        "Ain Salah",
+        "Ain Guezzam",
+        "Touggourt",
+        "Djanet",
+        "El M'Ghair",
+        "El Menia",
+    ];
+
     const fetchData = (value) => {
-        fetch("https://jsonplaceholder.typicode.com/users")
-            .then((response) => response.json())
-            .then((json) => {
-                const results = json.filter((user) => {
-                    return (
-                        value &&
-                        user &&
-                        user.name &&
-                        user.name.toLowerCase().includes(value)
-                    );
-                });
-                setResults(results);
-            });
+        const filteredLocations = locationStates.filter((location) =>
+            location.toLowerCase().includes(value.toLowerCase()),
+        );
+
+        setResults(
+            filteredLocations.map((location, index) => ({
+                id: index,
+                name: location,
+            })),
+        );
     };
 
     const handleChange = (value) => {

diff --git a/src/components/searching/SearchResult.jsx b/src/components/searching/SearchResult.jsx
@@ -1,8 +1,18 @@
+import { useState } from "react";
+
 const SearchResult = ({ result }) => {
+    const [selected, setSelected] = useState(false);
+
+    const handleClick = () => {
+        setSelected(!selected);
+    };
+
     return (
         <div
-            className='p-1 search-result'
-            onClick={(e) => alert(`you clicked on ${result.name}`)}
+            className={`p-1 search-result cursor-pointer ${
+                selected ? "selected" : ""
+            }`}
+            onClick={handleClick}
         >
             {result.name}
         </div>

diff --git a/src/components/searching/SearchResultsList.jsx b/src/components/searching/SearchResultsList.jsx
@@ -2,7 +2,7 @@ import SearchResult from "./SearchResult";
 
 const SearchResultsList = ({ results }) => {
     return (
-        <div className='hidden:w-3/6 bg-white flex flex-col shadow-lg rounded-2xl mt-4 h-60 overflow-y-auto'>
+        <div className='w-auto bg-white flex flex-col  shadow-lg rounded-2xl mt-4 h-60 overflow-y-auto'>
             {results.map((result, id) => {
                 return <SearchResult result={result} key={id} />;
             })}

diff --git a/src/pages/search/LocationSearch.jsx b/src/pages/search/LocationSearch.jsx
@@ -10,7 +10,7 @@ const LocationSearch = () => {
         <div className='bg-[#eee] h-96 w-full'>
             <div className='flex flex-col items-center pt-24 w-2/6 m-auto'>
                 <SearchLocation setResults={setResults} />
-                <SearchResultsList results={results}/>
+                <SearchResultsList results={results} />
             </div>
         </div>
     );