Directions: Add my position to autocomplete (#802)

src/components/Directions/DirectionsAutocomplete.tsx

@@ -9,7 +9,12 @@ import {
 } from '../SearchBox/options/geocoder';
 import { getStarsOptions } from '../SearchBox/options/stars';
 import styled from '@emotion/styled';
-import { Autocomplete, InputAdornment, TextField } from '@mui/material';
+import {
+  Autocomplete,
+  InputAdornment,
+  TextField,
+  Tooltip,
+} from '@mui/material';
 import { useMapCenter } from '../SearchBox/utils';
 import { useUserThemeContext } from '../../helpers/theme';
 import { renderOptionFactory } from '../SearchBox/renderOptionFactory';
@@ -22,6 +27,15 @@ import { getGlobalMap } from '../../services/mapStorage';
 import maplibregl, { LngLatLike, PointLike } from 'maplibre-gl';
 import ReactDOMServer from 'react-dom/server';
 import { AlphabeticalMarker } from './TextMarker';
+import MyLocationIcon from '@mui/icons-material/MyLocation';
+import { DotLoader, useIsClient } from '../helpers';
+import { useSnackbar } from '../utils/SnackbarContext';
+const DotLoaderContainer = styled.div`
+  font-size: 16px;
+  right: 6px;
+  top: -4px;
+  position: relative;
+`;
 
 const StyledTextField = styled(TextField)`
   input::placeholder {
@@ -37,8 +51,13 @@ const DirectionsInput = ({
   onFocus,
   onBlur,
   pointIndex,
+  onOptionChange,
 }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const { InputLabelProps, InputProps, ...restParams } = params;
+  const isClient = useIsClient();
+  const { showToast } = useSnackbar();
 
   useEffect(() => {
     // @ts-ignore
@@ -51,6 +70,30 @@ const DirectionsInput = ({
   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     onFocus();
     e.target.select();
+    setIsFocused(true);
+  };
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    onBlur(e);
+    setIsFocused(false);
+  };
+
+  function handleSuccess(position) {
+    const latitude = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    onOptionChange(null, getCoordsOption([longitude, latitude], 'My location'));
+    setIsLoading(false);
+  }
+  const handleError = (_error) => {
+    setIsLoading(false);
+    showToast("Sorry, we couldn't find your location", 'error');
+  };
+
+  const handleGetMyPosition = () => {
+    setIsLoading(true);
+    navigator.geolocation.getCurrentPosition(handleSuccess, handleError, {
+      timeout: 10000,
+    });
   };
 
   return (
@@ -68,11 +111,28 @@ const DirectionsInput = ({
             <AlphabeticalMarker hasPin={false} index={pointIndex} height={32} />
           </InputAdornment>
         ),
+        endAdornment:
+          isClient && isFocused && navigator?.geolocation ? (
+            isLoading ? (
+              <DotLoaderContainer>
+                <DotLoader />
+              </DotLoaderContainer>
+            ) : (
+              <Tooltip title="Get my location">
+                <MyLocationIcon
+                  color="secondary"
+                  sx={{ cursor: 'pointer' }}
+                  onClick={handleGetMyPosition}
+                />
+              </Tooltip>
+            )
+          ) : undefined,
+        style: { paddingRight: 12 },
       }}
       placeholder={label}
       onChange={onChange}
       onFocus={handleFocus}
-      onBlur={onBlur}
+      onBlur={handleBlur}
     />
   );
 };
@@ -257,6 +317,7 @@ export const DirectionsAutocomplete = ({
             onFocus={onInputFocus}
             onBlur={handleBlur}
             pointIndex={pointIndex}
+            onOptionChange={onChange}
           />
         )}
         renderOption={renderOptionFactory(