historynavigator.tsx

import React from "react";
import "./historynavigator.css";
import { History } from "../../common/history";

interface HistoryNavigatorProps<HistoryDataType> {
    history: History<HistoryDataType>;
    onCheckpointRequest: (id: number) => void;
    onRedo: () => void;
    onUndo: () => void;
}

function HistoryNavigator<HistoryDataType>({
    history,
    onCheckpointRequest,
    onUndo,
    onRedo,
}: HistoryNavigatorProps<HistoryDataType>) {
    return (
        <div className={"history-navigator"}>
            <button onClick={onUndo} disabled={!history.hasUndoCheckpoints()}>
                Undo
            </button>
            <button onClick={onRedo} disabled={!history.hasRedoCheckpoints()}>
                Redo
            </button>
            <select
                onChange={(e) => onCheckpointRequest(Number(e.target.value))}
                value={history.currentCheckpoint.id}
            >
                {history.checkpoints.map((checkpoint) => {
                    return (
                        <option key={checkpoint.id} value={checkpoint.id}>
                            {checkpoint.description}
                        </option>
                    );
                })}
            </select>
        </div>
    );
}

export default HistoryNavigator;