From 3363dffe89970236d182bf3ae1666b79de4f3a93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= <jvaclavik@gmail.com>
Date: Mon, 9 Dec 2024 07:31:29 +0100
Subject: [PATCH] Directions: Move from/to to array of points

---
 .../Directions/DirectionsAutocomplete.tsx     |  44 +++---
 src/components/Directions/DirectionsBox.tsx   |   3 +-
 .../Directions/DirectionsContext.tsx          |  17 +--
 src/components/Directions/DirectionsForm.tsx  | 138 +++++++++++++-----
 src/components/Directions/ModeToggler.tsx     |   6 +-
 src/components/Directions/Result.tsx          |   9 +-
 src/components/Directions/useGetOnSubmit.tsx  |  36 +++--
 .../RouteList/ClimbingRouteTableRow.tsx       |   1 +
 .../FeaturePanel/Climbing/utils/array.ts      |   7 +
 .../SearchBox/renderOptionFactory.tsx         |   1 -
 src/helpers/GlobalStyle.tsx                   |   4 +
 11 files changed, 175 insertions(+), 91 deletions(-)

diff --git a/src/components/Directions/DirectionsAutocomplete.tsx b/src/components/Directions/DirectionsAutocomplete.tsx
index 5522d05bd..46e4effe6 100644
--- a/src/components/Directions/DirectionsAutocomplete.tsx
+++ b/src/components/Directions/DirectionsAutocomplete.tsx
@@ -14,6 +14,7 @@ import {
   InputAdornment,
   TextField,
   Tooltip,
+  useTheme,
 } from '@mui/material';
 import { useMapCenter } from '../SearchBox/utils';
 import { useUserThemeContext } from '../../helpers/theme';
@@ -30,8 +31,9 @@ import { AlphabeticalMarker } from './TextMarker';
 import MyLocationIcon from '@mui/icons-material/MyLocation';
 import { DotLoader, useIsClient } from '../helpers';
 import { useSnackbar } from '../utils/SnackbarContext';
-import { useGetOnSubmitFactory } from './useGetOnSubmit';
+import { useGetOnSubmitFactory, useUpdatePoint } from './useGetOnSubmit';
 import { useDirectionsContext } from './DirectionsContext';
+import { removeElementOnIndex } from '../FeaturePanel/Climbing/utils/array';
 const DotLoaderContainer = styled.div`
   font-size: 16px;
   right: 6px;
@@ -60,6 +62,7 @@ const DirectionsInput = ({
   const { InputLabelProps, InputProps, ...restParams } = params;
   const isClient = useIsClient();
   const { showToast } = useSnackbar();
+  const theme = useTheme();
 
   useEffect(() => {
     // @ts-ignore
@@ -171,15 +174,16 @@ const Row = styled.div`
 `;
 
 const useInputMapClickOverride = (
-  setValue: (value: Option) => void,
+  pointIndex: number,
   setInputValue: (value: string) => void,
   selectedOptionInputValue: React.MutableRefObject<string | null>,
 ) => {
   const { mapClickOverrideRef } = useMapStateContext();
   const previousBehaviourRef = useRef<MapClickOverride>();
+  const updatePoint = useUpdatePoint();
 
   const mapClickCallback = (coords: LonLat, label: string) => {
-    setValue(getCoordsOption(coords, label));
+    updatePoint(pointIndex, getCoordsOption(coords, label));
     setInputValue(label);
     selectedOptionInputValue.current = label;
 
@@ -203,16 +207,10 @@ const useInputMapClickOverride = (
 type Props = {
   label: string;
   value: Option;
-  setValue: (value: Option) => void;
   pointIndex: number;
 };
 
-export const DirectionsAutocomplete = ({
-  label,
-  value,
-  setValue,
-  pointIndex,
-}: Props) => {
+export const DirectionsAutocomplete = ({ label, value, pointIndex }: Props) => {
   const autocompleteRef = useRef();
   const { inputValue, setInputValue } = useInputValueState();
   const selectedOptionInputValue = useRef<string | null>(null);
@@ -220,6 +218,7 @@ export const DirectionsAutocomplete = ({
   const { currentTheme } = useUserThemeContext();
   const { userSettings } = useUserSettingsContext();
   const { isImperial } = userSettings;
+  const updatePoint = useUpdatePoint();
 
   const ALPHABETICAL_MARKER = useMemo(() => {
     let svgElement;
@@ -239,7 +238,9 @@ export const DirectionsAutocomplete = ({
   }, [pointIndex]);
 
   const markerRef = useRef<maplibregl.Marker>();
-  const { from, to, mode, setResult, setLoading } = useDirectionsContext();
+  const { points, mode, setResult, setLoading, setPoints } =
+    useDirectionsContext();
+  const submitFactory = useGetOnSubmitFactory(setResult, setLoading);
 
   useEffect(() => {
     const map = getGlobalMap();
@@ -254,20 +255,15 @@ export const DirectionsAutocomplete = ({
   }, [ALPHABETICAL_MARKER, value]);
 
   const handleUpdate = (coordsOption: Option) => {
-    if (pointIndex === 0) {
-      submitFactory(coordsOption, to, mode);
-    }
-    if (pointIndex === 1) {
-      submitFactory(from, coordsOption, mode);
-    }
+    const newPoints = updatePoint(pointIndex, coordsOption);
+    submitFactory(newPoints, mode);
   };
 
-  const submitFactory = useGetOnSubmitFactory(setResult, setLoading);
   const onDragEnd = () => {
     const lngLat = markerRef.current?.getLngLat();
     if (lngLat) {
       const coordsOption = getCoordsOption([lngLat.lng, lngLat.lat]);
-      setValue(coordsOption);
+      updatePoint(pointIndex, coordsOption);
       handleUpdate(coordsOption);
     }
   };
@@ -279,13 +275,14 @@ export const DirectionsAutocomplete = ({
   const onChange = (_: unknown, option: Option) => {
     console.log('selected', option); // eslint-disable-line no-console
     setInputValue(getOptionLabel(option));
-    setValue(option);
+    updatePoint(pointIndex, option);
+
     selectedOptionInputValue.current = getOptionLabel(option);
     handleUpdate(option);
   };
 
   const { onInputFocus, onInputBlur } = useInputMapClickOverride(
-    setValue,
+    pointIndex,
     setInputValue,
     selectedOptionInputValue,
   );
@@ -296,8 +293,8 @@ export const DirectionsAutocomplete = ({
     if (selectedOptionInputValue.current !== inputValue) {
       if (options.length > 0 && inputValue) {
         onChange(null, options[0]);
-      } else {
-        setValue(null);
+      } else if (points) {
+        setPoints(removeElementOnIndex(points, pointIndex));
       }
     }
   };
@@ -321,6 +318,7 @@ export const DirectionsAutocomplete = ({
         getOptionKey={(option) => JSON.stringify(option)}
         onChange={onChange}
         autoComplete
+        noOptionsText=""
         disableClearable
         autoHighlight
         clearOnEscape
diff --git a/src/components/Directions/DirectionsBox.tsx b/src/components/Directions/DirectionsBox.tsx
index bf1612103..6a605545c 100644
--- a/src/components/Directions/DirectionsBox.tsx
+++ b/src/components/Directions/DirectionsBox.tsx
@@ -15,9 +15,10 @@ const Wrapper = styled(Stack)<{ $isMobileMode: boolean }>`
   right: 8px;
   z-index: 1001; // over the LayerSwitcherButton
   max-height: calc(100vh - 16px);
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12);
 
   @media ${isTabletResolution} {
-    max-width: 340px;
+    max-width: 394px;
   }
 `;
 
diff --git a/src/components/Directions/DirectionsContext.tsx b/src/components/Directions/DirectionsContext.tsx
index be6e91c43..2528d1796 100644
--- a/src/components/Directions/DirectionsContext.tsx
+++ b/src/components/Directions/DirectionsContext.tsx
@@ -2,19 +2,15 @@ import React, { createContext, useContext, useState } from 'react';
 import { Profile, RoutingResult } from './routing/types';
 import { Option } from '../SearchBox/types';
 
-type CragViewLayout = 'vertical' | 'horizontal' | 'auto';
-
 type DirectionsContextType = {
   loading: boolean;
   setLoading: (loading: boolean) => void;
   mode: Profile;
   setMode: (mode: Profile) => void;
-  from: Option;
-  setFrom: (from: Option) => void;
-  to: Option;
-  setTo: (to: Option) => void;
   result: RoutingResult;
   setResult: (result: RoutingResult) => void;
+  points: Array<Option>;
+  setPoints: (points: Array<Option>) => void;
 };
 
 export const DirectionsContext =
@@ -23,21 +19,18 @@ export const DirectionsContext =
 export const DirectionsProvider: React.FC = ({ children }) => {
   const [loading, setLoading] = useState(false);
   const [mode, setMode] = useState<Profile>('car');
-  const [from, setFrom] = useState<Option>();
-  const [to, setTo] = useState<Option>();
   const [result, setResult] = useState<RoutingResult>(null);
+  const [points, setPoints] = useState<Array<Option>>([]);
 
   const value: DirectionsContextType = {
     loading,
     setLoading,
     mode,
     setMode,
-    from,
-    setFrom,
-    to,
-    setTo,
     result,
     setResult,
+    points,
+    setPoints,
   };
   return (
     <DirectionsContext.Provider value={value}>
diff --git a/src/components/Directions/DirectionsForm.tsx b/src/components/Directions/DirectionsForm.tsx
index 62bdc96e3..430365cc9 100644
--- a/src/components/Directions/DirectionsForm.tsx
+++ b/src/components/Directions/DirectionsForm.tsx
@@ -1,9 +1,9 @@
 import { Option } from '../SearchBox/types';
 import { RoutingResult } from './routing/types';
 import { CloseButton } from './helpers';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { StyledPaper } from './Result';
-import { Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { ModeToggler } from './ModeToggler';
 import { DirectionsAutocomplete } from './DirectionsAutocomplete';
 import { t } from '../../services/intl';
@@ -12,7 +12,11 @@ import SearchIcon from '@mui/icons-material/Search';
 import { getCoordsOption } from '../SearchBox/options/coords';
 import { useMapStateContext } from '../utils/MapStateContext';
 import { useDirectionsContext } from './DirectionsContext';
-import { useGetOnSubmitFactory, useReactToUrl } from './useGetOnSubmit';
+import {
+  useGetOnSubmitFactory,
+  useReactToUrl,
+  useUpdatePoint,
+} from './useGetOnSubmit';
 
 type Props = {
   setResult: (result: RoutingResult) => void;
@@ -20,38 +24,93 @@ type Props = {
 };
 
 const useGlobalMapClickOverride = (
-  from: Option,
-  setFrom: (value: Option) => void,
-  setTo: (value: Option) => void,
+  points: Array<Option>,
+  setPoints: (points: Array<Option>) => void,
 ) => {
-  const { setResult, setLoading, to, mode } = useDirectionsContext();
+  const { setResult, setLoading, mode } = useDirectionsContext();
   const submitFactory = useGetOnSubmitFactory(setResult, setLoading);
+  const updatePoint = useUpdatePoint();
 
   const { mapClickOverrideRef } = useMapStateContext();
   useEffect(() => {
     mapClickOverrideRef.current = (coords, label) => {
-      const coordinates = getCoordsOption(coords, label);
-      if (!from) {
-        submitFactory(coordinates, to, mode);
-        setFrom(coordinates);
-      } else {
-        submitFactory(from, coordinates, mode);
-        setTo(coordinates);
+      if (points) {
+        const coordinates = getCoordsOption(coords, label);
+        if (!points[0]) {
+          const newPoints = updatePoint(0, coordinates);
+          submitFactory(newPoints, mode);
+        } else {
+          const newPoints = updatePoint(1, coordinates);
+          submitFactory(newPoints, mode);
+        }
       }
     };
 
     return () => {
       mapClickOverrideRef.current = undefined;
     };
-  }, [from, mapClickOverrideRef, mode, setFrom, setTo, submitFactory, to]);
+  }, [
+    mapClickOverrideRef,
+    mode,
+    points,
+    setPoints,
+    submitFactory,
+    updatePoint,
+  ]);
+};
+
+type InputItem = {
+  value: Option;
+  pointIndex: number;
+  label: string;
 };
 
 export const DirectionsForm = ({ setResult, hideForm }: Props) => {
-  const { loading, setLoading, mode, setMode, from, setFrom, to, setTo } =
+  const defaultFrom = {
+    value: null,
+    pointIndex: 0,
+    label: t('directions.form.start_or_click'),
+  };
+
+  const defaultTo = useMemo(
+    () => ({
+      value: null,
+      pointIndex: 1,
+      label: t('directions.form.destination'),
+    }),
+    [],
+  );
+
+  const { loading, setLoading, mode, setMode, points, setPoints } =
     useDirectionsContext();
 
-  useGlobalMapClickOverride(from, setFrom, setTo);
-  useReactToUrl(setMode, setFrom, setTo, setResult);
+  const [inputs, setInputs] = useState<Array<InputItem>>([
+    defaultFrom,
+    defaultTo,
+  ]);
+
+  useEffect(() => {
+    const newPoints =
+      points?.map((point, index) => ({
+        value: point,
+        pointIndex: index,
+        label: t(
+          index === 0
+            ? 'directions.form.start_or_click'
+            : 'directions.form.destination',
+        ),
+      })) ?? [];
+
+    if (points?.length === 1) {
+      setInputs([...newPoints, defaultTo]);
+    }
+    if (points?.length >= 2) {
+      setInputs(newPoints);
+    }
+  }, [defaultTo, points]);
+
+  useGlobalMapClickOverride(points, setPoints);
+  useReactToUrl(setMode, setPoints, setResult);
 
   const onSubmitFactory = useGetOnSubmitFactory(setResult, setLoading);
 
@@ -61,31 +120,36 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
 
   return (
     <StyledPaper elevation={3}>
-      <Stack direction="row" spacing={1} mb={2} alignItems="center">
+      <Stack
+        direction="row"
+        spacing={1}
+        mb={2}
+        alignItems="center"
+        justifyContent="space-between"
+      >
         <ModeToggler
           value={mode}
           setMode={setMode}
-          onChange={(newMode) => onSubmitFactory(from, to, newMode)}
+          onChange={(newMode) => onSubmitFactory(points, newMode)}
         />
-        <div style={{ flex: 1 }} />
-        <div>
-          <CloseButton />
-        </div>
+        <CloseButton />
       </Stack>
 
       <Stack spacing={1} mb={3}>
-        <DirectionsAutocomplete
-          value={from}
-          setValue={setFrom}
-          label={t('directions.form.start_or_click')}
-          pointIndex={0}
-        />
-        <DirectionsAutocomplete
-          value={to}
-          setValue={setTo}
-          label={t('directions.form.destination')}
-          pointIndex={1}
-        />
+        {inputs.map((item, index) => {
+          const { value, label, pointIndex } = item;
+          return (
+            <Box sx={{ position: 'relative' }} key={`input-${pointIndex}`}>
+              <Stack direction="row" alignItems="center">
+                <DirectionsAutocomplete
+                  value={value}
+                  label={label}
+                  pointIndex={index}
+                />
+              </Stack>
+            </Box>
+          );
+        })}
       </Stack>
 
       <LoadingButton
@@ -94,7 +158,7 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
         variant="contained"
         fullWidth
         startIcon={<SearchIcon />}
-        onClick={() => onSubmitFactory(from, to, mode)}
+        onClick={() => onSubmitFactory(points, mode)}
       >
         {t('directions.get_directions')}
       </LoadingButton>
diff --git a/src/components/Directions/ModeToggler.tsx b/src/components/Directions/ModeToggler.tsx
index 8583b8d67..6480017a5 100644
--- a/src/components/Directions/ModeToggler.tsx
+++ b/src/components/Directions/ModeToggler.tsx
@@ -1,4 +1,4 @@
-import { ToggleButton } from '@mui/material';
+import { Stack, ToggleButton } from '@mui/material';
 import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
 import DirectionsBikeIcon from '@mui/icons-material/DirectionsBike';
 import DirectionsWalkIcon from '@mui/icons-material/DirectionsWalk';
@@ -36,7 +36,7 @@ export const ModeToggler = ({ value, setMode, onChange }: Props) => {
   };
 
   return (
-    <>
+    <Stack direction="row" spacing={1}>
       {icons.map(([profile, Icon]) => (
         <StyledToggleButton
           key={profile}
@@ -47,6 +47,6 @@ export const ModeToggler = ({ value, setMode, onChange }: Props) => {
           <Icon />
         </StyledToggleButton>
       ))}
-    </>
+    </Stack>
   );
 };
diff --git a/src/components/Directions/Result.tsx b/src/components/Directions/Result.tsx
index caba35c78..81c68e4b7 100644
--- a/src/components/Directions/Result.tsx
+++ b/src/components/Directions/Result.tsx
@@ -15,10 +15,11 @@ export const StyledPaper = styled(Paper)<{
   $height?: string;
   $overflow?: string;
 }>`
-  backdrop-filter: blur(10px);
-  background: ${({ theme }) =>
-    convertHexToRgba(theme.palette.background.paper, 0.9)};
-  padding: ${({ theme }) => theme.spacing(2)};
+  background-color: ${({ theme }) =>
+    convertHexToRgba(theme.palette.background.paper, 0.8)};
+  -webkit-backdrop-filter: blur(35px);
+  backdrop-filter: blur(35px);
+  padding: ${({ theme }) => theme.spacing(1.5)};
   height: ${({ $height }) => $height};
   overflow-y: ${({ $overflow }) => $overflow};
 `;
diff --git a/src/components/Directions/useGetOnSubmit.tsx b/src/components/Directions/useGetOnSubmit.tsx
index 48d2b2fbb..8bf4fd8d2 100644
--- a/src/components/Directions/useGetOnSubmit.tsx
+++ b/src/components/Directions/useGetOnSubmit.tsx
@@ -16,6 +16,8 @@ import { getLabel } from '../../helpers/featureLabel';
 import { t } from '../../services/intl';
 import { FetchError } from '../../services/helpers';
 import * as Sentry from '@sentry/nextjs';
+import { useDirectionsContext } from './DirectionsContext';
+import { updateElementOnIndex } from '../FeaturePanel/Climbing/utils/array';
 
 const getRoutingFailed = (showToast: ShowToast) => {
   return (error: unknown) => {
@@ -33,8 +35,7 @@ const getRoutingFailed = (showToast: ShowToast) => {
 };
 export const useReactToUrl = (
   setMode: (param: ((current: string) => string) | string) => void,
-  setFrom: (value: Option) => void,
-  setTo: (value: Option) => void,
+  setPoints: (points: Array<Option>) => void,
   setResult: (result: RoutingResult) => void,
 ) => {
   const { showToast } = useSnackbar();
@@ -48,8 +49,7 @@ export const useReactToUrl = (
 
     if (mode && options.length === 2) {
       setMode(mode);
-      setFrom(options[0]);
-      setTo(options[1]);
+      setPoints(options);
       handleRouting(mode, options.map(getOptionToLonLat))
         .then(setResult)
         .catch(getRoutingFailed(showToast));
@@ -61,14 +61,22 @@ export const useReactToUrl = (
 
       const lastFeature = getLastFeature();
       if (lastFeature) {
-        setTo(getCoordsOption(lastFeature.center, getLabel(lastFeature)));
+        const newPoint = getCoordsOption(
+          lastFeature.center,
+          getLabel(lastFeature),
+        );
+        if (points?.length <= 2) {
+          setPoints([null, newPoint]);
+        } else {
+          setPoints([...options.slice(0, options.length - 1), newPoint]);
+        }
       }
     }
 
     return () => {
       destroyRouting();
     };
-  }, [urlParts, setMode, setFrom, setTo, setResult, showToast]);
+  }, [urlParts, setMode, setPoints, setResult, showToast]);
 };
 
 export const useGetOnSubmitFactory = (
@@ -76,12 +84,10 @@ export const useGetOnSubmitFactory = (
   setLoading: (value: ((prevState: boolean) => boolean) | boolean) => void,
 ) => {
   const { showToast } = useSnackbar();
-
-  return (from: Option, to: Option, mode: Profile) => {
-    if (!from || !to) {
+  return (points: Array<Option>, mode: Profile) => {
+    if (!points || points.length === 0) {
       return;
     }
-    const points = [from, to];
     const url = buildUrl(mode, points);
     if (url === Router.asPath) {
       setLoading(true);
@@ -94,3 +100,13 @@ export const useGetOnSubmitFactory = (
     }
   };
 };
+
+export const useUpdatePoint = () => {
+  const { points, setPoints } = useDirectionsContext();
+
+  return (pointIndex: number, option: Option) => {
+    const newPoints = updateElementOnIndex(points, pointIndex, () => option);
+    setPoints(newPoints);
+    return newPoints;
+  };
+};
diff --git a/src/components/FeaturePanel/Climbing/RouteList/ClimbingRouteTableRow.tsx b/src/components/FeaturePanel/Climbing/RouteList/ClimbingRouteTableRow.tsx
index 522c2e43f..98e712a00 100644
--- a/src/components/FeaturePanel/Climbing/RouteList/ClimbingRouteTableRow.tsx
+++ b/src/components/FeaturePanel/Climbing/RouteList/ClimbingRouteTableRow.tsx
@@ -151,6 +151,7 @@ export const ClimbingRouteTableRow = forwardRef<
     const isMobileMode = useMobileMode();
 
     if (!feature) return null;
+
     const shortOsmId = getShortId(feature.osmMeta);
     const routeDifficulties = getDifficulties(feature.tags);
     const photoPathsCount = getWikimediaCommonsPhotoPathKeys(
diff --git a/src/components/FeaturePanel/Climbing/utils/array.ts b/src/components/FeaturePanel/Climbing/utils/array.ts
index 90ad18a16..d45bf6be1 100644
--- a/src/components/FeaturePanel/Climbing/utils/array.ts
+++ b/src/components/FeaturePanel/Climbing/utils/array.ts
@@ -8,6 +8,13 @@ export const addElementToIndex = <T>(
   return [...array.slice(0, index), newItem, ...array.slice(index)];
 };
 
+export const removeElementOnIndex = (array: Array<any>, index: number) => {
+  if (index < 0 || index >= array.length) {
+    return null;
+  }
+  return array.slice(0, index).concat(array.slice(index + 1));
+};
+
 export const moveElementToIndex = <T>(
   array: Array<T>,
   elementIndex: number,
diff --git a/src/components/SearchBox/renderOptionFactory.tsx b/src/components/SearchBox/renderOptionFactory.tsx
index 29fe81abb..21656b94d 100644
--- a/src/components/SearchBox/renderOptionFactory.tsx
+++ b/src/components/SearchBox/renderOptionFactory.tsx
@@ -8,7 +8,6 @@ import { Option } from './types';
 import { Theme } from '../../helpers/theme';
 import { LonLat } from '../../services/types';
 import { renderOsm } from './options/openstreetmap';
-import { useUserSettingsContext } from '../utils/UserSettingsContext';
 
 const renderOption = (
   inputValue: string,
diff --git a/src/helpers/GlobalStyle.tsx b/src/helpers/GlobalStyle.tsx
index fdec4a4ec..36c5ee94f 100644
--- a/src/helpers/GlobalStyle.tsx
+++ b/src/helpers/GlobalStyle.tsx
@@ -145,6 +145,10 @@ const globalStyle = (theme: Theme) => css`
   .hidden-compass .maplibregl-ctrl:has(> .maplibregl-ctrl-compass) {
     display: none;
   }
+
+  .MuiAutocomplete-noOptions {
+    padding: 0;
+  }
 `;
 
 // CAREFUL: Emotion doesn't apply Dark style in dev mode