From 76f2cd4c4a103c07717d2477912fc2623555ea3a Mon Sep 17 00:00:00 2001 From: Joshua Hsueh Date: Sun, 11 Apr 2021 01:31:57 -0400 Subject: [PATCH 1/4] feat: working autocomplete suggestions places --- package-lock.json | 223 + package.json | 5 + public/index.html | 41 +- src/api/google.ts | 4 +- src/components/CreatePool.tsx | 67 +- yarn.lock | 17636 ++++++++++++++++---------------- 6 files changed, 9349 insertions(+), 8627 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1d70a11..ebad3d1 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 8d1d440..52d2df8 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,14 @@ "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", @@ -51,5 +53,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/react-places-autocomplete": "^7.2.6" } } diff --git a/public/index.html b/public/index.html index aa069f2..6139d01 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,21 @@ - - - - - - - - - - - React App - - - -
- - + diff --git a/src/api/google.ts b/src/api/google.ts index 44f2167..0ca502e 100644 --- a/src/api/google.ts +++ b/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; } diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx index 11b3902..10ff902 100644 --- a/src/components/CreatePool.tsx +++ b/src/components/CreatePool.tsx @@ -6,7 +6,10 @@ import CloudUploadIcon from '@material-ui/icons/CloudUpload'; import { useEffect, useState } from 'react'; import { searchForPlaces } from '../api/google'; import { makeAPIPostCall } from '../api/utils'; - +import PlacesAutocomplete, { + geocodeByAddress, + getLatLng, +} from 'react-places-autocomplete'; const useStyles = makeStyles((theme) => ({ root: { maxWidth: 345, @@ -29,8 +32,20 @@ const CreatePool = () => { const [description, setDescription] = useState(''); const classes = useStyles(); const [group, setGroup] = useState(''); + 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, @@ -40,6 +55,7 @@ const CreatePool = () => { direction, type, group_id: group, + address, }); }; useEffect(() => {}, []); @@ -154,7 +170,7 @@ const CreatePool = () => { >
-