From 79398e13f57fe0e2a0b8b725501f176901df067e Mon Sep 17 00:00:00 2001 From: Harshal Ranjhani Date: Sun, 13 Oct 2024 16:57:03 +0530 Subject: [PATCH 1/6] feat: open goal modal with spacebar key --- src/hooks/useGoalSelection.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/hooks/useGoalSelection.ts b/src/hooks/useGoalSelection.ts index 040a69705..afc87f874 100644 --- a/src/hooks/useGoalSelection.ts +++ b/src/hooks/useGoalSelection.ts @@ -14,6 +14,7 @@ export const useGoalSelection = (goals: GoalItem[]): GoalItem | undefined => { const downPress = useKeyPress("ArrowDown"); const rightPress = useKeyPress("ArrowRight"); const leftPress = useKeyPress("ArrowLeft"); + const spacePress = useKeyPress(" "); const focusIndex = Number(searchParams.get("focus") || -1); @@ -62,6 +63,11 @@ export const useGoalSelection = (goals: GoalItem[]): GoalItem | undefined => { [goals], ); + const openGoalActionsModal = (goal: GoalItem) => { + if (!goal) return; + navigate(`/goals/root/${goal.id}?showOptions=true`); + }; + useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) { @@ -90,10 +96,14 @@ export const useGoalSelection = (goals: GoalItem[]): GoalItem | undefined => { window.history.back(); } + if (spacePress && goals.length > 0) { + openGoalActionsModal(goals[focusIndex]); + } + return () => { window.removeEventListener("keydown", handleKeyDown); }; - }, [downPress, upPress, rightPress, leftPress]); + }, [downPress, upPress, rightPress, leftPress, spacePress]); return goals[focusIndex]; }; From 6d11f1e529b9b6bfa31737e5256d391abc43b4c0 Mon Sep 17 00:00:00 2001 From: Harshal Ranjhani Date: Sun, 13 Oct 2024 18:12:29 +0530 Subject: [PATCH 2/6] fix: background navigates to a higher lever when one presses spacebar at a lower level --- src/hooks/useGoalSelection.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/hooks/useGoalSelection.ts b/src/hooks/useGoalSelection.ts index afc87f874..2119eda10 100644 --- a/src/hooks/useGoalSelection.ts +++ b/src/hooks/useGoalSelection.ts @@ -65,7 +65,11 @@ export const useGoalSelection = (goals: GoalItem[]): GoalItem | undefined => { const openGoalActionsModal = (goal: GoalItem) => { if (!goal) return; - navigate(`/goals/root/${goal.id}?showOptions=true`); + if (goal.parentGoalId === "root") { + navigate(`/goals/root/${goal.id}?showOptions=true`); + } else { + navigate(`/goals/${goal.parentGoalId}/${goal.id}?showOptions=true`); + } }; useEffect(() => { From 8a966f9ab9e5311bf887a0ce8cb7e90adab0453e Mon Sep 17 00:00:00 2001 From: Harshal Ranjhani Date: Sun, 13 Oct 2024 18:33:37 +0530 Subject: [PATCH 3/6] fix: preserve state when showing modal --- .../GoalSublist/components/GoalHistory.tsx | 1 + src/hooks/useGoalSelection.ts | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx b/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx index bd9542906..de161590c 100644 --- a/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx +++ b/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx @@ -24,6 +24,7 @@ const breadcrumbStyle: React.CSSProperties = { }; const BreadcrumbItem = ({ goal }: { goal: ISubGoalHistory }) => { + console.log(goal.goalTitle); const { t } = useTranslation(); return ( { const openGoalActionsModal = (goal: GoalItem) => { if (!goal) return; - if (goal.parentGoalId === "root") { - navigate(`/goals/root/${goal.id}?showOptions=true`); - } else { - navigate(`/goals/${goal.parentGoalId}/${goal.id}?showOptions=true`); - } + const newPath = goal.parentGoalId === "root" ? `/goals/root/${goal.id}` : `/goals/${goal.parentGoalId}/${goal.id}`; + + navigate(`${newPath}?showOptions=true`, { + state: location.state, + }); }; useEffect(() => { From 2bb7910da0bed49546c499284efb6ca12ddcb9cb Mon Sep 17 00:00:00 2001 From: Harshal Ranjhani Date: Sun, 13 Oct 2024 18:59:40 +0530 Subject: [PATCH 4/6] fix: use 'Space' instead of ' ' for the event code --- src/hooks/useGoalSelection.ts | 2 +- src/hooks/useKeyPress.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useGoalSelection.ts b/src/hooks/useGoalSelection.ts index 05259c954..aadd8d437 100644 --- a/src/hooks/useGoalSelection.ts +++ b/src/hooks/useGoalSelection.ts @@ -14,7 +14,7 @@ export const useGoalSelection = (goals: GoalItem[]): GoalItem | undefined => { const downPress = useKeyPress("ArrowDown"); const rightPress = useKeyPress("ArrowRight"); const leftPress = useKeyPress("ArrowLeft"); - const spacePress = useKeyPress(" "); + const spacePress = useKeyPress("Space"); const focusIndex = Number(searchParams.get("focus") || -1); diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts index c2a7e7fa1..9470cd1a1 100644 --- a/src/hooks/useKeyPress.ts +++ b/src/hooks/useKeyPress.ts @@ -6,7 +6,7 @@ export const useKeyPress = (targetKey: string) => { const keyHandler = useCallback( (event: KeyboardEvent) => { event.stopPropagation(); - if (event.key === targetKey) { + if (event.key === targetKey || (targetKey === "Space" && event.key === " ")) { setKeyPressed(event.type === "keydown"); } }, From 446042d29fc4606f082067938f188bac66140fdb Mon Sep 17 00:00:00 2001 From: Harshal Ranjhani Date: Sun, 13 Oct 2024 19:10:29 +0530 Subject: [PATCH 5/6] remove log --- .../GoalsComponents/GoalSublist/components/GoalHistory.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx b/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx index de161590c..bd9542906 100644 --- a/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx +++ b/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx @@ -24,7 +24,6 @@ const breadcrumbStyle: React.CSSProperties = { }; const BreadcrumbItem = ({ goal }: { goal: ISubGoalHistory }) => { - console.log(goal.goalTitle); const { t } = useTranslation(); return ( Date: Sun, 13 Oct 2024 19:15:41 +0530 Subject: [PATCH 6/6] patch: replace e.key with e.code --- src/hooks/useKeyPress.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts index 9470cd1a1..ade7d7d36 100644 --- a/src/hooks/useKeyPress.ts +++ b/src/hooks/useKeyPress.ts @@ -6,7 +6,7 @@ export const useKeyPress = (targetKey: string) => { const keyHandler = useCallback( (event: KeyboardEvent) => { event.stopPropagation(); - if (event.key === targetKey || (targetKey === "Space" && event.key === " ")) { + if (event.code === targetKey) { setKeyPressed(event.type === "keydown"); } },