From 295509be5fc44c8ca454aedc23b6cd58d66605e2 Mon Sep 17 00:00:00 2001
From: yoonie-jang <yoonie.jang@mail.utoronto.ca>
Date: Fri, 29 Nov 2024 11:52:47 -0500
Subject: [PATCH] Add arrow stepping

---
 webstepper/src/App.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/webstepper/src/App.tsx b/webstepper/src/App.tsx
index 8f9b077..e8eeea6 100644
--- a/webstepper/src/App.tsx
+++ b/webstepper/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Header from "./Header";
 import { Button, Box, Typography, Stack } from "@mui/material";
 import SvgDisplay from "./SvgDisplay";
@@ -20,6 +20,23 @@ export default function App() {
         setStep(Math.min(Math.max(newStep, 0), limit - 1));
     };
 
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key == "ArrowLeft") {
+                handleStep(step - 1);
+            }
+            if (event.key == "ArrowRight") {
+                handleStep(step + 1);
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [step]);
+
     return (
         <main className="container">
             <Header />