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);
         }
       }
@@ -97,7 +99,6 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
     handleDragOver,
     handleDragEnd,
     HighlightedDropzone,
-    ItemContainer,
     draggedItem,
     draggedOverIndex,
   } = useDragItems<InputItem>({
@@ -126,11 +127,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 +196,16 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
             </Box>
           );
         })}
+        <div>
+          <Button
+            variant="text"
+            startIcon={<ControlPointIcon />}
+            onClick={handleAddDestination}
+            size="small"
+          >
+            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&instructions=false&snap_prevention=ferry`;
 
   const data = await fetchJson(url);
 

src/components/Directions/useGetOnSubmit.tsx

@@ -45,9 +45,10 @@ export const useReactToUrl = (
 
   useEffect(() => {
     const [, mode, ...points] = urlParts as [string, Profile, ...string[]];
-    const options = parseUrlParts(points);
+    // 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))
@@ -79,6 +80,9 @@ export const useReactToUrl = (
   }, [urlParts, setMode, setPoints, setResult, showToast]);
 };
 
+// /directions/car/-1.2054658430182599%2C43.759289191978546~43.8%C2%B0%20-1.2%C2%B0%2F13.333087761276602%2C50.335370439928724~50.335%C2%B0%2013.333%C2%B0%2F13.892765183136362%2C50.29976453694858~50.300%C2%B0%2013.893%C2%B0
+// /directions/car/13.080889728076613%2C50.35015489641469~50.350%C2%B0%2013.081%C2%B0%2F13.333087761276602%2C50.335370439928724~50.335%C2%B0%2013.333%C2%B0%2F13.892765183136362%2C50.29976453694858~50.300%C2%B0%2013.893%C2%B0 false
+
 export const useGetOnSubmitFactory = (
   setResult: (result: RoutingResult) => void,
   setLoading: (value: ((prevState: boolean) => boolean) | boolean) => void,
@@ -89,6 +93,7 @@ export const useGetOnSubmitFactory = (
       return;
     }
     const url = buildUrl(mode, points);
+
     if (url === Router.asPath) {
       setLoading(true);
       handleRouting(mode, points.map(getOptionToLonLat))