find location by search

src/App.jsx

@@ -1,14 +1,22 @@
 import { Route, Routes } from "react-router-dom";
 import IndexPage from "./pages/IndexPage";
 import DetectLocation from "./pages/DetectLocationPage";
-import Map from "./components/Map";
+import RestaurantPage from "./pages/RestaurantPage";
+import AddRestaurant from "./pages/AddRestaurantForm";
+import NearByRestaurants from "./pages/NearByRestaurants";
 
 function App() {
   return (
     <Routes>
       <Route index element={<IndexPage />}></Route>
-      <Route exact path="/find-restaurants" element={<DetectLocation />}></Route>
-      <Route path="/your-location" element={<Map />}></Route>
+      <Route
+        exact
+        path="/find-restaurants"
+        element={<DetectLocation />}
+      ></Route>
+      <Route path="/your-location" element={<NearByRestaurants />}></Route>
+      <Route path="/restaurant" element={<RestaurantPage />}></Route>
+      <Route path="/add-restaurants" element={<AddRestaurant />}></Route>
     </Routes>
   );
 }

src/appwrite/appwriteConfig.js

@@ -2,6 +2,6 @@ import { Client, Account, Databases} from "appwrite";
 
 const client = new Client();
 
-client.setEndpoint('https://cloud.appwrite.io/v1').setProject('ProjectID');
+client.setEndpoint('https://cloud.appwrite.io/v1').setProject(import.meta.env.VITE_REACT_APP_APPWRITE_PROJECT_ID);
 
 export const account = new Account(client);

src/components/AutoCompleteSearch.jsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { FaSearch } from "react-icons/fa";
+import { TbCurrentLocation } from "react-icons/tb";
+import { useNavigate } from "react-router-dom";
+import { useLoadScript, Autocomplete} from "@react-google-maps/api";
+
+function AutocompleteSearch() {
+  const inputRef = useRef();
+  const navigate = useNavigate();
+
+  const handlePlaceChanged = () => {
+    const place = inputRef.current.getPlace();
+    if (place) {
+      console.log(place.formatted_address);
+      console.log(place.geometry.location.lat());
+      console.log(place.geometry.location.lng());
+      const userLocation = {
+        lat: place.geometry.location.lat(),
+        lng: place.geometry.location.lng(),
+      };
+      navigate(
+        `/your-location?lat=${userLocation.lat}&lng=${userLocation.lng}`
+      );
+    }
+  };
+
+  const getUserLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((position) => {
+        const userLocation = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+        };
+        navigate(
+          `/your-location?lat=${userLocation.lat}&lng=${userLocation.lng}`
+        );
+      });
+    }
+  };
+
+  const { isLoaded, loadError } = useLoadScript({
+    googleMapsApiKey: import.meta.env.VITE_REACT_APP_GOOGLE_MAP_API_KEY, // Replace with your actual API key
+    libraries: ["places"],
+  });
+
+  if (loadError) return "Error loading maps";
+  if (!isLoaded) return "Loading Maps";
+
+  return (
+    <div className="bg-white w-full rounded-xl h-12 flex flex-col items-stretch px-4 shadow-xl">
+      <div className="bg-white w-full h-12 flex items-center px-4">
+        <FaSearch className="text-primary text-xl" />
+        <Autocomplete
+          className="w-full"
+          onLoad={ref => inputRef.current = ref}
+          onPlaceChanged={handlePlaceChanged}
+        >
+          <input
+            placeholder="Type to Search..."
+            className="bg-transparent border-none text-xl h-full w-full ml-2.5 focus:outline-none"
+          />
+        </Autocomplete>
+        <TbCurrentLocation onClick={getUserLocation} className="text-primary text-2xl" />
+      </div>
+    </div>
+  );
+}
+
+export default AutocompleteSearch;

src/components/IndexHeader.jsx

@@ -1,5 +1,5 @@
 import logo from "../assets/logo/logo.ico";
-
+import { Link } from "react-router-dom";
 function IndexHeader(props) {
 
     function handleLoginButtonClick() {
@@ -22,6 +22,9 @@ function IndexHeader(props) {
           <span className=" text-4xl brand-name text-textColor">WasteZero</span>
         </div>
         <div className="flex items-center gap-4 ml-auto mr-20">
+          <span className="text-white">
+            <Link to={"/add-restaurants"}>Add restaurant</Link>
+          </span>
           <button
             onClick={handleLoginButtonClick}
             className="rounded-lg bg-secondary w-40 border-1 p-2 text-black"
@@ -30,7 +33,8 @@ function IndexHeader(props) {
           </button>
           <button
             onClick={handleRegisterButtonClick}
-            className="rounded-lg border-1 w-40 p-2 bg-primary text-textColor">
+            className="rounded-lg border-1 w-40 p-2 bg-primary text-textColor"
+          >
             Sign up
           </button>
         </div>

src/components/Location.jsx

@@ -1,44 +1,19 @@
-import { GoogleMap, useLoadScript, MarkerF } from "@react-google-maps/api";
-import { useMemo, useState } from "react";
+import { GoogleMap, MarkerF } from "@react-google-maps/api";
 
-function Location() {
-  const { isLoaded } = useLoadScript({
-    googleMapsApiKey: import.meta.env.VITE_REACT_APP_GOOGLE_MAP_API_KEY,
-  });
+function Location(props) {
 
-  if (!isLoaded) return <div>Loading...</div>;
-  return <Map />
-}
-
-function Map() {
-
-  //const center = useMemo(() => ({ lat: 26.86247, lng: 75.76241 }),[]);
-  const [currentLocation, setCurrentLocation] = useState({
-    lat: 26.86247,
-    lng: 75.76241,
-  });
-
-  const getUserLocation = () => {
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition((position) => {
-        const userLocation = {
-          lat: position.coords.latitude,
-          lng: position.coords.longitude,
-        };
-        setCurrentLocation(userLocation); // ADDED
-      });
-    } else {
-      // code for legacy browsers
-    }
+  const currentLocation = {
+    lat: parseFloat(props.latitude),
+    lng: parseFloat(props.longitude),
   };
 
   return (
     <GoogleMap
       zoom={20}
       center={currentLocation}
-      mapContainerClassName="w-full h-screen"
+      mapContainerClassName="w-screen h-screen"
     >
-      <MarkerF onLoad={getUserLocation} position={currentLocation} />
+      <MarkerF position={currentLocation} />
     </GoogleMap>
   );
 }

src/pages/DetectLocationPage.jsx

@@ -1,12 +1,10 @@
-import SearchBar from "../components/SearchBar";
-import SearchResultList from "../components/SearchResultsList";
+import AutocompleteSearch from "../components/AutoCompleteSearch";
 
 function DetectLocation() {
     return (
         <div className="bg-secondary w-screen h-screen"> 
             <div className="w-2/5 flex min-w-200 flex-col m-auto items-center pt-80">
-                <SearchBar />
-                <SearchResultList />
+                <AutocompleteSearch />
             </div>
         </div>
     )

src/pages/NearByRestaurants.jsx

@@ -1,9 +1,18 @@
+import { useLocation } from "react-router-dom";
+import Location from "../components/Location";
 function NearByRestaurants() {
-    return (
-        <div>
-            <Maps />
-        </div>
-    )
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const latitude = params.get("lat");
+  const longitude = params.get("lng");
+  return (
+    <div>
+      <Location
+        latitude={latitude}
+        longitude={longitude}
+      />
+    </div>
+  );
 }
 
-export default NearByRestaurants;
+export default NearByRestaurants;

tailwind.config.js

@@ -10,6 +10,7 @@ export default {
         background: "#fbf4f7",
         accent: "#979196",
         hoverColor: "#d6cc57",
+        green: "#A0C537",
       },
     },
   },