Implement undo/redo with zundo

.github/workflows/fly-deploy-pr.yml

@@ -1,4 +1,4 @@
-name: Fly Deploy Disctictr V2 Pull Request app
+name: Fly Deploy Districtr V2 Pull Request app
 on:
     pull_request:
         types: [opened, reopened, synchronize, closed]

app/package.json

@@ -31,6 +31,7 @@
     "react-resizable": "^3.0.5",
     "recharts": "^2.12.7",
     "superjson": "^2.2.1",
+    "zundo": "^2.2.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

app/src/app/components/sidebar/Sidebar.tsx

@@ -4,6 +4,7 @@ import {Box, Flex, Heading} from '@radix-ui/themes';
 import {MapModeSelector} from './MapModeSelector';
 import {ColorPicker} from './ColorPicker';
 import {ResetMapButton} from './ResetMapButton';
+import { UndoRedoButton } from "./UndoRedoButton";
 import {GerryDBViewSelector} from './GerryDBViewSelector';
 import {useMapStore} from '@/app/store/mapStore';
 import PaintByCounty from './PaintByCounty';
@@ -16,12 +17,12 @@ export default function SidebarComponent() {
   return (
     <Box
       p="3"
-      className="w-full z-10 shadow-md flex-none overflow-y-auto 
+      className="w-full z-10 shadow-md flex-none overflow-y-auto
       border-t lg:border-t-0
       lg:h-screen lg:max-w-sidebar lg:w-sidebar
        landscape:border-t-0
       landscape:h-screen landscape:max-w-[40vw] landscape:w-[40vw]
-      
+
       "
     >
       <Flex direction="column" gap="3">
@@ -31,7 +32,7 @@ export default function SidebarComponent() {
         <GerryDBViewSelector />
         <MapModeSelector />
         {activeTool === "brush" || activeTool === "eraser" ? (
-          <div 
+          <div
           className="gap-4 lg:gap-0 landscape:gap-0
           flex flex-row-reverse lg:flex-col landscape:flex-col
           justify-around
@@ -53,6 +54,10 @@ export default function SidebarComponent() {
           </div>
         ) : null}
         <ResetMapButton />
+        <Flex direction="row" gap="3">
+          <UndoRedoButton isRedo={false} />
+          <UndoRedoButton isRedo />
+        </Flex>
         <Box
           display={{
             initial: "none",

app/src/app/components/sidebar/UndoRedoButton.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@radix-ui/themes";
+import { ResetIcon } from "@radix-ui/react-icons";
+import type { TemporalState } from "zundo";
+import { useStore } from "zustand";
+import { useMapStore, type MapStore } from "@/app/store/mapStore";
+
+/* convert zundo to a React hook */
+const useTemporalStore = <T,>(
+  selector: (state: TemporalState<Partial<MapStore>>) => T,
+  equality?: (a: T, b: T) => boolean,
+) => useStore(useMapStore.temporal, selector, equality);
+
+export function UndoRedoButton({ isRedo = false }) {
+  const { futureStates, pastStates, redo, undo } = useTemporalStore(
+    (state) => state,
+  ); // TemporalState<MapStore>
+
+  const handleClickUndoRedo = () => {
+    if (isRedo) {
+      redo();
+    } else {
+      undo();
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleClickUndoRedo}
+      variant="outline"
+      disabled={
+        isRedo
+          ? futureStates.length === 0
+          : pastStates.filter((state) => state.zoneAssignments?.size).length <= 1
+      }
+    >
+      <div style={{ transform: isRedo ? "rotateY(180deg)" : "" }}>
+        <ResetIcon />
+      </div>
+      {isRedo ? "Redo" : "Undo"}
+    </Button>
+  );
+}