new feature, middleWayPoint

Author: ProchaLu

.env.example

@@ -2,4 +2,5 @@ PGHOST=xxxxxxx
 PGDATABASE=xxxxxxx
 PGUSERNAME=xxxxxxx
 PGPASSWORD=xxxxxxx
-CSRF_SECRET=xxxxxxx
+CSRF_SECRET=xxxxxxx
+GOOGLE_MAPS_API_KEY=xxxxxxx

migrations/1635336745-create-users-table.js

@@ -8,7 +8,9 @@ exports.up = async function up(sql) {
       password_hash VARCHAR(60) NOT NULL,
       name VARCHAR(40) NOT NULL,
 			mail VARCHAR(60) NOT NULL,
-			address VARCHAR(60)
+			address VARCHAR(60) NOT NULL,
+      lat DECIMAL,
+      lng DECIMAL
     );
   `;
 };

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
-    "@types/react-places-autocomplete": "^7.2.9",
+    "@react-google-maps/api": "^2.7.0",
     "bcrypt": "^5.0.1",
     "camelcase-keys": "^7.0.1",
     "cookie": "^0.4.1",
@@ -36,10 +36,12 @@
     "@types/cookie": "^0.4.1",
     "@types/csrf": "^3.1.0",
     "@types/dotenv-safe": "^8.1.2",
+    "@types/googlemaps": "^3.43.3",
     "@types/js-cookie": "^3.0.0",
     "@types/node": "^16.0.0",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
+    "@types/react-places-autocomplete": "^7.2.9",
     "@types/sharp": "^0.29.2",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",

pages/api/register.ts

@@ -17,6 +17,8 @@ export type RegisterRequest = {
   name: string;
   mail: string;
   address: string;
+  lat: number;
+  lng: number;
 };
 
 export type RegisterResponse = { errors: Errors } | { user: User };
@@ -29,13 +31,14 @@ export default async function registerHandler(
     !req.body.username ||
     !req.body.password ||
     !req.body.name ||
-    !req.body.mail
+    !req.body.mail ||
+    !req.body.address
   ) {
     res.status(400).send({
       errors: [
         {
           message:
-            'Request does not contain username, password, name and E-Mail',
+            'Request does not contain username, password, name, E-Mail and Address',
         },
       ],
     });
@@ -51,6 +54,10 @@ export default async function registerHandler(
 
     const address = req.body.address;
 
+    const lat = req.body.lat;
+
+    const lng = req.body.lng;
+
     const existingUser = await getUserWithPasswordHashByUsername(username);
 
     if (existingUser) {
@@ -68,6 +75,8 @@ export default async function registerHandler(
       passwordHash: passwordHash,
       mail: mail,
       address: address,
+      lat: lat,
+      lng: lng,
     });
 
     // clean old sessions

pages/api/users/[userId].ts

@@ -11,6 +11,8 @@ export type RegisterRequest = {
   name: number;
   mail: string;
   address: string;
+  lat: number;
+  lng: number;
 };
 
 export type User = {
@@ -19,6 +21,8 @@ export type User = {
   name: number;
   mail: string;
   address: string;
+  lat: number;
+  lng: number;
 };
 
 export type RegisterResponse = { user: User };
@@ -41,6 +45,8 @@ export default async function handler(
       name: body.name,
       mail: body.mail,
       address: body.address,
+      lat: body.lat,
+      lng: body.lng,
     });
     return res.status(200).json(updatedUser);
   }

pages/editUser.tsx

@@ -1,6 +1,11 @@
+import { useLoadScript } from '@react-google-maps/api';
 import { GetServerSidePropsContext } from 'next';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
+import PlacesAutocomplete, {
+  geocodeByAddress,
+  getLatLng,
+} from 'react-places-autocomplete';
 import Layout from '../components/Layout';
 import { User } from '../util/database';
 import { Errors } from '../util/types';
@@ -15,14 +20,40 @@ const EditUser = (props: Props) => {
   const [newMail, setNewMail] = useState('');
   const [newAddress, setNewAddress] = useState('');
   const [errors] = useState<Errors>([]);
+  const [newLat, setNewLat] = useState(0);
+  const [newLng, setNewLng] = useState(0);
 
   const router = useRouter();
 
+  const libraries = ['places'];
+
+  const { isLoaded, loadError } = useLoadScript({
+    googleMapsApiKey: 'AIzaSyDSSIEFPSWv8mx85eU7wqywyKB97k0Lsno',
+    libraries,
+  });
+
+  if (loadError) return 'Error loading maps';
+  if (!isLoaded) return 'Loading Maps';
+
+  const handleChange = (value: string) => {
+    setNewAddress(value);
+  };
+
+  const handleSelect = async (value: string) => {
+    const results = await geocodeByAddress(value);
+    const latLng = await getLatLng(results[0]);
+    setNewAddress(value);
+    setNewLat(latLng.lat);
+    setNewLng(latLng.lng);
+  };
+
   const updateUser = async (
     id: number,
     name: string,
     mail: string,
     address: string,
+    lat: number,
+    lng: number,
   ) => {
     await fetch(`/api/users/${id}`, {
       method: 'PATCH',
@@ -31,6 +62,8 @@ const EditUser = (props: Props) => {
         name: name,
         mail: mail,
         address: address,
+        lat: lat,
+        lng: lng,
       }),
     });
   };
@@ -77,19 +110,46 @@ const EditUser = (props: Props) => {
             </div>
           </div>
           <div className="mb-10">
-            <label
-              htmlFor="address"
-              className="block text-dark text-normal font-bold mb-2"
-            >
+            <div className="block text-dark text-normal font-bold mb-2">
               Address
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-dark leading-tight focus:outline-none focus:shadow-outline"
-              id="itemName"
-              placeholder="Name"
-              required
-              onChange={(e) => setNewAddress(e.currentTarget.value)}
-            />
+              <div>
+                <PlacesAutocomplete
+                  value={newAddress}
+                  onChange={handleChange}
+                  onSelect={handleSelect}
+                >
+                  {({
+                    getInputProps,
+                    suggestions,
+                    getSuggestionItemProps,
+                    loading,
+                  }) => (
+                    <div>
+                      <input
+                        className="shadow appearance-none border rounded w-full py-2 px-3 text-dark leading-tight focus:outline-none focus:shadow-outline"
+                        {...getInputProps({ placeholder: 'Address' })}
+                      />
+                      <div>
+                        {loading && <div>Loading...</div>}
+                        {suggestions.map((suggestion) => {
+                          const style = suggestion.active
+                            ? { backgroundColor: '#BBE1FA', cursor: 'pointer' }
+                            : { backgroundColor: '#fff', cursor: 'pointer' };
+                          return (
+                            <div
+                              key={`li-suggestion-${suggestion.placeId}`}
+                              {...getSuggestionItemProps(suggestion, { style })}
+                            >
+                              {suggestion.description}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </PlacesAutocomplete>
+              </div>
+            </div>
             <div>
               Address now:{' '}
               <span className="font-bold">{props.user.address}</span>
@@ -106,7 +166,14 @@ const EditUser = (props: Props) => {
           {newName.length && newMail.length && newAddress.length > 0 ? (
             <button
               onClick={() =>
-                updateUser(props.user.id, newName, newMail, newAddress)
+                updateUser(
+                  props.user.id,
+                  newName,
+                  newMail,
+                  newAddress,
+                  newLat,
+                  newLng,
+                )
               }
               className="w-full bg-blue shadow-lg text-bright text-xl font-bold py-2 px-10 rounded hover:bg-blue-light hover:text-dark"
             >

pages/itempage.js

@@ -53,15 +53,12 @@ const Itempage = (props) => {
                         onClick={async (event) => {
                           event.preventDefault();
 
-                          await fetch(
-                            `http://localhost:3000/api/items/${item.id}`,
-                            {
-                              method: 'DELETE',
-                              headers: {
-                                'Content-Type': 'application/json',
-                              },
+                          await fetch(`/api/items/${item.id}`, {
+                            method: 'DELETE',
+                            headers: {
+                              'Content-Type': 'application/json',
                             },
-                          );
+                          });
                           router.push(`/itempage/`);
                         }}
                         className="w-auto shadow-lg bg-red text-bright text-xl font-bold py-2 mb-5 px-10 rounded hover:bg-red-light hover:text-dark"

pages/register.tsx

@@ -1,3 +1,4 @@
+import { useLoadScript } from '@react-google-maps/api';
 import { GetServerSidePropsContext } from 'next';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
@@ -18,9 +19,33 @@ const RegisterPage = (props: Props) => {
   const [mail, setMail] = useState('');
   const [address, setAddress] = useState('');
   const [errors, setErrors] = useState<Errors>([]);
+  const [lat, setLat] = useState(0);
+  const [lng, setLng] = useState(0);
 
   const router = useRouter();
 
+  const libraries = ['places'];
+
+  const { isLoaded, loadError } = useLoadScript({
+    googleMapsApiKey: 'AIzaSyDSSIEFPSWv8mx85eU7wqywyKB97k0Lsno',
+    libraries,
+  });
+
+  if (loadError) return 'Error loading maps';
+  if (!isLoaded) return 'Loading Maps';
+
+  const handleChange = (value: string) => {
+    setAddress(value);
+  };
+
+  const handleSelect = async (value: string) => {
+    const results = await geocodeByAddress(value);
+    const latLng = await getLatLng(results[0]);
+    setAddress(value);
+    setLat(latLng.lat);
+    setLng(latLng.lng);
+  };
+
   return (
     <LayoutBeforeLogin>
       <div className="max-w-7xl my-2 mx-auto px-4 py-5 text-xl lg:py-10 ">
@@ -42,6 +67,8 @@ const RegisterPage = (props: Props) => {
                 name: name,
                 mail: mail,
                 address: address,
+                lat: lat,
+                lng: lng,
                 csrfToken: props.csrfToken,
               }),
             });
@@ -110,19 +137,50 @@ const RegisterPage = (props: Props) => {
                 value={mail}
                 required
                 onChange={(event) => setMail(event.currentTarget.value)}
-              />{' '}
+              />
             </label>
           </div>
           <div className="mb-10">
-            <label className="block text-dark text-normal font-bold mb-2">
+            <div className="block text-dark text-normal font-bold mb-2">
               Address
-              <input
-                className="shadow appearance-none border rounded w-full py-2 px-3 text-dark leading-tight focus:outline-none focus:shadow-outline"
-                placeholder="Address"
-                value={address}
-                onChange={(event) => setAddress(event.currentTarget.value)}
-              />
-            </label>
+              <div>
+                <PlacesAutocomplete
+                  value={address}
+                  onChange={handleChange}
+                  onSelect={handleSelect}
+                >
+                  {({
+                    getInputProps,
+                    suggestions,
+                    getSuggestionItemProps,
+                    loading,
+                  }) => (
+                    <div>
+                      <input
+                        className="shadow appearance-none border rounded w-full py-2 px-3 text-dark leading-tight focus:outline-none focus:shadow-outline"
+                        {...getInputProps({ placeholder: 'Address' })}
+                      />
+                      <div>
+                        {loading && <div>Loading...</div>}
+                        {suggestions.map((suggestion) => {
+                          const style = suggestion.active
+                            ? { backgroundColor: '#BBE1FA', cursor: 'pointer' }
+                            : { backgroundColor: '#fff', cursor: 'pointer' };
+                          return (
+                            <div
+                              key={`li-suggestion-${suggestion.placeId}`}
+                              {...getSuggestionItemProps(suggestion, { style })}
+                            >
+                              {suggestion.description}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </PlacesAutocomplete>
+              </div>
+            </div>
           </div>
           <div className="text-red mb-5">
             {errors.map((error) => (