STNDP-32 Support keyboard shortcut for standup forms (#41)

Author: hyokualexkwon

apps/web/app/routes/board-route/dynamic-form.tsx

@@ -2,6 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Flex, Box, TextArea, Button, Text, Skeleton } from "@radix-ui/themes";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
+import { useImperativeHandle, type Ref } from "react";
 
 export function validateDynamicFormSchema(schema: unknown) {
   try {
@@ -62,13 +63,19 @@ export type DynamicFormValues = {
   [key: string]: any; // Allows dynamic field names
 };
 
+export type DynamicFormRef = {
+  submit: () => void;
+};
+
 function DynamicForm({
+  ref,
   schema,
   defaultValues,
   onSubmit,
   onCancel,
   loading,
 }: {
+  ref: Ref<DynamicFormRef>;
   schema: z.infer<typeof dynamicFormSchema>;
   defaultValues?: DynamicFormValues;
   onSubmit: (data: DynamicFormValues) => void;
@@ -78,23 +85,26 @@ function DynamicForm({
   const { title, description, fields } = schema;
 
   const dynamicFormSchema = z.object(
-    fields.reduce((acc, field) => {
-      if (field.type === "textarea") {
-        let fieldValidation = z.string();
+    fields.reduce(
+      (acc, field) => {
+        if (field.type === "textarea") {
+          let fieldValidation = z.string();
 
-        if (field.validations) {
-          fieldValidation = fieldValidation
-            .min(field.validations.minLength || 0)
-            .max(field.validations.maxLength || Infinity);
-        }
+          if (field.validations) {
+            fieldValidation = fieldValidation
+              .min(field.validations.minLength || 0)
+              .max(field.validations.maxLength || Infinity);
+          }
 
-        acc[field.name] = field.required
-          ? fieldValidation.nonempty()
-          : fieldValidation.optional();
-      }
+          acc[field.name] = field.required
+            ? fieldValidation.nonempty()
+            : fieldValidation.optional();
+        }
 
-      return acc;
-    }, {} as { [key: string]: z.ZodType })
+        return acc;
+      },
+      {} as { [key: string]: z.ZodType }
+    )
   );
 
   const {
@@ -111,13 +121,22 @@ function DynamicForm({
       }, {} as DynamicFormValues),
   });
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      submit: () => {
+        handleFormSubmit();
+      },
+    }),
+    []
+  );
+
+  const handleFormSubmit = handleSubmit((data) => {
+    onSubmit(data);
+  });
+
   return (
-    <form
-      method="post"
-      onSubmit={handleSubmit((data) => {
-        onSubmit(data);
-      })}
-    >
+    <form method="post" onSubmit={handleFormSubmit}>
       <Flex direction="column">
         <Text size="4" weight="bold">
           {title}

apps/web/app/routes/board-route/todays-standup.tsx

@@ -1,10 +1,19 @@
 import { Box, Button, Card, Flex, Text } from "@radix-ui/themes";
-import { Suspense, use, useEffect, useState } from "react";
+import {
+  Suspense,
+  useEffect,
+  useState,
+  use,
+  useRef,
+  useImperativeHandle,
+  type Ref,
+} from "react";
 import { useFetcher, useLoaderData } from "react-router";
 import type { loader } from "./board-route";
 import { DateTime } from "luxon";
 import DynamicForm, {
   FormSkeleton,
+  type DynamicFormRef,
   validateDynamicFormSchema,
   type DynamicFormValues,
 } from "./dynamic-form";
@@ -20,7 +29,13 @@ import { parseMarkdownToHtml } from "~/libs/markdown";
 
 type Props = {};
 
-function CardContent() {
+interface CardContentRef {
+  edit: () => void;
+  cancel: () => void;
+  save: () => void;
+}
+
+function CardContent({ ref }: { ref: Ref<CardContentRef> }) {
   const {
     boardPromise,
     standupsPromise,
@@ -33,6 +48,24 @@ function CardContent() {
 
   const schema = validateDynamicFormSchema(structure?.schema);
 
+  const dynamicFormRef = useRef<DynamicFormRef>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      edit: () => {
+        handleEditButtonClick();
+      },
+      cancel: () => {
+        handleDynamicFormCancel();
+      },
+      save: () => {
+        dynamicFormRef.current?.submit();
+      },
+    }),
+    []
+  );
+
   if (!schema) {
     return null;
   }
@@ -111,10 +144,19 @@ function CardContent() {
 
   const [isEditing, setIsEditing] = useState(!Boolean(todayStandup));
 
+  function handleDynamicFormCancel() {
+    setIsEditing(false);
+  }
+
+  function handleEditButtonClick() {
+    setIsEditing(true);
+  }
+
   return (
     <>
       {!todayStandup && (
         <DynamicForm
+          ref={dynamicFormRef}
           schema={schema}
           onSubmit={async (data) => {
             if (!structure) {
@@ -139,6 +181,7 @@ function CardContent() {
       {todayStandup &&
         (isEditing ? (
           <DynamicForm
+            ref={dynamicFormRef}
             schema={schema}
             defaultValues={todayStandup.formData as DynamicFormValues}
             onSubmit={async (data) => {
@@ -154,7 +197,7 @@ function CardContent() {
               );
               setIsEditing(false);
             }}
-            onCancel={() => setIsEditing(false)}
+            onCancel={handleDynamicFormCancel}
           />
         ) : (
           <Flex direction="column" gap="5">
@@ -193,7 +236,7 @@ function CardContent() {
                 highContrast
                 size="2"
                 variant="surface"
-                onClick={() => setIsEditing(true)}
+                onClick={handleEditButtonClick}
               >
                 Edit
               </Button>
@@ -205,16 +248,31 @@ function CardContent() {
 }
 
 function TodaysStandup({}: Props) {
+  const cardContentRef = useRef<CardContentRef>(null);
+
   return (
     <Card
       tabIndex={0}
       size={{
         initial: "2",
         sm: "4",
       }}
+      onKeyDown={(event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+          cardContentRef.current?.save();
+        }
+
+        if (event.key === "e") {
+          cardContentRef.current?.edit();
+        }
+
+        if (event.key === "Escape") {
+          cardContentRef.current?.cancel();
+        }
+      }}
     >
       <Suspense fallback={<FormSkeleton />}>
-        <CardContent />
+        <CardContent ref={cardContentRef} />
       </Suspense>
     </Card>
   );