feat: didn't go to sleep

package-lock.json

@@ -10,25 +10,33 @@
 			"dependencies": {
 				"@material-ui/core": "^4.11.3",
 				"@material-ui/icons": "^4.11.2",
+				"@react-google-maps/api": "^2.1.1",
 				"@testing-library/jest-dom": "^5.11.4",
 				"@testing-library/react": "^11.1.0",
 				"@testing-library/user-event": "^12.1.10",
 				"@types/bootstrap": "^5.0.12",
+				"@types/leaflet": "^1.7.0",
 				"@types/node": "^14.14.37",
 				"@types/react": "^17.0.3",
 				"@types/react-router-dom": "^5.1.7",
 				"axios": "^0.21.1",
 				"bootstrap": "^4.6.0",
 				"dotenv": "^8.2.0",
+				"google-maps-react": "^2.0.6",
 				"jquery": "^3.6.0",
 				"popper.js": "^1.16.1",
 				"react": "^17.0.2",
 				"react-bootstrap": "^1.5.2",
 				"react-dom": "^17.0.2",
+				"react-leaflet": "^3.1.0",
+				"react-places-autocomplete": "^7.3.0",
 				"react-router-dom": "^5.2.0",
 				"react-scripts": "4.0.3",
 				"typescript": "^4.2.4",
 				"web-vitals": "^1.0.1"
+			},
+			"devDependencies": {
+				"@types/react-places-autocomplete": "^7.2.6"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -1285,6 +1293,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/@googlemaps/js-api-loader": {
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.11.1.tgz",
+			"integrity": "sha512-2ug4uBu0onRXTAo7Yxkay5N7pdNIz3XpTElMTLdCtEfQDxikbjeR6GS8atVhblX+ubFBNlXvDzz7VtuXv0vMRQ==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			}
+		},
 		"node_modules/@hapi/address": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1882,6 +1898,41 @@
 				"url": "https://opencollective.com/popperjs"
 			}
 		},
+		"node_modules/@react-google-maps/api": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.1.1.tgz",
+			"integrity": "sha512-Z/dcaDDfZD4DFnE1GhdHOIFHZ+VocEt6Ixe82f0f9tL/J0CZBQvfJ3V8RogY9fVraxdKIwnQx75U0O1JVqqBnw==",
+			"dependencies": {
+				"@googlemaps/js-api-loader": "1.11.1",
+				"@react-google-maps/infobox": "2.1.1",
+				"@react-google-maps/marker-clusterer": "2.1.1",
+				"invariant": "2.2.4"
+			},
+			"peerDependencies": {
+				"react": "^16.6.3 || ^17.0.0",
+				"react-dom": "^16.6.3 || ^17.0.0"
+			}
+		},
+		"node_modules/@react-google-maps/infobox": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.1.1.tgz",
+			"integrity": "sha512-x/+Td4Wsw+ziEcLjgQketCphuueLZ4vQLFkLrUBVzsHj4as4at79GsdVwoAdKIkBc5BDYJZw3ZGSr/SnWSObeg=="
+		},
+		"node_modules/@react-google-maps/marker-clusterer": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.1.1.tgz",
+			"integrity": "sha512-LIqf1T2dVXRaf/gqk/7kEDpRvr1aQGlqOv/p5zwZus3qI6/3qK4jxNpc89gQ2WkCMrGwcI/fTQrnI55BZCxsLA=="
+		},
+		"node_modules/@react-leaflet/core": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
+			"integrity": "sha512-QbleYZTMcgujAEyWGki8Lx6cXQqWkNtQlqf5c7NImlIp8bKW66bFpez/6EVatW7+p9WKBOEOVci/9W7WW70EZg==",
+			"peerDependencies": {
+				"leaflet": "^1.7.1",
+				"react": "^17.0.1",
+				"react-dom": "^17.0.1"
+			}
+		},
 		"node_modules/@restart/context": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -2274,6 +2325,11 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
 			"integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg=="
 		},
+		"node_modules/@types/geojson": {
+			"version": "7946.0.7",
+			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+			"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
+		},
 		"node_modules/@types/glob": {
 			"version": "7.1.3",
 			"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -2283,6 +2339,12 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/googlemaps": {
+			"version": "3.43.3",
+			"resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
+			"integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==",
+			"dev": true
+		},
 		"node_modules/@types/graceful-fs": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -2354,6 +2416,14 @@
 			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
 			"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
 		},
+		"node_modules/@types/leaflet": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.0.tgz",
+			"integrity": "sha512-ltv5jR+VjKSMtoDkxH61Rsbo0zLU7iqyOXpVPkAX4F+79fg2eymC7t0msWsfNaEZO1FGTIQATCCCQe+ijWoicg==",
+			"dependencies": {
+				"@types/geojson": "*"
+			}
+		},
 		"node_modules/@types/minimatch": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2399,6 +2469,16 @@
 				"csstype": "^3.0.2"
 			}
 		},
+		"node_modules/@types/react-places-autocomplete": {
+			"version": "7.2.6",
+			"resolved": "https://registry.npmjs.org/@types/react-places-autocomplete/-/react-places-autocomplete-7.2.6.tgz",
+			"integrity": "sha512-5cjtUHZ6ys4Jfqo3jWXeU3SGeloBNOpRy7Zj6ZOjhnveSBJmCQ8q3nhadUw3uhd8sScssxYsBkwojBXlN3vFww==",
+			"dev": true,
+			"dependencies": {
+				"@types/googlemaps": "*",
+				"@types/react": "*"
+			}
+		},
 		"node_modules/@types/react-router": {
 			"version": "5.1.13",
 			"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
@@ -7948,6 +8028,15 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/google-maps-react": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
+			"integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==",
+			"peerDependencies": {
+				"react": "~0.14.8 || ^15.0.0 || ^16.0.0",
+				"react-dom": "~0.14.8 || ^15.0.0 || ^16.0.0"
+			}
+		},
 		"node_modules/graceful-fs": {
 			"version": "4.2.6",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -10371,6 +10460,12 @@
 				"webpack-sources": "^1.1.0"
 			}
 		},
+		"node_modules/leaflet": {
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+			"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
+			"peer": true
+		},
 		"node_modules/leven": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -10484,6 +10579,11 @@
 			"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
 			"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
 		},
+		"node_modules/lodash.debounce": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+			"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+		},
 		"node_modules/lodash.memoize": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -13839,6 +13939,19 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
 			"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
 		},
+		"node_modules/react-leaflet": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.1.0.tgz",
+			"integrity": "sha512-kdZS8NYbYFPmkQr7zSDR2gkKGFeWvkxqoqcmZEckzHL4d5c85dJ2gbbqhaPDpmWWgaRw9O29uA/77qpKmK4mTQ==",
+			"dependencies": {
+				"@react-leaflet/core": "^1.0.2"
+			},
+			"peerDependencies": {
+				"leaflet": "^1.7.1",
+				"react": "^17.0.1",
+				"react-dom": "^17.0.1"
+			}
+		},
 		"node_modules/react-lifecycles-compat": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -13863,6 +13976,18 @@
 				"react-dom": ">=16.3.0"
 			}
 		},
+		"node_modules/react-places-autocomplete": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-7.3.0.tgz",
+			"integrity": "sha512-86wcHC69JATvWBnIS/yCsBHLtwzOGcnx3Ye94u74yTrz1jLRC/txkVDkf6rvC+Jq3zNe/tAg/W53x0EaH1ZPPw==",
+			"dependencies": {
+				"lodash.debounce": "^4.0.8",
+				"prop-types": "^15.5.8"
+			},
+			"peerDependencies": {
+				"react": ">=0.14.7"
+			}
+		},
 		"node_modules/react-refresh": {
 			"version": "0.8.3",
 			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -20380,6 +20505,14 @@
 				}
 			}
 		},
+		"@googlemaps/js-api-loader": {
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.11.1.tgz",
+			"integrity": "sha512-2ug4uBu0onRXTAo7Yxkay5N7pdNIz3XpTElMTLdCtEfQDxikbjeR6GS8atVhblX+ubFBNlXvDzz7VtuXv0vMRQ==",
+			"requires": {
+				"fast-deep-equal": "^3.1.3"
+			}
+		},
 		"@hapi/address": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -20880,6 +21013,33 @@
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
 			"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
 		},
+		"@react-google-maps/api": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.1.1.tgz",
+			"integrity": "sha512-Z/dcaDDfZD4DFnE1GhdHOIFHZ+VocEt6Ixe82f0f9tL/J0CZBQvfJ3V8RogY9fVraxdKIwnQx75U0O1JVqqBnw==",
+			"requires": {
+				"@googlemaps/js-api-loader": "1.11.1",
+				"@react-google-maps/infobox": "2.1.1",
+				"@react-google-maps/marker-clusterer": "2.1.1",
+				"invariant": "2.2.4"
+			}
+		},
+		"@react-google-maps/infobox": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.1.1.tgz",
+			"integrity": "sha512-x/+Td4Wsw+ziEcLjgQketCphuueLZ4vQLFkLrUBVzsHj4as4at79GsdVwoAdKIkBc5BDYJZw3ZGSr/SnWSObeg=="
+		},
+		"@react-google-maps/marker-clusterer": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.1.1.tgz",
+			"integrity": "sha512-LIqf1T2dVXRaf/gqk/7kEDpRvr1aQGlqOv/p5zwZus3qI6/3qK4jxNpc89gQ2WkCMrGwcI/fTQrnI55BZCxsLA=="
+		},
+		"@react-leaflet/core": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
+			"integrity": "sha512-QbleYZTMcgujAEyWGki8Lx6cXQqWkNtQlqf5c7NImlIp8bKW66bFpez/6EVatW7+p9WKBOEOVci/9W7WW70EZg==",
+			"requires": {}
+		},
 		"@restart/context": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -21207,6 +21367,11 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
 			"integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg=="
 		},
+		"@types/geojson": {
+			"version": "7946.0.7",
+			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+			"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
+		},
 		"@types/glob": {
 			"version": "7.1.3",
 			"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -21216,6 +21381,12 @@
 				"@types/node": "*"
 			}
 		},
+		"@types/googlemaps": {
+			"version": "3.43.3",
+			"resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
+			"integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==",
+			"dev": true
+		},
 		"@types/graceful-fs": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -21287,6 +21458,14 @@
 			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
 			"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
 		},
+		"@types/leaflet": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.0.tgz",
+			"integrity": "sha512-ltv5jR+VjKSMtoDkxH61Rsbo0zLU7iqyOXpVPkAX4F+79fg2eymC7t0msWsfNaEZO1FGTIQATCCCQe+ijWoicg==",
+			"requires": {
+				"@types/geojson": "*"
+			}
+		},
 		"@types/minimatch": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -21332,6 +21511,16 @@
 				"csstype": "^3.0.2"
 			}
 		},
+		"@types/react-places-autocomplete": {
+			"version": "7.2.6",
+			"resolved": "https://registry.npmjs.org/@types/react-places-autocomplete/-/react-places-autocomplete-7.2.6.tgz",
+			"integrity": "sha512-5cjtUHZ6ys4Jfqo3jWXeU3SGeloBNOpRy7Zj6ZOjhnveSBJmCQ8q3nhadUw3uhd8sScssxYsBkwojBXlN3vFww==",
+			"dev": true,
+			"requires": {
+				"@types/googlemaps": "*",
+				"@types/react": "*"
+			}
+		},
 		"@types/react-router": {
 			"version": "5.1.13",
 			"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
@@ -26042,6 +26231,12 @@
 				}
 			}
 		},
+		"google-maps-react": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
+			"integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==",
+			"requires": {}
+		},
 		"graceful-fs": {
 			"version": "4.2.6",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -28027,6 +28222,12 @@
 				"webpack-sources": "^1.1.0"
 			}
 		},
+		"leaflet": {
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+			"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
+			"peer": true
+		},
 		"leven": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -28115,6 +28316,11 @@
 			"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
 			"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
 		},
+		"lodash.debounce": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+			"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+		},
 		"lodash.memoize": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -30895,6 +31101,14 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
 			"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
 		},
+		"react-leaflet": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.1.0.tgz",
+			"integrity": "sha512-kdZS8NYbYFPmkQr7zSDR2gkKGFeWvkxqoqcmZEckzHL4d5c85dJ2gbbqhaPDpmWWgaRw9O29uA/77qpKmK4mTQ==",
+			"requires": {
+				"@react-leaflet/core": "^1.0.2"
+			}
+		},
 		"react-lifecycles-compat": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -30915,6 +31129,15 @@
 				"warning": "^4.0.3"
 			}
 		},
+		"react-places-autocomplete": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-7.3.0.tgz",
+			"integrity": "sha512-86wcHC69JATvWBnIS/yCsBHLtwzOGcnx3Ye94u74yTrz1jLRC/txkVDkf6rvC+Jq3zNe/tAg/W53x0EaH1ZPPw==",
+			"requires": {
+				"lodash.debounce": "^4.0.8",
+				"prop-types": "^15.5.8"
+			}
+		},
 		"react-refresh": {
 			"version": "0.8.3",
 			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

package.json

@@ -26,6 +26,7 @@
 		"react-bootstrap": "^1.5.2",
 		"react-dom": "^17.0.2",
 		"react-leaflet": "^3.1.0",
+		"react-places-autocomplete": "^7.3.0",
 		"react-router-dom": "^5.2.0",
 		"react-scripts": "4.0.3",
 		"typescript": "^4.2.4",
@@ -54,5 +55,8 @@
 			"last 1 firefox version",
 			"last 1 safari version"
 		]
+	},
+	"devDependencies": {
+		"@types/react-places-autocomplete": "^7.2.6"
 	}
 }

public/index.html

@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+	<head>
-    <meta charset="utf-8" />
+		<meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+		<meta name="theme-color" content="#000000" />
-    <meta
+		<meta
-      name="description"
+			name="description"
-      content="Web site created using create-react-app"
+			content="Web site created using create-react-app"
-    />
+		/>
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+		<!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+		<!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+		<title>React App</title>
-  </head>
+	</head>
-  <body>
+	<body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI&libraries=places"></script>
-    <div id="root"></div>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
-    <!--
+		<div id="root"></div>
+		<!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +40,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+	</body>
 </html>

src/api/google.ts

@@ -8,9 +8,9 @@ export async function searchForPlaces(query: string) {
 	url.searchParams.set('input', query);
 	url.searchParams.set('inputtype', 'textquery');
 	url.searchParams.set('fields', 'place_id,name,formatted_address');
-
+	console.log(url.toString());
 	let res = await fetch(url.toString(), { mode: 'no-cors' });
-	let json = await res.json();
+	let json = await res.text();
 
 	return json;
 }

src/components/CreatePool.tsx

@@ -8,6 +8,12 @@ import { searchForPlaces } from '../api/google';
 import { makeAPIPostCall, makeAPIGetCall } from '../api/utils';
 import { useHistory } from 'react-router-dom';
 
+import { makeAPIPostCall } from '../api/utils';
+import PlacesAutocomplete, {
+	geocodeByAddress,
+	getLatLng,
+} from 'react-places-autocomplete';
+
 const useStyles = makeStyles((theme) => ({
 	root: {
 		maxWidth: 345,
@@ -32,8 +38,20 @@ const CreatePool = () => {
 	const classes = useStyles();
 	const [group, setGroup] = useState('');
 	const [groups, setGroups] = useState<Carpool.Group[]>([]);
+	const [address, setAddress] = useState('');
+	const handleChange = (address: string) => {
+		setAddress(address);
+	};
 
+	const handleSelect = (address: string) => {
+		setAddress(address);
+		// geocodeByAddress(address)
+		// 	.then((results) => getLatLng(results[0]))
+		// 	.then((latLng) => console.log('Success', latLng))
+		// 	.catch((error) => console.error('Error', error));
+	};
 	const onClick = () => {
+		console.log(address);
 		makeAPIPostCall('/pools/', {
 			title,
 			description,
@@ -43,6 +61,7 @@ const CreatePool = () => {
 			direction,
 			type,
 			group_id: group,
+			address,
 		}).then((res) => {
 			handleCallback(res.data);
 		});
@@ -199,18 +218,67 @@ const CreatePool = () => {
 						>
 							Search
 						</button>
-					</div>
+							<PlacesAutocomplete
-					<Button
+								value={address}
-						variant="contained"
+								onChange={handleChange}
-						color="primary"
+								onSelect={handleSelect}
-						className={classes.button}
+							>
-						onClick={onClick}
+								{({
-						startIcon={<CloudUploadIcon />}
+									getInputProps,
-					>
+									suggestions,
-						Submit
+									getSuggestionItemProps,
-					</Button>
+									loading,
-				</CardContent>
+								}) => (
-			</Card>
+									<div>
+										<label className="" htmlFor="address">
+											Address:
+										</label>
+										<input
+											name="address"
+											id="address"
+											{...getInputProps({
+												placeholder: 'Search Places ...',
+												className: 'location-search-input form-control',
+											})}
+										/>
+										<div className="autocomplete-dropdown-container">
+											{loading && <div>Loading...</div>}
+											{suggestions.map((suggestion) => {
+												const className = suggestion.active
+													? 'suggestion-item--active'
+													: 'suggestion-item';
+												// inline style for demonstration purpose
+												const style = suggestion.active
+													? { backgroundColor: '#fafafa', cursor: 'pointer' }
+													: { backgroundColor: '#ffffff', cursor: 'pointer' };
+												return (
+													<div
+														{...getSuggestionItemProps(suggestion, {
+															className,
+															style,
+														})}
+													>
+														<span>{suggestion.description}</span>
+													</div>
+												);
+											})}
+										</div>
+									</div>
+								)}
+							</PlacesAutocomplete>
+						</div>
+						<Button
+							variant="contained"
+							color="primary"
+							className={classes.button}
+							onClick={onClick}
+							startIcon={<CloudUploadIcon />}
+						>
+							Submit
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
 		</div>
 	);
 };

src/components/Home.tsx

@@ -5,6 +5,7 @@ import AuthenticationContext from './AuthenticationContext';
 
 export default function Home() {
 	const { user, isLoggedIn } = useContext(AuthenticationContext);
+
 	return (
 		<div
 			style={{
@@ -40,10 +41,14 @@ export default function Home() {
 						<br />
 						<div className="text-center">
 							<img
+								id="logo"
 								alt="Carpool App"
+								onMouseOver={(e) => (e.currentTarget.src = 'images/logo.gif')}
+								onMouseOut={(e) => (e.currentTarget.src = 'images/logo.png')}
 								className="text-center img-fluid"
 								src="images/logo.png"
-								width="350px"
+								width="500px"
+								height="750px"
 							/>
 						</div>
 						<br />