isFirst / isLast

src/routePlanner/marker.tsx

@@ -1,14 +1,14 @@
 import { MarkerProps } from './types';
 
-export const MarkerComponent = ({ marker }: MarkerProps) => {
+export const MarkerComponent = ({ marker, isFirst, isLast }: MarkerProps) => {
     return (
         <li key={marker.key}>
             {`Waypoint ${marker.label} (${marker.key.substring(0, 4)})`}
             <span class="buttons">
-                <button onClick={marker.moveUp} disabled={!marker.moveUp}>
+                <button onClick={marker.moveUp} disabled={isFirst}>
                     🔼
                 </button>
-                <button onClick={marker.moveDown} disabled={!marker.moveDown}>
+                <button onClick={marker.moveDown} disabled={isLast}>
                     🔽
                 </button>
                 <button onClick={marker.remove}>🗑️</button>

src/routePlanner/markers.tsx

@@ -37,8 +37,13 @@ export const MarkersComponent = ({
         <>
             <h3>Markers</h3>
             <ol ref={listContainerRef}>
-                {markers.map((marker) => (
-                    <MarkerComponent key={marker.key} marker={marker} />
+                {markers.map((marker, i) => (
+                    <MarkerComponent
+                        key={marker.key}
+                        marker={marker}
+                        isFirst={i === 0}
+                        isLast={i === markers.length - 1}
+                    />
                 ))}
             </ol>
         </>

src/routePlanner/types.ts

@@ -3,8 +3,8 @@ import { Coordinates, Waypoint } from '../shared/types';
 export type Marker = Waypoint & {
     key: string;
     remove: () => void;
-    moveUp?: () => void;
-    moveDown?: () => void;
+    moveUp: () => void;
+    moveDown: () => void;
     label: string;
 };
 
@@ -49,4 +49,6 @@ export type ExportProps = {
 
 export type MarkerProps = {
     marker: Marker;
+    isFirst: boolean;
+    isLast: boolean;
 };