Appwrite Database integration for Restaurants details.

package.json

@@ -35,6 +35,6 @@
     "process": "^0.11.10",
     "react-error-overlay": "6.0.9",
     "tailwindcss": "^3.3.2",
-    "vite": "^4.3.8"
+    "vite": "^4.3.9"
   }
 }

src/App.jsx

@@ -1,7 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import IndexPage from "./pages/IndexPage";
 import DetectLocation from "./pages/DetectLocationPage";
-import RestaurantPage from "./pages/RestaurantPage";
 import AddRestaurant from "./pages/AddRestaurantForm";
 import NearByRestaurants from "./pages/NearByRestaurants";
 import RestaurantDashBoard from "./pages/RestaurantDashboard";
@@ -19,7 +18,6 @@ function App() {
         element={<DetectLocation />}
       ></Route>
       <Route path="/your-location" element={<NearByRestaurants />}></Route>
-      <Route path="/restaurant" element={<RestaurantPage />}></Route>
       <Route path="/add-restaurants" element={<AddRestaurant />}></Route>
       <Route path="/restaurant-dashboard/*" element={<Layout />}>
         <Route index element={<RestaurantDashBoard />}></Route>

src/appwrite/appwriteConfig.js

@@ -5,3 +5,5 @@ const client = new Client();
 client.setEndpoint('https://cloud.appwrite.io/v1').setProject(import.meta.env.VITE_REACT_APP_APPWRITE_PROJECT_ID);
 
 export const account = new Account(client);
+
+export const databases = new Databases(client,import.meta.env.VITE_REACT_APP_APPWRITE_PROJECT_ID)

src/components/AutoCompleteSearch.jsx

@@ -41,7 +41,7 @@ function AutocompleteSearch() {
   };
 
   const { isLoaded, loadError } = useLoadScript({
-    googleMapsApiKey: import.meta.env.VITE_REACT_APP_GOOGLE_MAP_API_KEY, // Replace with your actual API key
+    googleMapsApiKey: 'AIzaSyAot7-xt-v0yaVON7FtrX8HDZGfA89Hlwc', // Replace with your actual API key
     libraries: libraries,
   });
 

src/components/RestaurantDetailsForm.jsx

@@ -2,17 +2,65 @@ import RestaurantLocationSearch from "./RestaurantLocationSearch";
 import { useState } from "react";
 import Location from "./Location";
 import { Link } from "react-router-dom";
+import {databases} from '../appwrite/appwriteConfig';
+import { Data } from "@react-google-maps/api";
+import { v4 as uuidv4 } from 'uuid';
+import {account} from '../appwrite/appwriteConfig';
 
 function RestaurantDetails() {
+
+
+  const [restaurant,setRestaurant] = useState({
+    rName:"",
+    rAdress:"",
+    rphone:9999999999,
+    lat: -73.97599050000001,
+    long: -73.97599050000001,
+    oName:"",
+    oEmail:"",
+    oPhone:9999999999,
+    userID:""
+  })
+
   const [restaurantLocation, setRestaurantLocation] = useState({
-    lat: 40.6851868,
-    lng: -73.97599050000001,
+    lat: -73.97599050000001,
+    long: -73.97599050000001,
     country: "",
     state: "",
     locality: "",
     postalCode: ""
   });
 
+  const handleSubmit = async(e)=>{
+    e.preventDefault()
+    const uid = uuidv4()
+
+    const promise = databases.createDocument(import.meta.env.VITE_REACT_APP_APPWRITE_DATABASE_ID,
+                      import.meta.env.VITE_REACT_APP_APPWRITE_COLLECTION_ID,
+                      uid,{
+      rName:restaurant.rName,
+      rAdress:restaurant.rAdress,
+      rPhone:restaurant.rphone,
+      lat:restaurant.lat,
+      long:restaurant.long,
+      oName:restaurant.oName,
+      oEmail:restaurant.oEmail,
+      oPhone:restaurant.oPhone,
+      userID:restaurant.userID
+    })
+    promise.then(
+      function(response){
+        console.log(response)
+      },
+      function(error){
+        console.log(error)
+      }
+    )
+  }
+
+
+
+
   return (
     <div className="mt-10">
       <div className="border rounded-lg p-4">
@@ -26,13 +74,25 @@ function RestaurantDetails() {
               name="restaurantName"
               id=""
               placeholder="Restaurant Name"
+              onChange={(e)=>{
+                setRestaurant({
+                  ...restaurant,
+                  rName:e.target.value
+                })
+              }}
             />
             <input
               className="border rounded-lg w-full p-2"
               type="text"
               name="restaurantAddress"
               id=""
               placeholder="Restaurant Complete address"
+              onChange={(e)=>{
+                setRestaurant({
+                  ...restaurant,
+                  rAdress:e.target.value
+                })
+              }}
             />
           </form>
           <p className="border-2 rounded-lg p-1 text-xs mt-3 text-textColor">
@@ -51,11 +111,14 @@ function RestaurantDetails() {
               <RestaurantLocationSearch
                 restaurantLocation={restaurantLocation}
                 setRestaurantLocation={setRestaurantLocation}
+                setRestaurant={setRestaurant}
+                restaurant={restaurant}
+
               />
               <div className="w-full h-80 rounded-xl border mt-3">
                 <Location
                   latitude={restaurantLocation.lat}
-                  longitude={restaurantLocation.lng}
+                  longitude={restaurantLocation.long}
                 />
               </div>
             </div>
@@ -112,6 +175,12 @@ function RestaurantDetails() {
               className="p-2 w-full"
               type="text"
               placeholder="Mobile number at restaurant"
+              onChange={(e)=>{
+                setRestaurant({
+                  ...restaurant,
+                  rphone:e.target.value
+                })
+              }}
             />
           </div>
           <button className="border rounded-lg w-1/3 bg-gray-200">
@@ -131,11 +200,23 @@ function RestaurantDetails() {
             className="p-2 w-5/12 border rounded-lg"
             type="text"
             placeholder="Restaurant owner full name"
+            onChange={(e)=>{
+              setRestaurant({
+                ...restaurant,
+                oName:e.target.value
+              })
+            }}
           />
           <input
             className="p-2 w-5/12 border rounded-lg"
             type="text"
             placeholder="Restaurant owner email address"
+            onChange={(e)=>{
+              setRestaurant({
+                ...restaurant,
+                oEmail:e.target.value
+              })
+            }}
           />
         </div>
         <div className="mt-4 flex gap-24">
@@ -146,6 +227,12 @@ function RestaurantDetails() {
               className="p-2 w-full"
               type="text"
               placeholder="Mobile number at restaurant"
+              onChange={(e)=>{
+                setRestaurant({
+                  ...restaurant,
+                  oPhone:e.target.value
+                })
+              }}
             />
           </div>
           <button className="border rounded-lg w-1/3 bg-gray-200">
@@ -154,11 +241,9 @@ function RestaurantDetails() {
         </div>
       </div>
       <div className="flex items-center justify-center mt-10">
-        <Link to={"/restaurant-dashboard"}>
-          <button className="bg-primary text-sm w-32 h-10 rounded-lg text-white">
+          <button className="bg-primary text-sm w-32 h-10 rounded-lg text-white" onClick={handleSubmit}>
             Submit
           </button>
-        </Link>
       </div>
     </div>
   );

yarn.lock

@@ -8994,10 +8994,10 @@ vary@~1.1.2:
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
-vite@^4.3.8:
-  version "4.3.8"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.8.tgz#70cd6a294ab52d7fb8f37f5bc63d117dd19e9918"
-  integrity sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==
+vite@^4.3.9:
+  version "4.3.9"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.9.tgz#db896200c0b1aa13b37cdc35c9e99ee2fdd5f96d"
+  integrity sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==
   dependencies:
     esbuild "^0.17.5"
     postcss "^8.4.23"