Direction: Add another destination

src/components/Directions/DirectionsAutocomplete.tsx

@@ -263,7 +263,6 @@ export const DirectionsAutocomplete = ({ label, value, pointIndex }: Props) => {
     const lngLat = markerRef.current?.getLngLat();
     if (lngLat) {
       const coordsOption = getCoordsOption([lngLat.lng, lngLat.lat]);
-      updatePoint(pointIndex, coordsOption);
       handleUpdate(coordsOption);
     }
   };
@@ -275,8 +274,6 @@ export const DirectionsAutocomplete = ({ label, value, pointIndex }: Props) => {
   const onChange = (_: unknown, option: Option) => {
     console.log('selected', option); // eslint-disable-line no-console
     setInputValue(getOptionLabel(option));
-    updatePoint(pointIndex, option);
-
     selectedOptionInputValue.current = getOptionLabel(option);
     handleUpdate(option);
   };

src/components/Directions/DirectionsForm.tsx

@@ -3,7 +3,7 @@ import { RoutingResult } from './routing/types';
 import { CloseButton } from './helpers';
 import React, { useEffect, useMemo, useState } from 'react';
 import { StyledPaper } from './Result';
-import { Box, Stack } from '@mui/material';
+import { Box, Button, Stack } from '@mui/material';
 import { ModeToggler } from './ModeToggler';
 import { DirectionsAutocomplete } from './DirectionsAutocomplete';
 import { t } from '../../services/intl';
@@ -12,6 +12,7 @@ import SearchIcon from '@mui/icons-material/Search';
 import { getCoordsOption } from '../SearchBox/options/coords';
 import { useMapStateContext } from '../utils/MapStateContext';
 import { useDirectionsContext } from './DirectionsContext';
+import ControlPointIcon from '@mui/icons-material/ControlPoint';
 import {
   useGetOnSubmitFactory,
   useReactToUrl,
@@ -29,6 +30,7 @@ type Props = {
 const useGlobalMapClickOverride = (
   points: Array<Option>,
   setPoints: (points: Array<Option>) => void,
+  inputs: Array<InputItem>,
 ) => {
   const { setResult, setLoading, mode } = useDirectionsContext();
   const submitFactory = useGetOnSubmitFactory(setResult, setLoading);
@@ -43,7 +45,7 @@ const useGlobalMapClickOverride = (
           const newPoints = updatePoint(0, coordinates);
           submitFactory(newPoints, mode);
         } else {
-          const newPoints = updatePoint(1, coordinates);
+          const newPoints = updatePoint(inputs.length - 1, coordinates);
           submitFactory(newPoints, mode);
         }
       }
@@ -53,6 +55,7 @@ const useGlobalMapClickOverride = (
       mapClickOverrideRef.current = undefined;
     };
   }, [
+    inputs.length,
     mapClickOverrideRef,
     mode,
     points,
@@ -97,7 +100,6 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
     handleDragOver,
     handleDragEnd,
     HighlightedDropzone,
-    ItemContainer,
     draggedItem,
     draggedOverIndex,
   } = useDragItems<InputItem>({
@@ -126,11 +128,16 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
     }
   }, [defaultTo, points]);
 
-  useGlobalMapClickOverride(points, setPoints);
+  useGlobalMapClickOverride(points, setPoints, inputs);
   useReactToUrl(setMode, setPoints, setResult);
 
   const onSubmitFactory = useGetOnSubmitFactory(setResult, setLoading);
 
+  const handleAddDestination = () => {
+    const newInputs = [...inputs, { ...defaultTo }];
+    setInputs(newInputs);
+  };
+
   if (hideForm) {
     return null;
   }
@@ -190,6 +197,16 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
             </Box>
           );
         })}
+        <div>
+          <Button
+            variant="text"
+            startIcon={<ControlPointIcon />}
+            onClick={handleAddDestination}
+            size="small"
+          >
+            {t('directions.add_destination')}
+          </Button>
+        </div>
       </Stack>
 
       <LoadingButton

src/components/Directions/helpers.tsx

@@ -26,8 +26,8 @@ const getOptionToUrl = (point: Option) => {
 };
 
 export const buildUrl = (mode: 'car' | 'bike' | 'walk', points: Option[]) => {
-  const urlParts = points.map(getOptionToUrl);
-  return encodeUrl`/directions/${mode}/${urlParts[0]}/${urlParts[1]}`;
+  const urlParts = points.map(getOptionToUrl).join('/');
+  return encodeUrl`/directions/${mode}/${urlParts}`;
 };
 
 const urlCoordsToLonLat = (coords: string): LonLat =>

src/components/Directions/routing/getGraphhopperResults.ts

@@ -16,9 +16,12 @@ export const getGraphhopperResults = async (
   points: LonLat[],
 ): Promise<RoutingResult> => {
   const profile = profiles[mode];
-  const from = points[0].toReversed().join(','); // lon,lat!
-  const to = points[1].toReversed().join(',');
-  const url = `https://graphhopper.com/api/1/route?point=${from}&point=${to}&vehicle=${profile}&key=${API_KEY}&type=json&points_encoded=false&snap_prevention=ferry&locale=${intl.lang}`;
+  const graphhopperPoints = points.map((point) => point.toReversed().join(','));
+  const urlPoints = graphhopperPoints
+    .map((point) => `point=${point}&`)
+    .join('');
+
+  const url = `https://graphhopper.com/api/1/route?${urlPoints}vehicle=${profile}&key=${API_KEY}&type=json&points_encoded=false&snap_prevention=ferry`;
 
   const data = await fetchJson(url);
 

src/components/Directions/useGetOnSubmit.tsx

@@ -45,9 +45,9 @@ export const useReactToUrl = (
 
   useEffect(() => {
     const [, mode, ...points] = urlParts as [string, Profile, ...string[]];
-    const options = parseUrlParts(points);
+    const options = parseUrlParts(points.flatMap((str) => str.split('/')));
 
-    if (mode && options.length === 2) {
+    if (mode && options.length >= 2) {
       setMode(mode);
       setPoints(options);
       handleRouting(mode, options.map(getOptionToLonLat))
@@ -89,6 +89,7 @@ export const useGetOnSubmitFactory = (
       return;
     }
     const url = buildUrl(mode, points);
+
     if (url === Router.asPath) {
       setLoading(true);
       handleRouting(mode, points.map(getOptionToLonLat))

src/locales/vocabulary.js

@@ -123,6 +123,7 @@ export default {
   'searchbox.overpass_custom_query': 'custom query',
 
   'directions.get_directions': 'Get Directions',
+  'directions.add_destination': 'Add destination',
   'directions.form.start_or_click': 'Choose start or click map',
   'directions.form.destination': 'Destination',
   'directions.edit_destinations': 'Edit destinations',