From ab4841b680c271f3a42deb6acb1a3523ca401016 Mon Sep 17 00:00:00 2001
From: harduf <harduf93@gmail.com>
Date: Sat, 18 Jun 2022 00:02:59 +0300
Subject: [PATCH] added google search box

---
 package-lock.json                           | 32 ++++++-
 package.json                                |  4 +-
 public/index.html                           |  1 +
 public/locales/en/translation.json          |  3 +-
 public/locales/he/translation.json          |  3 +-
 src/components/molecules/LocationSelect.tsx | 98 +++++++++++++++++++--
 src/components/molecules/MapDialog.tsx      |  3 +-
 7 files changed, 133 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c3e9931d..caaaceab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "query-string": "^7.0.1",
         "react": "^17.0.2",
         "react-async-loader": "^0.1.2",
+        "react-cool-onclickoutside": "^1.7.0",
         "react-dom": "^17.0.2",
         "react-i18next": "^11.11.1",
         "react-leaflet": "3.1.0",
@@ -41,7 +42,8 @@
         "react-share": "^4.4.0",
         "recharts": "^2.0.9",
         "tinycolor2": "^1.4.2",
-        "typescript": "^4.3.5"
+        "typescript": "^4.3.5",
+        "use-places-autocomplete": "^4.0.0"
       },
       "devDependencies": {
         "@storybook/addon-actions": "^6.3.2",
@@ -25742,6 +25744,14 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-cool-onclickoutside": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/react-cool-onclickoutside/-/react-cool-onclickoutside-1.7.0.tgz",
+      "integrity": "sha512-HVZK2155Unee+enpoHKyYP2UdQK69thw90XAOUCjvJBcgRSgfRPgWWt/W1dYzoGp3+nleAa8SJxF1d4FMA4Qmw==",
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -30631,6 +30641,14 @@
         }
       }
     },
+    "node_modules/use-places-autocomplete": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/use-places-autocomplete/-/use-places-autocomplete-4.0.0.tgz",
+      "integrity": "sha512-w8jdm1iT3WXN0DPXtgyccJoBlAk/UetCMg466B2pBiWNBfvAIxdRoU6Gt4CzW11rWWuzpqnMG5hLxUOKSZBSgw==",
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -52289,6 +52307,12 @@
       "dev": true,
       "requires": {}
     },
+    "react-cool-onclickoutside": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/react-cool-onclickoutside/-/react-cool-onclickoutside-1.7.0.tgz",
+      "integrity": "sha512-HVZK2155Unee+enpoHKyYP2UdQK69thw90XAOUCjvJBcgRSgfRPgWWt/W1dYzoGp3+nleAa8SJxF1d4FMA4Qmw==",
+      "requires": {}
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -56054,6 +56078,12 @@
         "use-isomorphic-layout-effect": "^1.0.0"
       }
     },
+    "use-places-autocomplete": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/use-places-autocomplete/-/use-places-autocomplete-4.0.0.tgz",
+      "integrity": "sha512-w8jdm1iT3WXN0DPXtgyccJoBlAk/UetCMg466B2pBiWNBfvAIxdRoU6Gt4CzW11rWWuzpqnMG5hLxUOKSZBSgw==",
+      "requires": {}
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
diff --git a/package.json b/package.json
index b8c12fef..25ed9a3d 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "query-string": "^7.0.1",
     "react": "^17.0.2",
     "react-async-loader": "^0.1.2",
+    "react-cool-onclickoutside": "^1.7.0",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.11.1",
     "react-leaflet": "3.1.0",
@@ -36,7 +37,8 @@
     "react-share": "^4.4.0",
     "recharts": "^2.0.9",
     "tinycolor2": "^1.4.2",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "use-places-autocomplete": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/public/index.html b/public/index.html
index 0c41402e..b3b0a4dd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_B16MmHv7mfQNKSanibF_S2ofJgI6Pc0&libraries=places"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 20093528..ae6f1dc1 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -130,5 +130,6 @@
     "street": "street"
   },
   "locationIndicator": "(Chosen Section Search Result)",
-  "cityAndStreetIndicator": "(Chosen City And Street Search Result)"
+  "cityAndStreetIndicator": "(Chosen City And Street Search Result)",
+  "googleSearch": "Search Google maps"
 }
diff --git a/public/locales/he/translation.json b/public/locales/he/translation.json
index c1733129..63b1d6ef 100644
--- a/public/locales/he/translation.json
+++ b/public/locales/he/translation.json
@@ -144,5 +144,6 @@
     "street": "רחוב"
   },
   "locationIndicator": "(תוצאות חיפוש מקטע)",
-  "cityAndStreetIndicator": "(תוצאות חיפוש עיר ורחוב)"
+  "cityAndStreetIndicator": "(תוצאות חיפוש עיר ורחוב)",
+  "googleSearch": "חיפוש במפות Google"
 }
diff --git a/src/components/molecules/LocationSelect.tsx b/src/components/molecules/LocationSelect.tsx
index 8e563a11..344ffac2 100644
--- a/src/components/molecules/LocationSelect.tsx
+++ b/src/components/molecules/LocationSelect.tsx
@@ -1,9 +1,95 @@
-import { FC, memo, useState } from 'react';
+import { FC, useState } from 'react';
 import { useMapEvents } from 'react-leaflet';
 import { IPoint } from 'models/Point';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from '@material-ui/core';
 import { Marker } from 'components/atoms';
+import usePlacesAutocomplete, { getGeocode, getLatLng } from 'use-places-autocomplete';
+import useOnclickOutside from 'react-cool-onclickoutside';
 import Map from './map/Map';
 
+const useStyles = makeStyles({
+  suggestionSingle: {
+    padding: 5,
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: '#c4c4c4',
+    },
+  },
+  searchArea: {
+    position: 'absolute',
+    top: 80,
+    right: 30,
+    zIndex: 500,
+  },
+  suggestionsDiv: {
+    position: 'absolute',
+    minWidth: '100%',
+    backgroundColor: 'white',
+  },
+});
+
+export const PlacesAutocomplete = ({ onLocationChange }: { onLocationChange: (val: IPoint) => void }) => {
+  const {
+    ready,
+    value,
+    suggestions: { status, data },
+    setValue,
+    clearSuggestions,
+  } = usePlacesAutocomplete({
+    requestOptions: {},
+    debounce: 300,
+  });
+  const ref = useOnclickOutside(() => {
+    clearSuggestions();
+  });
+
+  const { t } = useTranslation();
+
+  const classes = useStyles();
+
+  const handleInput = (e: any) => {
+    setValue(e.target.value);
+  };
+
+  const handleSelect = (suggestion: any) => () => {
+    setValue(suggestion.description, false);
+    clearSuggestions();
+
+    getGeocode({ address: suggestion.description }).then((results) => {
+      const { lat: latitude, lng: longitude } = getLatLng(results[0]);
+      onLocationChange({ longitude, latitude });
+    });
+  };
+
+  const renderSuggestions = () =>
+    data.slice(0, 5).map((suggestion) => {
+      const {
+        place_id,
+        structured_formatting: { main_text, secondary_text },
+      } = suggestion;
+
+      return (
+        <div className={classes.suggestionSingle} key={place_id} onClick={handleSelect(suggestion)}>
+          <strong>{main_text}</strong> <small>{secondary_text}</small>
+        </div>
+      );
+    });
+
+  return (
+    <div ref={ref} className={classes.searchArea}>
+      <input
+        style={{ padding: 5 }}
+        value={value}
+        onChange={handleInput}
+        disabled={!ready}
+        placeholder={t('googleSearch')}
+      />
+      {status === 'OK' && <div className={classes.suggestionsDiv}>{renderSuggestions()}</div>}
+    </div>
+  );
+};
+
 interface ILocation {
   onLocationChange: (location: IPoint) => void;
 }
@@ -13,25 +99,25 @@ const LocationPicker: FC<ILocation> = ({ onLocationChange }) => {
 
   useMapEvents({
     click: (event) => {
-      const {latlng: { lng, lat }} = event;
+      const {
+        latlng: { lng, lat },
+      } = event;
       setPosition({ longitude: lng, latitude: lat });
       onLocationChange({ longitude: lng, latitude: lat });
     },
   });
 
-  return position === null ? null : <Marker markerdata={position}/>
+  return position === null ? null : <Marker markerdata={position} />;
 };
 
 interface IProps {
   onLocationChange: (location: IPoint) => void;
 }
 
-const LocationSelect: FC<IProps> = ({ onLocationChange }) => {
+export const LocationSelect: FC<IProps> = ({ onLocationChange }) => {
   return (
     <Map>
       <LocationPicker onLocationChange={onLocationChange} />
     </Map>
   );
 };
-
-export default memo(LocationSelect);
diff --git a/src/components/molecules/MapDialog.tsx b/src/components/molecules/MapDialog.tsx
index 8ef0f53c..b1632820 100644
--- a/src/components/molecules/MapDialog.tsx
+++ b/src/components/molecules/MapDialog.tsx
@@ -4,7 +4,7 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { Box, DialogActions, TextField } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { Dialog, Button, Typography } from 'components/atoms';
-import LocationSelect from 'components/molecules/LocationSelect';
+import { LocationSelect, PlacesAutocomplete } from 'components/molecules/LocationSelect';
 import { IPoint } from 'models/Point';
 import { useStore } from 'store/storeConfig';
 import { fetchStreetsByCity } from 'services/getCitiesAndStreets.service';
@@ -115,6 +115,7 @@ const MapDialog: FC<IProps> = ({
       <Box>
         <Box display="flex" flexDirection="column" height="60vh">
           <Box display="contents">
+            <PlacesAutocomplete onLocationChange={onLocationChange} />
             <LocationSelect onLocationChange={onLocationChange} />
           </Box>
           <div className={classes.chosenSection}>