From 56353cda41b9e3b141237b82b8c14ff7e97a1a35 Mon Sep 17 00:00:00 2001
From: Jason Morgan <morgannj71@gmail.com>
Date: Thu, 13 Jun 2024 19:49:09 -0700
Subject: [PATCH] added hook to handle ESC key to close cards

---
 client/src/components/CardDetails.tsx | 102 +++++++++++++-------------
 client/src/hooks/useKeyPress.ts       |  20 +++++
 2 files changed, 73 insertions(+), 49 deletions(-)
 create mode 100644 client/src/hooks/useKeyPress.ts

diff --git a/client/src/components/CardDetails.tsx b/client/src/components/CardDetails.tsx
index 50fe666..bad012a 100644
--- a/client/src/components/CardDetails.tsx
+++ b/client/src/components/CardDetails.tsx
@@ -1,63 +1,67 @@
 import React from "react";
 import { Card } from "../types";
+import useKeyPress from "../hooks/useKeyPress";
 
 interface CardDetailsProps {
-	selectedCard: Card;
-	handleUpdateSelectedCard: (card: Card) => void;
-	handleResetSelectedCard: () => void;
+  selectedCard: Card;
+  handleUpdateSelectedCard: (card: Card) => void;
+  handleResetSelectedCard: () => void;
 }
 
 const CardDetails: React.FC<CardDetailsProps> = ({
-	selectedCard,
-	handleUpdateSelectedCard,
-	handleResetSelectedCard,
+  selectedCard,
+  handleUpdateSelectedCard,
+  handleResetSelectedCard,
 }) => {
-	const toggleCheck = (index: number) => {
-		if (!selectedCard || !selectedCard.details.checklist) return;
+  const toggleCheck = (index: number) => {
+    if (!selectedCard || !selectedCard.details.checklist) return;
 
-		const newSelectedCard = {
-			...selectedCard,
-			details: {
-				...selectedCard.details,
-				checklist: selectedCard.details.checklist.map((item, idx) =>
-					idx === index ? { ...item, checked: !item.checked } : item
-				),
-			},
-		};
+    const newSelectedCard = {
+      ...selectedCard,
+      details: {
+        ...selectedCard.details,
+        checklist: selectedCard.details.checklist.map((item, idx) =>
+          idx === index ? { ...item, checked: !item.checked } : item
+        ),
+      },
+    };
 
-		handleUpdateSelectedCard(newSelectedCard);
-	};
+    handleUpdateSelectedCard(newSelectedCard);
+  };
 
-	return (
-		<div className="p-4 w-1/2 mx-auto bg-secondaryElements shadow-md rounded-lg">
-			<h2 className="text-lg font-bold mb-2">{selectedCard.cardName}</h2>
-			<ul>
-				{selectedCard.details.checklist?.map((item, index) => (
-					<li key={index} className="flex items-center mb-2">
-						<input
-							type="checkbox"
-							checked={item.checked}
-							onChange={() => toggleCheck(index)}
-						/>
-						<label className="ml-2" onClick={() => toggleCheck(index)}>
-							{item.value}
-						</label>
-					</li>
-				))}
-			</ul>
-			<p className="mt-4">Notes: {selectedCard.details.notes}</p>
-			<p className="mt-1">
-				Time Estimate: {selectedCard.details.timeEstimate} Minutes
-			</p>
-			<p className="mt-1">Column: {selectedCard.column}</p>
-			<button
-				className="mt-8 py-1.5 px-8 text-sm bg-black text-white rounded"
-				onClick={() => handleResetSelectedCard()}
-			>
-				Close
-			</button>
-		</div>
-	);
+  // Use custom hook to handle ESC key
+  useKeyPress("Escape", handleResetSelectedCard);
+
+  return (
+    <div className="p-4 w-1/2 mx-auto bg-secondaryElements shadow-md rounded-lg">
+      <h2 className="text-lg font-bold mb-2">{selectedCard.cardName}</h2>
+      <ul>
+        {selectedCard.details.checklist?.map((item, index) => (
+          <li key={index} className="flex items-center mb-2">
+            <input
+              type="checkbox"
+              checked={item.checked}
+              onChange={() => toggleCheck(index)}
+            />
+            <label className="ml-2" onClick={() => toggleCheck(index)}>
+              {item.value}
+            </label>
+          </li>
+        ))}
+      </ul>
+      <p className="mt-4">Notes: {selectedCard.details.notes}</p>
+      <p className="mt-1">
+        Time Estimate: {selectedCard.details.timeEstimate} Minutes
+      </p>
+      <p className="mt-1">Column: {selectedCard.column}</p>
+      <button
+        className="mt-8 py-1.5 px-8 text-sm bg-black text-white rounded"
+        onClick={() => handleResetSelectedCard()}
+      >
+        Close
+      </button>
+    </div>
+  );
 };
 
 export default CardDetails;
diff --git a/client/src/hooks/useKeyPress.ts b/client/src/hooks/useKeyPress.ts
new file mode 100644
index 0000000..8781791
--- /dev/null
+++ b/client/src/hooks/useKeyPress.ts
@@ -0,0 +1,20 @@
+// hooks/useKeyPress.ts
+import { useEffect } from "react";
+
+const useKeyPress = (targetKey: string, callback: () => void) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === targetKey) {
+        callback();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [targetKey, callback]);
+};
+
+export default useKeyPress;