added google search box

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",

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.

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"
 }

public/locales/he/translation.json

@@ -144,5 +144,6 @@
     "street": "רחוב"
   },
   "locationIndicator": "(תוצאות חיפוש מקטע)",
-  "cityAndStreetIndicator": "(תוצאות חיפוש עיר ורחוב)"
+  "cityAndStreetIndicator": "(תוצאות חיפוש עיר ורחוב)",
+  "googleSearch": "חיפוש במפות Google"
 }

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);

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}>