test-assignment-komoot/src/routePlanner/index.tsx

import { useCallback, useReducer } from 'preact/hooks';
import { Coordinates } from '../shared/types';
import { ExportComponent } from './export';
import { MapComponent } from './map';
import { MarkersComponent } from './markers';
import { ReorderMarkersParams } from './types';

import './style.css';
import { markersReducer } from './reducer';

export const RoutePlanner = () => {
    const [markers, dispatchMarkers] = useReducer(markersReducer, []);

    const reorderMarkers = useCallback(
        ({ oldIndex, newIndex }: ReorderMarkersParams): void =>
            dispatchMarkers({
                type: 'reorder',
                data: { oldIndex, newIndex },
            }),
        [],
    );

    const moveMarkerUp = useCallback(
        (key: string) =>
            dispatchMarkers({
                type: 'moveUp',
                data: { key },
            }),
        [],
    );

    const moveMarkerDown = useCallback(
        (key: string) =>
            dispatchMarkers({
                type: 'moveDown',
                data: { key },
            }),
        [],
    );

    const removeMarker = useCallback(
        (key: string) =>
            dispatchMarkers({
                type: 'remove',
                data: { key },
            }),
        [],
    );

    const addMarker = useCallback(
        (coordinates: Coordinates) =>
            dispatchMarkers({
                type: 'add',
                data: {
                    coordinates,
                    moveUp: moveMarkerUp,
                    moveDown: moveMarkerDown,
                    remove: removeMarker,
                },
            }),
        [moveMarkerUp, moveMarkerDown, removeMarker],
    );

    return (
        <section class="route-planner">
            <section class="markers">
                <MarkersComponent
                    onMarkersReorder={reorderMarkers}
                    markers={markers}
                />
            </section>
            <section class="export">
                <ExportComponent markers={markers} />
            </section>
            <section class="map">
                <MapComponent onMapClick={addMarker} markers={markers} />
            </section>
        </section>
    );
};