From df9be06aa65930308ef5b395f31f64e9233f2a36 Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@hey.com>
Date: Sun, 26 Jan 2025 17:43:29 +0000
Subject: [PATCH] feat: add enter to submit

---
 app/home/application-list.tsx | 40 +++++++++++++++++++++++------------
 app/routes/home.tsx           |  5 +++++
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/app/home/application-list.tsx b/app/home/application-list.tsx
index d91af12..13592b3 100644
--- a/app/home/application-list.tsx
+++ b/app/home/application-list.tsx
@@ -18,13 +18,28 @@ interface ListItemStore {
 
 	setNewStageValue: (newStageValue: string) => void
 	setIsAddingStage: (isAddingStage: boolean) => void
+	addStage: (entryName: string) => void
 }
 
-const useListItemStore = create<ListItemStore>()((set) => ({
+const useListItemStore = create<ListItemStore>()((set, get) => ({
 	isAddingStage: false,
 	newStageValue: "",
+
 	setNewStageValue: (newStageValue: string) => set({ newStageValue }),
 	setIsAddingStage: (isAddingStage: boolean) => set({ isAddingStage }),
+	addStage: (entryName) => {
+		const store = useStore.getState()
+		let stage = get().newStageValue
+		if (stage) {
+			if (stage === DEFAULT_NODE.acceptedNode.key.toLowerCase()) {
+				stage = DEFAULT_NODE.acceptedNode.key
+			} else if (stage === DEFAULT_NODE.rejectedNode.key.toLowerCase()) {
+				stage = DEFAULT_NODE.rejectedNode.key
+			}
+			store.addStageInEntry(stage, entryName)
+			set({ isAddingStage: false, newStageValue: "" })
+		}
+	},
 }))
 
 const EntryContext = createContext<Entry>(null as unknown as Entry)
@@ -79,14 +94,22 @@ function NewStageInput() {
 	return null
 }
 function ActualStageInput() {
+	const entry = useContext(EntryContext)
 	const newStageValue = useListItemStore((state) => state.newStageValue)
 	const setNewStageValue = useListItemStore((state) => state.setNewStageValue)
+	const addStage = useListItemStore((state) => state.addStage)
+
 	return (
 		<input
 			value={newStageValue}
 			onChange={(event) => {
 				setNewStageValue(event.currentTarget.value)
 			}}
+			onKeyDown={(event) => {
+				if (event.key === "Enter") {
+					addStage(entry.name)
+				}
+			}}
 			className="bg-transparent"
 		/>
 	)
@@ -159,21 +182,10 @@ const DefaultActions = memo(() => {
 const AddStageActions = memo(() => {
 	const entry = useContext(EntryContext)
 	const setIsAddingStage = useListItemStore((state) => state.setIsAddingStage)
-	const setNewStageValue = useListItemStore((state) => state.setNewStageValue)
-	const addStageToEntry = useStore((state) => state.addStageInEntry)
+	const addStage = useListItemStore((state) => state.addStage)
 
 	function onOk() {
-		let stage = useListItemStore.getState().newStageValue
-		if (stage) {
-			if (stage === DEFAULT_NODE.acceptedNode.key.toLowerCase()) {
-				stage = DEFAULT_NODE.acceptedNode.key
-			} else if (stage === DEFAULT_NODE.rejectedNode.key.toLowerCase()) {
-				stage = DEFAULT_NODE.rejectedNode.key
-			}
-			addStageToEntry(stage, entry.name)
-			setIsAddingStage(false)
-			setNewStageValue("")
-		}
+		addStage(entry.name)
 	}
 
 	function onCancel() {
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 339854b..12d26eb 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -116,6 +116,11 @@ function AddApplicationForm() {
 					className="px-2"
 					type="text"
 					placeholder="Application name"
+					onKeyDown={(event) => {
+						if (event.key === "Enter") {
+							onAddButtonClick()
+						}
+					}}
 				/>
 			) : null}
 			<div className="flex flex-row space-x-2 mt-2">