From 45472bd0b17482b06368dd24b2a879f486e28a42 Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 12:06:54 +0800
Subject: [PATCH 01/11] feat: add generic form inputs

---
 package.json                          |   2 +
 pnpm-lock.yaml                        |  23 ++++
 src/components/form/form-input.tsx    |  52 ++++++++
 src/components/form/form-textarea.tsx |  55 ++++++++
 src/components/form/input.types.ts    |   8 ++
 src/components/ui/form.tsx            | 177 ++++++++++++++++++++++++++
 6 files changed, 317 insertions(+)
 create mode 100644 src/components/form/form-input.tsx
 create mode 100644 src/components/form/form-textarea.tsx
 create mode 100644 src/components/form/input.types.ts
 create mode 100644 src/components/ui/form.tsx

diff --git a/package.json b/package.json
index 87791ea..d2d5ae7 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "db:seed": "tsx --env-file=.env src/seed.ts"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
     "@libsql/client": "^0.6.0",
     "@milkdown/core": "^7.3.6",
     "@milkdown/ctx": "^7.3.6",
@@ -53,6 +54,7 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.3",
     "sonner": "^1.4.41",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index efa0b97..ff0df6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@hookform/resolvers':
+    specifier: ^3.3.4
+    version: 3.3.4(react-hook-form@7.51.3)
   '@libsql/client':
     specifier: ^0.6.0
     version: 0.6.0
@@ -125,6 +128,9 @@ dependencies:
   react-dom:
     specifier: ^18
     version: 18.2.0(react@18.2.0)
+  react-hook-form:
+    specifier: ^7.51.3
+    version: 7.51.3(react@18.2.0)
   sonner:
     specifier: ^1.4.41
     version: 1.4.41(react-dom@18.2.0)(react@18.2.0)
@@ -706,6 +712,14 @@ packages:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
     dev: false
 
+  /@hookform/resolvers@3.3.4(react-hook-form@7.51.3):
+    resolution: {integrity: sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+    dependencies:
+      react-hook-form: 7.51.3(react@18.2.0)
+    dev: false
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -5175,6 +5189,15 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-hook-form@7.51.3(react@18.2.0):
+    resolution: {integrity: sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true
diff --git a/src/components/form/form-input.tsx b/src/components/form/form-input.tsx
new file mode 100644
index 0000000..1a3105f
--- /dev/null
+++ b/src/components/form/form-input.tsx
@@ -0,0 +1,52 @@
+import { FormInputProps } from "@/components/form/input.types";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { FieldValues } from "react-hook-form";
+
+type FormTextInputProps<TFieldValues extends FieldValues> =
+  FormInputProps<TFieldValues> & {
+    placeholder?: string;
+    description?: string;
+    className?: string;
+  };
+
+export function FormTextInput<TFieldValues extends FieldValues>({
+  form,
+  name,
+  label,
+  disabled,
+  placeholder,
+  description,
+  className,
+}: FormTextInputProps<TFieldValues>) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          {label && <FormLabel>{label}</FormLabel>}
+          <FormControl>
+            <Input
+              className={className}
+              placeholder={placeholder}
+              disabled={disabled}
+              {...field}
+            />
+          </FormControl>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+FormTextInput.displayName = "FormTextInput";
diff --git a/src/components/form/form-textarea.tsx b/src/components/form/form-textarea.tsx
new file mode 100644
index 0000000..6ef4ae5
--- /dev/null
+++ b/src/components/form/form-textarea.tsx
@@ -0,0 +1,55 @@
+import { FormInputProps } from "@/components/form/input.types";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { FieldValues } from "react-hook-form";
+
+type FormTextareaProps<TFieldValues extends FieldValues> =
+  FormInputProps<TFieldValues> & {
+    placeholder?: string;
+    description?: string;
+    className?: string;
+    rows?: number;
+  };
+
+export function FormTextarea<TFieldValues extends FieldValues>({
+  form,
+  name,
+  label,
+  disabled,
+  className,
+  placeholder,
+  description,
+  rows,
+}: FormTextareaProps<TFieldValues>) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          {label && <FormLabel>{label}</FormLabel>}
+          <FormControl>
+            <Textarea
+              className={className}
+              placeholder={placeholder}
+              disabled={disabled}
+              rows={rows}
+              {...field}
+            />
+          </FormControl>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+FormTextarea.displayName = "FormTextarea";
diff --git a/src/components/form/input.types.ts b/src/components/form/input.types.ts
new file mode 100644
index 0000000..71ca3dc
--- /dev/null
+++ b/src/components/form/input.types.ts
@@ -0,0 +1,8 @@
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+
+export type FormInputProps<TFieldValues extends FieldValues> = {
+  form: UseFormReturn<TFieldValues>;
+  name: Path<TFieldValues>;
+  label?: string;
+  disabled?: boolean;
+};
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 0000000..530ba8f
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,177 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import { cn } from "@/utils/ui";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

From 57962cf3f6a7d4c6b0373d5a6ceec94ca962b8e6 Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 12:07:08 +0800
Subject: [PATCH 02/11] refactor: use react-hook-form in create flashcard

---
 .../flashcard/create-flashcard-form.tsx       | 149 +++++++++---------
 1 file changed, 75 insertions(+), 74 deletions(-)

diff --git a/src/components/flashcard/create-flashcard-form.tsx b/src/components/flashcard/create-flashcard-form.tsx
index 28672e0..92747ab 100644
--- a/src/components/flashcard/create-flashcard-form.tsx
+++ b/src/components/flashcard/create-flashcard-form.tsx
@@ -1,59 +1,70 @@
 "use client";
 
+import { FormTextarea } from "@/components/form/form-textarea";
 import { Button } from "@/components/ui/button";
 import {
   UiCard,
   UiCardContent,
   UiCardDescription,
+  UiCardFooter,
   UiCardHeader,
   UiCardTitle,
 } from "@/components/ui/card";
-import { Textarea } from "@/components/ui/textarea";
+import { Form } from "@/components/ui/form";
 import { useCreateCard } from "@/hooks/card/use-create-card";
 import { useDeleteCard } from "@/hooks/card/use-delete-card";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
-import { useRef, useState } from "react";
+import { useRef } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
 
 const MAX_INPUT_LENGTH = 20000;
 
+const formSchema = z.object({
+  question: z
+    .string()
+    .min(1, {
+      message: "Question is required.",
+    })
+    .max(MAX_INPUT_LENGTH, {
+      message: "Question is too long.",
+    }),
+  answer: z
+    .string()
+    .min(1, {
+      message: "Answer is required.",
+    })
+    .max(MAX_INPUT_LENGTH, {
+      message: "Answer is too long.",
+    }),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
 export default function CreateFlashcardForm() {
-  const [question, setQuestion] = useState<string>("");
-  const [answer, setAnswer] = useState<string>("");
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      question: "",
+      answer: "",
+    },
+  });
 
   const cardRef = useRef<HTMLDivElement>(null);
-
   const createCardMutation = useCreateCard();
   const deleteCardMutation = useDeleteCard();
   const isLoading =
     createCardMutation.isPending || deleteCardMutation.isPending;
 
-  const onCreate = async () => {
-    if (!question || !answer) {
-      toast.error("Please fill in the question and answer.");
-      return;
-    }
-
-    if (question.length > MAX_INPUT_LENGTH) {
-      toast.error("Question is too long.");
-      return;
-    }
-
-    if (answer.length > MAX_INPUT_LENGTH) {
-      toast.error("Answer is too long.");
-      return;
-    }
-
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
     try {
-      const card = await createCardMutation.mutateAsync({
-        question,
-        answer,
-      });
-
+      const card = await createCardMutation.mutateAsync(data);
       const rollback = () => {
         deleteCardMutation.mutate(card.cards.id);
-        setQuestion(card.card_contents.question);
-        setAnswer(card.card_contents.answer);
+        form.setValue("question", data.question);
+        form.setValue("answer", data.answer);
       };
 
       toast.success("Card created.", {
@@ -62,64 +73,54 @@ export default function CreateFlashcardForm() {
           onClick: rollback,
         },
       });
-      setQuestion("");
-      setAnswer("");
+
+      form.reset();
     } catch (err) {
       toast.error("Failed to create card");
     }
   };
 
   return (
-    <UiCard className="w-full md:w-[36rem]" ref={cardRef}>
-      <UiCardHeader>
+    <UiCard className="w-full border-0 md:w-[36rem] md:border" ref={cardRef}>
+      <UiCardHeader className="px-2 md:px-6">
         <UiCardTitle>Create</UiCardTitle>
         <UiCardDescription>
           Fill in the question and answer to your flashcard.
         </UiCardDescription>
       </UiCardHeader>
 
-      <UiCardContent className="flex min-h-96 flex-col gap-y-4">
-        <Textarea
-          className="h-40 resize-none border-0"
-          disabled={isLoading}
-          spellCheck="false"
-          placeholder="Question"
-          value={question}
-          onChange={(e) => {
-            setQuestion(e.target.value);
-          }}
-          onKeyDown={(e) => e.stopPropagation()}
-        />
-
-        <hr className="mx-auto w-8" />
-
-        <Textarea
-          className="h-40 resize-none border-0"
-          disabled={isLoading}
-          spellCheck="false"
-          placeholder="Answer"
-          value={answer}
-          onChange={(e) => {
-            setAnswer(e.target.value);
-          }}
-          onKeyDown={(e) => e.stopPropagation()}
-        />
-      </UiCardContent>
-
-      <UiCardContent className="h-24">
-        <Button
-          className="mt-4 w-full"
-          disabled={isLoading || !question || !answer}
-          size="lg"
-          variant="outline"
-          onClick={() => onCreate()}
-        >
-          {createCardMutation.isPending && (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          )}
-          Create
-        </Button>
-      </UiCardContent>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <UiCardContent className="flex min-h-96 flex-col gap-y-4 px-2 md:px-6">
+            <FormTextarea
+              name="question"
+              label="Question"
+              form={form}
+              disabled={isLoading}
+            />
+            <FormTextarea
+              name="answer"
+              label="Answer"
+              form={form}
+              disabled={isLoading}
+            />
+          </UiCardContent>
+          <UiCardFooter className="px-2 md:px-6">
+            <Button
+              className="mt-4 w-full"
+              disabled={isLoading}
+              type="submit"
+              size="lg"
+              variant="outline"
+            >
+              {createCardMutation.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Create
+            </Button>
+          </UiCardFooter>
+        </form>
+      </Form>
     </UiCard>
   );
 }

From 38f9398668750658cd76488aa90d092731ba4b98 Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 13:08:55 +0800
Subject: [PATCH 03/11] feat: add markdown editor form

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 32 ++++++++-
 .../flashcard/create-flashcard-form.tsx       | 23 +++++--
 src/components/flashcard/flashcard.tsx        |  6 +-
 src/components/form/form-input.tsx            |  8 +--
 src/components/form/form-markdown-editor.tsx  | 50 ++++++++++++++
 src/components/form/form-textarea.tsx         |  2 +-
 src/components/markdown-editor.tsx            | 68 ++++++++++---------
 8 files changed, 144 insertions(+), 46 deletions(-)
 create mode 100644 src/components/form/form-markdown-editor.tsx

diff --git a/package.json b/package.json
index d2d5ae7..61f4183 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@milkdown/ctx": "^7.3.6",
     "@milkdown/plugin-clipboard": "^7.3.6",
     "@milkdown/plugin-history": "^7.3.6",
+    "@milkdown/plugin-listener": "^7.3.6",
     "@milkdown/preset-commonmark": "^7.3.6",
     "@milkdown/preset-gfm": "^7.3.6",
     "@milkdown/prose": "^7.3.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ff0df6e..acdc400 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   '@milkdown/plugin-history':
     specifier: ^7.3.6
     version: 7.3.6(@milkdown/core@7.3.6)(@milkdown/ctx@7.3.6)(@milkdown/prose@7.3.6)(@milkdown/transformer@7.3.6)
+  '@milkdown/plugin-listener':
+    specifier: ^7.3.6
+    version: 7.3.6(@milkdown/core@7.3.6)(@milkdown/ctx@7.3.6)(@milkdown/prose@7.3.6)(@milkdown/transformer@7.3.6)
   '@milkdown/preset-commonmark':
     specifier: ^7.3.6
     version: 7.3.6(@milkdown/core@7.3.6)(@milkdown/ctx@7.3.6)(@milkdown/prose@7.3.6)(@milkdown/transformer@7.3.6)
@@ -939,6 +942,24 @@ packages:
       - '@milkdown/transformer'
     dev: false
 
+  /@milkdown/plugin-listener@7.3.6(@milkdown/core@7.3.6)(@milkdown/ctx@7.3.6)(@milkdown/prose@7.3.6)(@milkdown/transformer@7.3.6):
+    resolution: {integrity: sha512-sp9w36Vn/XLSCKl/4fqUIz2NNJnU1hXzX5X/XHH3WXCszqs6cJPRTtR6k8wAoTG2le0sW8EOdmptdjEsC2w5+Q==}
+    peerDependencies:
+      '@milkdown/core': ^7.2.0
+      '@milkdown/ctx': ^7.2.0
+      '@milkdown/prose': ^7.2.0
+    dependencies:
+      '@milkdown/core': 7.3.6(@milkdown/ctx@7.3.6)(@milkdown/prose@7.3.6)(@milkdown/transformer@7.3.6)
+      '@milkdown/ctx': 7.3.6
+      '@milkdown/prose': 7.3.6
+      '@milkdown/utils': 7.3.6(@milkdown/core@7.3.6)(@milkdown/ctx@7.3.6)(@milkdown/prose@7.3.6)(@milkdown/transformer@7.3.6)
+      '@types/lodash.debounce': 4.0.9
+      lodash.debounce: 4.0.8
+      tslib: 2.6.2
+    transitivePeerDependencies:
+      - '@milkdown/transformer'
+    dev: false
+
   /@milkdown/preset-commonmark@7.3.6(@milkdown/core@7.3.6)(@milkdown/ctx@7.3.6)(@milkdown/prose@7.3.6)(@milkdown/transformer@7.3.6):
     resolution: {integrity: sha512-AUhrcyPMPXWnHJLIth/cK4IHTshlJgIw2RavFOmE2IyTxjgN4JCLg8MSla5wqwNUcdDMxKH0VmVyNImwt+c4Mg==}
     peerDependencies:
@@ -2000,9 +2021,14 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/lodash.debounce@4.0.9:
+    resolution: {integrity: sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==}
+    dependencies:
+      '@types/lodash': 4.17.0
+    dev: false
+
   /@types/lodash@4.17.0:
     resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==}
-    dev: true
 
   /@types/mdast@4.0.3:
     resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}
@@ -4104,6 +4130,10 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+    dev: false
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
diff --git a/src/components/flashcard/create-flashcard-form.tsx b/src/components/flashcard/create-flashcard-form.tsx
index 92747ab..43ad2f7 100644
--- a/src/components/flashcard/create-flashcard-form.tsx
+++ b/src/components/flashcard/create-flashcard-form.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { FormMarkdownEditor } from "@/components/form/form-markdown-editor";
 import { FormTextarea } from "@/components/form/form-textarea";
 import { Button } from "@/components/ui/button";
 import {
@@ -15,7 +16,7 @@ import { useCreateCard } from "@/hooks/card/use-create-card";
 import { useDeleteCard } from "@/hooks/card/use-delete-card";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -52,6 +53,11 @@ export default function CreateFlashcardForm() {
     },
   });
 
+  // This is a hack to force the markdown editor to re-render
+  const [markdownEditorKey, setMarkdownEditorKey] = useState<string>(
+    crypto.randomUUID(),
+  );
+
   const cardRef = useRef<HTMLDivElement>(null);
   const createCardMutation = useCreateCard();
   const deleteCardMutation = useDeleteCard();
@@ -59,12 +65,18 @@ export default function CreateFlashcardForm() {
     createCardMutation.isPending || deleteCardMutation.isPending;
 
   const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    console.log(JSON.stringify(data, null, 2));
     try {
       const card = await createCardMutation.mutateAsync(data);
       const rollback = () => {
-        deleteCardMutation.mutate(card.cards.id);
+        // We have to set the value before the re-render triggers
         form.setValue("question", data.question);
         form.setValue("answer", data.answer);
+        deleteCardMutation.mutate(card.cards.id);
+
+        setTimeout(() => {
+          setMarkdownEditorKey(crypto.randomUUID());
+        }, 500);
       };
 
       toast.success("Card created.", {
@@ -75,6 +87,7 @@ export default function CreateFlashcardForm() {
       });
 
       form.reset();
+      setMarkdownEditorKey(crypto.randomUUID());
     } catch (err) {
       toast.error("Failed to create card");
     }
@@ -92,13 +105,15 @@ export default function CreateFlashcardForm() {
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <UiCardContent className="flex min-h-96 flex-col gap-y-4 px-2 md:px-6">
-            <FormTextarea
+            <FormMarkdownEditor
+              key={markdownEditorKey + "question"}
               name="question"
               label="Question"
               form={form}
               disabled={isLoading}
             />
-            <FormTextarea
+            <FormMarkdownEditor
+              key={markdownEditorKey + "answer"}
               name="answer"
               label="Answer"
               form={form}
diff --git a/src/components/flashcard/flashcard.tsx b/src/components/flashcard/flashcard.tsx
index afee31b..a90b97d 100644
--- a/src/components/flashcard/flashcard.tsx
+++ b/src/components/flashcard/flashcard.tsx
@@ -3,7 +3,7 @@
 import AnswerButtons from "@/components/flashcard/answer-buttons";
 import CardCountBadge from "@/components/flashcard/card-count-badge";
 import FlashcardState from "@/components/flashcard/flashcard-state";
-import { MilkdownEditorWrapper } from "@/components/markdown-editor";
+import { MarkdownEditor } from "@/components/markdown-editor";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -194,7 +194,7 @@ export default function Flashcard({
           onKeyDown={(e) => e.stopPropagation()}
           onDoubleClick={() => setEditing(true)}
         >
-          <MilkdownEditorWrapper
+          <MarkdownEditor
             initialContent={question}
             editing={editing}
             onSaveContent={onSaveQuestion}
@@ -206,7 +206,7 @@ export default function Flashcard({
           onKeyDown={(e) => e.stopPropagation()}
           onDoubleClick={() => setEditing(true)}
         >
-          <MilkdownEditorWrapper
+          <MarkdownEditor
             initialContent={answer}
             editing={editing}
             onSaveContent={onSaveAnswer}
diff --git a/src/components/form/form-input.tsx b/src/components/form/form-input.tsx
index 1a3105f..ab81786 100644
--- a/src/components/form/form-input.tsx
+++ b/src/components/form/form-input.tsx
@@ -30,16 +30,12 @@ export function FormTextInput<TFieldValues extends FieldValues>({
     <FormField
       control={form.control}
       name={name}
+      disabled={disabled}
       render={({ field }) => (
         <FormItem>
           {label && <FormLabel>{label}</FormLabel>}
           <FormControl>
-            <Input
-              className={className}
-              placeholder={placeholder}
-              disabled={disabled}
-              {...field}
-            />
+            <Input className={className} placeholder={placeholder} {...field} />
           </FormControl>
           {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />
diff --git a/src/components/form/form-markdown-editor.tsx b/src/components/form/form-markdown-editor.tsx
new file mode 100644
index 0000000..f51109a
--- /dev/null
+++ b/src/components/form/form-markdown-editor.tsx
@@ -0,0 +1,50 @@
+import { FormInputProps } from "@/components/form/input.types";
+import { MarkdownEditor } from "@/components/markdown-editor";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { FieldValues } from "react-hook-form";
+
+type FormMarkdownEditorProps<TFieldValues extends FieldValues> =
+  FormInputProps<TFieldValues> & {
+    editing?: boolean;
+  };
+
+/**
+ * Form field for a markdown rich text editor.
+ *
+ * Note: provide a `key` prop to force re-rendering of the editor.
+ * The editor only reads the initial `value` on mount.
+ * After that, it manages its own state.
+ * This is the prevent the editor from constantly serialising and deserialising the content.
+ *
+ */
+export function FormMarkdownEditor<TFieldValues extends FieldValues>({
+  form,
+  name,
+  disabled,
+  label,
+}: FormMarkdownEditorProps<TFieldValues>) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      disabled={disabled}
+      render={({ field }) => (
+        <FormItem>
+          {label && <FormLabel>{label}</FormLabel>}
+          <FormControl>
+            <MarkdownEditor {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+FormMarkdownEditor.displayName = "FormMarkdownEditor";
diff --git a/src/components/form/form-textarea.tsx b/src/components/form/form-textarea.tsx
index 6ef4ae5..74ca523 100644
--- a/src/components/form/form-textarea.tsx
+++ b/src/components/form/form-textarea.tsx
@@ -32,6 +32,7 @@ export function FormTextarea<TFieldValues extends FieldValues>({
     <FormField
       control={form.control}
       name={name}
+      disabled={disabled}
       render={({ field }) => (
         <FormItem>
           {label && <FormLabel>{label}</FormLabel>}
@@ -39,7 +40,6 @@ export function FormTextarea<TFieldValues extends FieldValues>({
             <Textarea
               className={className}
               placeholder={placeholder}
-              disabled={disabled}
               rows={rows}
               {...field}
             />
diff --git a/src/components/markdown-editor.tsx b/src/components/markdown-editor.tsx
index 34b34e0..b4980d1 100644
--- a/src/components/markdown-editor.tsx
+++ b/src/components/markdown-editor.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { cn } from "@/utils/ui";
 import {
   Editor,
   defaultValueCtx,
@@ -10,6 +9,8 @@ import {
   serializerCtx,
 } from "@milkdown/core";
 import { clipboard } from "@milkdown/plugin-clipboard";
+import { history } from "@milkdown/plugin-history";
+import { listener, listenerCtx } from "@milkdown/plugin-listener";
 import {
   blockquoteAttr,
   bulletListAttr,
@@ -21,30 +22,37 @@ import {
 import { gfm } from "@milkdown/preset-gfm";
 import { Milkdown, MilkdownProvider, useEditor } from "@milkdown/react";
 import { useEffect, useRef } from "react";
-import { history } from "@milkdown/plugin-history";
 
 type Props = {
-  initialContent: string;
-  editing: boolean;
-  onSaveContent: (content: string) => void;
+  value: string;
+  disabled?: boolean;
+  onChange?: (content: string) => void;
 };
 
 const editorClasses =
   "milkdown-editor mx-auto outline-none h-60 overflow-y-auto border border-input px-3 py-2 rounded-md";
 
-const MilkdownEditor = ({ initialContent, editing, onSaveContent }: Props) => {
+export function getMarkdown(editor: Editor | undefined) {
+  if (!editor) return "";
+
+  return editor.action((ctx) => {
+    const editorView = ctx.get(editorViewCtx);
+    const serializer = ctx.get(serializerCtx);
+    return serializer(editorView.state.doc);
+  });
+}
+
+const MilkdownEditor = ({ disabled, value, onChange }: Props) => {
   // Create a ref to store the current editing state
-  const editingRef = useRef(editing);
+  const disabledRef = useRef(disabled);
   useEffect(() => {
-    console.log("editable", editing);
-    editingRef.current = editing;
-  }, [editing]);
-  const isEditing = () => editingRef.current;
+    disabledRef.current = disabled;
+  }, [disabled]);
+  const isEditable = () => !disabledRef.current;
 
   const { get } = useEditor((root) =>
     Editor.make()
       .config((ctx) => {
-        console.log("Editor");
         ctx.set(rootCtx, root);
 
         // Add attributes to the editor container
@@ -54,7 +62,7 @@ const MilkdownEditor = ({ initialContent, editing, onSaveContent }: Props) => {
             class: editorClasses,
             spellcheck: "false",
           },
-          editable: isEditing,
+          editable: isEditable,
         }));
 
         // Add attributes to nodes and marks
@@ -112,36 +120,34 @@ const MilkdownEditor = ({ initialContent, editing, onSaveContent }: Props) => {
             "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
         }));
 
-        ctx.set(defaultValueCtx, initialContent);
+        ctx.set(defaultValueCtx, value);
+
+        const listener = ctx.get(listenerCtx);
+        listener.markdownUpdated((ctx, markdown, prevMarkdown) => {
+          if (markdown === prevMarkdown) {
+            return;
+          }
+          onChange && onChange(markdown);
+        });
       })
       .use(commonmark)
       .use(gfm)
       .use(clipboard)
-      .use(history),
+      .use(history)
+      .use(listener),
   );
 
-  const editor = get();
-
-  useEffect(() => {
-    if (editing) return;
-
-    if (!editor) return;
-    const markdown = editor.action((ctx) => {
-      const editorView = ctx.get(editorViewCtx);
-      const serializer = ctx.get(serializerCtx);
-      return serializer(editorView.state.doc);
-    });
-
-    onSaveContent(markdown);
-  }, [editing, onSaveContent, editor]);
-
   return <Milkdown />;
 };
 
-export const MilkdownEditorWrapper = (props: Props) => {
+MilkdownEditor.displayName = "MilkdownEditor";
+
+export const MarkdownEditor = (props: Props) => {
   return (
     <MilkdownProvider>
       <MilkdownEditor {...props} />
     </MilkdownProvider>
   );
 };
+
+MarkdownEditor.displayName = "MarkdownEditor";

From 5469d26db941d3141d3f5a97f0e1d53f3d789657 Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 13:15:20 +0800
Subject: [PATCH 04/11] refactor: extract schema to separate file

---
 .../flashcard/create-flashcard-form.tsx       | 41 ++++---------------
 src/form.ts                                   | 29 +++++++++++++
 2 files changed, 38 insertions(+), 32 deletions(-)
 create mode 100644 src/form.ts

diff --git a/src/components/flashcard/create-flashcard-form.tsx b/src/components/flashcard/create-flashcard-form.tsx
index 43ad2f7..39c9805 100644
--- a/src/components/flashcard/create-flashcard-form.tsx
+++ b/src/components/flashcard/create-flashcard-form.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { FormMarkdownEditor } from "@/components/form/form-markdown-editor";
-import { FormTextarea } from "@/components/form/form-textarea";
 import { Button } from "@/components/ui/button";
 import {
   UiCard,
@@ -12,6 +11,11 @@ import {
   UiCardTitle,
 } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
+import {
+  CardContentFormValues,
+  cardContentDefaultValues,
+  cardContentFormSchema,
+} from "@/form";
 import { useCreateCard } from "@/hooks/card/use-create-card";
 import { useDeleteCard } from "@/hooks/card/use-delete-card";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -19,38 +23,11 @@ import { Loader2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
-
-const MAX_INPUT_LENGTH = 20000;
-
-const formSchema = z.object({
-  question: z
-    .string()
-    .min(1, {
-      message: "Question is required.",
-    })
-    .max(MAX_INPUT_LENGTH, {
-      message: "Question is too long.",
-    }),
-  answer: z
-    .string()
-    .min(1, {
-      message: "Answer is required.",
-    })
-    .max(MAX_INPUT_LENGTH, {
-      message: "Answer is too long.",
-    }),
-});
-
-type FormValues = z.infer<typeof formSchema>;
 
 export default function CreateFlashcardForm() {
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      question: "",
-      answer: "",
-    },
+  const form = useForm<CardContentFormValues>({
+    resolver: zodResolver(cardContentFormSchema),
+    defaultValues: cardContentDefaultValues,
   });
 
   // This is a hack to force the markdown editor to re-render
@@ -64,7 +41,7 @@ export default function CreateFlashcardForm() {
   const isLoading =
     createCardMutation.isPending || deleteCardMutation.isPending;
 
-  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+  const onSubmit: SubmitHandler<CardContentFormValues> = async (data) => {
     console.log(JSON.stringify(data, null, 2));
     try {
       const card = await createCardMutation.mutateAsync(data);
diff --git a/src/form.ts b/src/form.ts
new file mode 100644
index 0000000..4167466
--- /dev/null
+++ b/src/form.ts
@@ -0,0 +1,29 @@
+import { z } from "zod";
+
+const MAX_INPUT_LENGTH = 20000;
+
+export const cardContentFormSchema = z.object({
+  question: z
+    .string()
+    .min(1, {
+      message: "Question is required.",
+    })
+    .max(MAX_INPUT_LENGTH, {
+      message: "Question is too long.",
+    }),
+  answer: z
+    .string()
+    .min(1, {
+      message: "Answer is required.",
+    })
+    .max(MAX_INPUT_LENGTH, {
+      message: "Answer is too long.",
+    }),
+});
+
+export type CardContentFormValues = z.infer<typeof cardContentFormSchema>;
+
+export const cardContentDefaultValues = {
+  question: "",
+  answer: "",
+} satisfies CardContentFormValues;

From d3c7009a6784f15dc73b2af4592571b953ea5fdd Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 13:33:34 +0800
Subject: [PATCH 05/11] fix: update flashcard with new form

---
 src/components/flashcard/flashcard-box.tsx |   4 +-
 src/components/flashcard/flashcard.tsx     | 114 +++++++++------------
 2 files changed, 52 insertions(+), 66 deletions(-)

diff --git a/src/components/flashcard/flashcard-box.tsx b/src/components/flashcard/flashcard-box.tsx
index 2fc66bc..e872e18 100644
--- a/src/components/flashcard/flashcard-box.tsx
+++ b/src/components/flashcard/flashcard-box.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import CardCountBadge from "@/components/flashcard/card-count-badge";
 import Flashcard from "@/components/flashcard/flashcard";
 import { useGradeCard } from "@/hooks/card/use-grade-card";
 import { type Rating } from "@/schema";
@@ -99,7 +98,10 @@ export default function FlashcardBox({}: Props) {
   return (
     <div className="flex w-full flex-col items-center gap-y-2 ">
       {isCard && (
+        // We trigger a full re-render when the card changes
+        // Currently, there's no need to optimise the rendering
         <Flashcard
+          key={card.cards.id}
           stats={stats}
           card={card}
           onRating={onRating}
diff --git a/src/components/flashcard/flashcard.tsx b/src/components/flashcard/flashcard.tsx
index a90b97d..8d0c8f8 100644
--- a/src/components/flashcard/flashcard.tsx
+++ b/src/components/flashcard/flashcard.tsx
@@ -3,7 +3,7 @@
 import AnswerButtons from "@/components/flashcard/answer-buttons";
 import CardCountBadge from "@/components/flashcard/card-count-badge";
 import FlashcardState from "@/components/flashcard/flashcard-state";
-import { MarkdownEditor } from "@/components/markdown-editor";
+import { FormMarkdownEditor } from "@/components/form/form-markdown-editor";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -25,8 +25,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import EditableTextarea from "@/components/ui/editable-textarea";
+import { Form } from "@/components/ui/form";
 import { Toggle } from "@/components/ui/toggle";
+import { CardContentFormValues, cardContentFormSchema } from "@/form";
 import { useDeleteCard } from "@/hooks/card/use-delete-card";
 import { useEditCard } from "@/hooks/card/use-edit-card";
 import { useClickOutside } from "@/hooks/use-click-outside";
@@ -34,9 +35,11 @@ import useKeydownRating from "@/hooks/use-keydown-rating";
 import { Rating, type Card } from "@/schema";
 import { SessionCard, SessionStats } from "@/utils/session";
 import { cn } from "@/utils/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
 import _ from "lodash";
 import { FilePenIcon, Info, TrashIcon } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
 
 type Props = {
   card: SessionCard;
@@ -59,19 +62,22 @@ export default function Flashcard({
   const [editing, setEditing] = useState(false);
   const cardRef = useRef<HTMLDivElement>(null);
 
-  const [content, setContent] = useState({
-    question: initialCardContent.question,
-    answer: initialCardContent.answer,
-    id: initialCardContent.id,
+  const form = useForm<CardContentFormValues>({
+    resolver: zodResolver(cardContentFormSchema),
+    defaultValues: {
+      question: initialCardContent.question,
+      answer: initialCardContent.answer,
+    },
   });
-  const { id, question, answer } = content;
 
   const editCardMutation = useEditCard();
   const deleteCard = useDeleteCard();
 
   const handleEdit = () => {
-    const hasCardChanged = content.id !== initialCardContent.id;
-    if (hasCardChanged) return;
+    // `getValues()` will be undefined if the form is disabled
+    // TODO use readonly field instead
+    // See https://www.react-hook-form.com/api/useform/getvalues/#:~:text=%5B%27%27%5D-,Rules,-Disabled%20inputs%20will
+    const content = form.getValues();
 
     const isQuestionAnswerSame =
       content.question === initialCardContent.question &&
@@ -79,47 +85,22 @@ export default function Flashcard({
     if (isQuestionAnswerSame) return;
 
     editCardMutation.mutate({
-      cardContentId: id,
-      question,
-      answer,
+      cardContentId: initialCardContent.id,
+      question: content.question,
+      answer: content.answer,
     });
   };
 
-  // useCallback is necessary to prevent infinite loop
-  // Infinite loop occurs because onSaveContent is used in a
-  // useEffect in MilkdownEditorWrapper
-  const onSaveQuestion = useCallback(
-    (content: string) => {
-      setContent((prev) => ({ ...prev, question: content }));
-    },
-    [setContent],
-  );
-  const onSaveAnswer = useCallback(
-    (content: string) => {
-      setContent((prev) => ({ ...prev, answer: content }));
-    },
-    [setContent],
-  );
-
   useKeydownRating(onRating, open, () => setOpen(!open));
   useClickOutside({
     ref: cardRef,
     enabled: editing,
     callback: () => {
+      handleEdit();
       setEditing(false);
-      setTimeout(handleEdit, 500);
     },
   });
 
-  useEffect(() => {
-    setContent(initialCardContent);
-  }, [initialCardContent]);
-
-  useEffect(() => {
-    setOpen(false);
-    setEditing(false);
-  }, [sessionCard.cards.id]);
-
   return (
     <div className="flex w-full flex-col gap-y-2 md:w-[36rem]" ref={cardRef}>
       <div className="flex justify-end gap-x-2">
@@ -134,8 +115,9 @@ export default function Flashcard({
           pressed={editing}
           onPressedChange={(isEditing) => {
             if (!isEditing) {
-              setTimeout(handleEdit, 500);
+              handleEdit();
             }
+
             setEditing(isEditing);
           }}
         >
@@ -188,31 +170,33 @@ export default function Flashcard({
         </AlertDialog>
       </div>
 
-      <div className="flex flex-col gap-y-2">
-        <div
-          className={cn("h-60 w-full", editing ? "bg-muted" : "")}
-          onKeyDown={(e) => e.stopPropagation()}
-          onDoubleClick={() => setEditing(true)}
-        >
-          <MarkdownEditor
-            initialContent={question}
-            editing={editing}
-            onSaveContent={onSaveQuestion}
-          />
-        </div>
-
-        <div
-          className={cn("h-60 w-full", editing ? "bg-muted" : "")}
-          onKeyDown={(e) => e.stopPropagation()}
-          onDoubleClick={() => setEditing(true)}
-        >
-          <MarkdownEditor
-            initialContent={answer}
-            editing={editing}
-            onSaveContent={onSaveAnswer}
-          />
-        </div>
-      </div>
+      <Form {...form}>
+        <form action="">
+          <div className="flex flex-col gap-y-2">
+            <div
+              className={cn("h-60 w-full", editing ? "bg-muted" : "")}
+              onKeyDown={(e) => e.stopPropagation()}
+            >
+              <FormMarkdownEditor
+                name="question"
+                form={form}
+                disabled={!editing}
+              />
+            </div>
+
+            <div
+              className={cn("h-60 w-full", editing ? "bg-muted" : "")}
+              onKeyDown={(e) => e.stopPropagation()}
+            >
+              <FormMarkdownEditor
+                name="answer"
+                form={form}
+                disabled={!editing}
+              />
+            </div>
+          </div>
+        </form>
+      </Form>
       {open && (
         <UiCard>
           <AnswerButtons

From 6f536a8661bdd5be489ff7d3550b17474ef3af7a Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 13:40:16 +0800
Subject: [PATCH 06/11] feat: add back spoiler for card reveal

---
 src/components/flashcard/flashcard.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/flashcard/flashcard.tsx b/src/components/flashcard/flashcard.tsx
index 8d0c8f8..e42f81d 100644
--- a/src/components/flashcard/flashcard.tsx
+++ b/src/components/flashcard/flashcard.tsx
@@ -91,7 +91,7 @@ export default function Flashcard({
     });
   };
 
-  useKeydownRating(onRating, open, () => setOpen(!open));
+  useKeydownRating(onRating, open, () => setOpen(true));
   useClickOutside({
     ref: cardRef,
     enabled: editing,
@@ -185,9 +185,21 @@ export default function Flashcard({
             </div>
 
             <div
-              className={cn("h-60 w-full", editing ? "bg-muted" : "")}
+              className={cn("relative h-60 w-full", editing ? "bg-muted" : "")}
               onKeyDown={(e) => e.stopPropagation()}
             >
+              <div
+                className={cn(
+                  "group absolute -bottom-0 h-full w-full cursor-pointer rounded-lg bg-background shadow-sm ring-1 ring-primary/10 transition duration-200 slide-in-from-top-20 hover:bg-background/90 hover:backdrop-blur-sm",
+                  open ? "hidden" : "",
+                )}
+                onClick={() => setOpen(true)}
+              >
+                <div className="flex h-full w-full items-center justify-center text-muted-foreground transition group-hover:opacity-0">
+                  Reveal
+                </div>
+              </div>
+
               <FormMarkdownEditor
                 name="answer"
                 form={form}
@@ -197,6 +209,7 @@ export default function Flashcard({
           </div>
         </form>
       </Form>
+
       {open && (
         <UiCard>
           <AnswerButtons

From 0994ccdac3d14d45f8b4c136ecdb7bd76c087877 Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 13:53:00 +0800
Subject: [PATCH 07/11] refactor: use form for decks

---
 src/components/decks/create-deck-form.tsx | 102 ++++++++++------------
 src/form.ts                               |  22 +++++
 2 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/src/components/decks/create-deck-form.tsx b/src/components/decks/create-deck-form.tsx
index 1bb7f63..d1b30fa 100644
--- a/src/components/decks/create-deck-form.tsx
+++ b/src/components/decks/create-deck-form.tsx
@@ -1,39 +1,38 @@
 "use client";
 
+import { FormTextInput } from "@/components/form/form-input";
+import { FormTextarea } from "@/components/form/form-textarea";
 import { Button } from "@/components/ui/button";
 import {
   UiCard,
   UiCardContent,
   UiCardDescription,
+  UiCardFooter,
   UiCardHeader,
   UiCardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Textarea, TextareaClasses } from "@/components/ui/textarea";
+import { Form } from "@/components/ui/form";
+import { DeckFormValues, deckDefaultValues, deckFormSchema } from "@/form";
 import { useCreateDeck } from "@/hooks/deck/use-create-deck";
-import { RouterInputs } from "@/utils/trpc";
-import { cn } from "@/utils/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
-import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
 
-type DeckInputs = RouterInputs["deck"]["create"];
-
-const emptyDeck = {
-  name: "",
-  description: "",
-} satisfies DeckInputs;
-
 export function CreateDeckForm() {
   const createDeckMutation = useCreateDeck();
-  const [deck, setDeck] = useState<DeckInputs>(structuredClone(emptyDeck));
+  const form = useForm<DeckFormValues>({
+    resolver: zodResolver(deckFormSchema),
+    defaultValues: deckDefaultValues,
+  });
+
   const isLoading = createDeckMutation.isPending;
 
-  const handleCreate = () => {
-    toast.promise(createDeckMutation.mutateAsync(deck), {
+  const onSubmit: SubmitHandler<DeckFormValues> = (data) => {
+    toast.promise(createDeckMutation.mutateAsync(data), {
       loading: "Creating deck...",
       success: () => {
-        setDeck(structuredClone(emptyDeck));
+        form.reset();
         return "Deck created.";
       },
       error: "Failed to create deck.",
@@ -41,51 +40,46 @@ export function CreateDeckForm() {
   };
 
   return (
-    <UiCard className="w-full md:w-[36rem]">
-      <UiCardHeader>
+    <UiCard className="w-full border-0 md:w-[36rem] md:border">
+      <UiCardHeader className="px-2 md:px-6">
         <UiCardTitle>Create</UiCardTitle>
         <UiCardDescription>
           Provide a name and description for your new deck.
         </UiCardDescription>
       </UiCardHeader>
 
-      <UiCardContent className="flex min-h-96 flex-col gap-y-4">
-        <Input
-          placeholder="Name"
-          className={cn("text-md")}
-          value={deck.name}
-          onChange={(e) => setDeck({ ...deck, name: e.target.value })}
-        />
-        <Textarea
-          className="h-40 resize-none border-0"
-          disabled={isLoading}
-          spellCheck="false"
-          placeholder="Description"
-          value={deck.description}
-          onChange={(e) => {
-            setDeck({
-              ...deck,
-              description: e.target.value,
-            });
-          }}
-          onKeyDown={(e) => e.stopPropagation()}
-        />
-
-        <hr className="mx-auto w-8" />
-      </UiCardContent>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <UiCardContent className="flex min-h-96 flex-col gap-y-4 px-2 md:px-6">
+            <FormTextInput
+              name="name"
+              label="Name"
+              form={form}
+              disabled={isLoading}
+            />
+            <hr className="mx-auto w-8" />
+            <FormTextarea
+              name="description"
+              label="Description"
+              form={form}
+              disabled={isLoading}
+            />
+          </UiCardContent>
 
-      <UiCardContent className="h-24">
-        <Button
-          className="mt-4 w-full"
-          disabled={isLoading || !deck.name}
-          size="lg"
-          variant="outline"
-          onClick={() => handleCreate()}
-        >
-          {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          Create
-        </Button>
-      </UiCardContent>
+          <UiCardFooter className="px-2 md:px-6">
+            <Button
+              className="mt-4 w-full"
+              disabled={isLoading}
+              size="lg"
+              variant="outline"
+              type="submit"
+            >
+              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Create
+            </Button>
+          </UiCardFooter>
+        </form>
+      </Form>
     </UiCard>
   );
 }
diff --git a/src/form.ts b/src/form.ts
index 4167466..c6fdaf1 100644
--- a/src/form.ts
+++ b/src/form.ts
@@ -1,3 +1,4 @@
+import { RouterInputs } from "@/utils/trpc";
 import { z } from "zod";
 
 const MAX_INPUT_LENGTH = 20000;
@@ -27,3 +28,24 @@ export const cardContentDefaultValues = {
   question: "",
   answer: "",
 } satisfies CardContentFormValues;
+
+export const deckFormSchema = z.object({
+  name: z
+    .string()
+    .min(1, {
+      message: "Name is required.",
+    })
+    .max(50, {
+      message: "Name is too long.",
+    }),
+  description: z.string().max(MAX_INPUT_LENGTH, {
+    message: "Description is too long.",
+  }),
+});
+
+export type DeckFormValues = z.infer<typeof deckFormSchema>;
+
+export const deckDefaultValues = {
+  name: "",
+  description: "",
+} satisfies DeckFormValues;

From c5e7fa78cb4371cf5bc53dede4e9c85f4b76e2ba Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:38:29 +0800
Subject: [PATCH 08/11] feat: add select component

---
 package.json                        |   1 +
 pnpm-lock.yaml                      |  44 ++++++++
 src/components/form/form-select.tsx | 125 ++++++++++++++++++++++
 src/components/ui/select.tsx        | 160 ++++++++++++++++++++++++++++
 4 files changed, 330 insertions(+)
 create mode 100644 src/components/form/form-select.tsx
 create mode 100644 src/components/ui/select.tsx

diff --git a/package.json b/package.json
index 61f4183..a95a8f2 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acdc400..0306aa1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ dependencies:
   '@radix-ui/react-scroll-area':
     specifier: ^1.0.5
     version: 1.0.5(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-select':
+    specifier: ^2.0.0
+    version: 2.0.0(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-slot':
     specifier: ^1.0.2
     version: 1.0.2(@types/react@18.2.74)(react@18.2.0)
@@ -1715,6 +1718,47 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-select@2.0.0(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.74)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.74
+      '@types/react-dom': 18.2.24
+      aria-hidden: 1.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.74)(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.74)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
diff --git a/src/components/form/form-select.tsx b/src/components/form/form-select.tsx
new file mode 100644
index 0000000..8370e71
--- /dev/null
+++ b/src/components/form/form-select.tsx
@@ -0,0 +1,125 @@
+import { FormInputProps } from "@/components/form/input.types";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+} from "@/components/ui/select";
+import { SelectValue } from "@radix-ui/react-select";
+import { FieldValues } from "react-hook-form";
+
+type SelectData =
+  | {
+      value: string;
+      label: string;
+    }
+  | string;
+
+type SelectGroupData = {
+  group: string;
+  items: SelectData[];
+};
+
+type Data = Array<SelectData | SelectGroupData>;
+
+type FormSelectProps<TFieldValues extends FieldValues> =
+  FormInputProps<TFieldValues> & {
+    placeholder?: string;
+    description?: string;
+    data: Data;
+  };
+
+function isGroupData(
+  data: SelectData | SelectGroupData,
+): data is SelectGroupData {
+  return (data as SelectGroupData).group !== undefined;
+}
+
+function getSelectDataKey(data: SelectData) {
+  if (typeof data === "string") {
+    return data;
+  }
+
+  return data.value;
+}
+
+function SelectDataItem({ data }: { data: SelectData }) {
+  if (typeof data === "string") {
+    return (
+      <SelectItem key={data} value={data}>
+        {data}
+      </SelectItem>
+    );
+  }
+
+  return (
+    <SelectItem key={data.value} value={data.value}>
+      {data.label}
+    </SelectItem>
+  );
+}
+
+export function FormSelect<TFieldValues extends FieldValues>({
+  form,
+  name,
+  label,
+  disabled,
+  placeholder,
+  description,
+  data,
+}: FormSelectProps<TFieldValues>) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      disabled={disabled}
+      render={({ field }) => (
+        <FormItem>
+          {label && <FormLabel>{label}</FormLabel>}
+          <Select onValueChange={field.onChange} defaultValue={field.value}>
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={placeholder} />
+              </SelectTrigger>
+              <SelectContent>
+                {data.map((item) => {
+                  if (isGroupData(item)) {
+                    return (
+                      <SelectGroup key={item.group}>
+                        <SelectLabel>{item.group}</SelectLabel>
+                        {item.items.map((groupItem) => (
+                          <SelectDataItem
+                            key={getSelectDataKey(groupItem)}
+                            data={groupItem}
+                          />
+                        ))}
+                      </SelectGroup>
+                    );
+                  }
+
+                  return (
+                    <SelectDataItem key={getSelectDataKey(item)} data={item} />
+                  );
+                })}
+              </SelectContent>
+            </FormControl>
+          </Select>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+FormSelect.displayName = "FormSelect";
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..ad0530d
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/utils/ui";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

From 1cbce1c2ba6eb837f73a9ad7687fd1341ec48c87 Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 15:12:14 +0800
Subject: [PATCH 09/11] feat: add deck selection for create card

---
 .../flashcard/create-flashcard-form.tsx       | 39 ++++++++--
 src/components/form/form-select.tsx           | 76 ++++++++++++-------
 src/form.ts                                   | 33 +++++++-
 src/schema.ts                                 |  3 +-
 src/server/routers/card.ts                    | 63 ++++++++++-----
 5 files changed, 158 insertions(+), 56 deletions(-)

diff --git a/src/components/flashcard/create-flashcard-form.tsx b/src/components/flashcard/create-flashcard-form.tsx
index 39c9805..680edeb 100644
--- a/src/components/flashcard/create-flashcard-form.tsx
+++ b/src/components/flashcard/create-flashcard-form.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FormMarkdownEditor } from "@/components/form/form-markdown-editor";
+import { FormSelect, SelectData } from "@/components/form/form-select";
 import { Button } from "@/components/ui/button";
 import {
   UiCard,
@@ -12,22 +13,36 @@ import {
 } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
 import {
-  CardContentFormValues,
-  cardContentDefaultValues,
-  cardContentFormSchema,
+  CreateCardFormValues,
+  createCardDefaultValues,
+  createCardFormSchema,
 } from "@/form";
 import { useCreateCard } from "@/hooks/card/use-create-card";
 import { useDeleteCard } from "@/hooks/card/use-delete-card";
+import { RouterOutputs, trpc } from "@/utils/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
 
+type AllDeckData = RouterOutputs["deck"]["all"];
+
+function allDeckDataToSelectData(data: AllDeckData): SelectData {
+  return data.map((deck) => ({
+    value: deck.id,
+    label: deck.name,
+  }));
+}
+
 export default function CreateFlashcardForm() {
-  const form = useForm<CardContentFormValues>({
-    resolver: zodResolver(cardContentFormSchema),
-    defaultValues: cardContentDefaultValues,
+  const { data: decks = [], isLoading: isLoadingDeck } =
+    trpc.deck.all.useQuery();
+  const deckSelectData = allDeckDataToSelectData(decks);
+
+  const form = useForm<CreateCardFormValues>({
+    resolver: zodResolver(createCardFormSchema),
+    defaultValues: createCardDefaultValues,
   });
 
   // This is a hack to force the markdown editor to re-render
@@ -41,7 +56,7 @@ export default function CreateFlashcardForm() {
   const isLoading =
     createCardMutation.isPending || deleteCardMutation.isPending;
 
-  const onSubmit: SubmitHandler<CardContentFormValues> = async (data) => {
+  const onSubmit: SubmitHandler<CreateCardFormValues> = async (data) => {
     console.log(JSON.stringify(data, null, 2));
     try {
       const card = await createCardMutation.mutateAsync(data);
@@ -49,6 +64,7 @@ export default function CreateFlashcardForm() {
         // We have to set the value before the re-render triggers
         form.setValue("question", data.question);
         form.setValue("answer", data.answer);
+        form.setValue("deckIds", data.deckIds);
         deleteCardMutation.mutate(card.cards.id);
 
         setTimeout(() => {
@@ -82,6 +98,15 @@ export default function CreateFlashcardForm() {
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <UiCardContent className="flex min-h-96 flex-col gap-y-4 px-2 md:px-6">
+            <FormSelect
+              name="deckIds"
+              label="Deck"
+              form={form}
+              disabled={isLoading}
+              multiple={true}
+              data={deckSelectData}
+            />
+
             <FormMarkdownEditor
               key={markdownEditorKey + "question"}
               name="question"
diff --git a/src/components/form/form-select.tsx b/src/components/form/form-select.tsx
index 8370e71..e8c91af 100644
--- a/src/components/form/form-select.tsx
+++ b/src/components/form/form-select.tsx
@@ -18,7 +18,7 @@ import {
 import { SelectValue } from "@radix-ui/react-select";
 import { FieldValues } from "react-hook-form";
 
-type SelectData =
+type SelectValueData =
   | {
       value: string;
       label: string;
@@ -27,25 +27,38 @@ type SelectData =
 
 type SelectGroupData = {
   group: string;
-  items: SelectData[];
+  items: SelectValueData[];
 };
 
-type Data = Array<SelectData | SelectGroupData>;
+export type SelectData = Array<SelectValueData | SelectGroupData>;
 
 type FormSelectProps<TFieldValues extends FieldValues> =
   FormInputProps<TFieldValues> & {
+    /**
+     * The label of the select input.
+     */
     placeholder?: string;
+    /**
+     * The description of the select input.
+     */
     description?: string;
-    data: Data;
+    /**
+     * The data of the select input.
+     */
+    data: SelectData;
+    /**
+     * If true, the select input will allow multiple selections.
+     */
+    multiple?: boolean;
   };
 
 function isGroupData(
-  data: SelectData | SelectGroupData,
+  data: SelectValueData | SelectGroupData,
 ): data is SelectGroupData {
   return (data as SelectGroupData).group !== undefined;
 }
 
-function getSelectDataKey(data: SelectData) {
+function getSelectDataKey(data: SelectValueData) {
   if (typeof data === "string") {
     return data;
   }
@@ -53,7 +66,7 @@ function getSelectDataKey(data: SelectData) {
   return data.value;
 }
 
-function SelectDataItem({ data }: { data: SelectData }) {
+function SelectDataItem({ data }: { data: SelectValueData }) {
   if (typeof data === "string") {
     return (
       <SelectItem key={data} value={data}>
@@ -77,6 +90,7 @@ export function FormSelect<TFieldValues extends FieldValues>({
   placeholder,
   description,
   data,
+  multiple,
 }: FormSelectProps<TFieldValues>) {
   return (
     <FormField
@@ -86,33 +100,41 @@ export function FormSelect<TFieldValues extends FieldValues>({
       render={({ field }) => (
         <FormItem>
           {label && <FormLabel>{label}</FormLabel>}
-          <Select onValueChange={field.onChange} defaultValue={field.value}>
+          <Select
+            onValueChange={(value) => {
+              // TODO implement true multi select using react-select library
+              // The implementation is going to be non-trivial
+              field.onChange(() => (multiple ? [value] : value));
+            }}
+            defaultValue={multiple ? field.value[0] : field.value}
+          >
             <FormControl>
               <SelectTrigger>
                 <SelectValue placeholder={placeholder} />
               </SelectTrigger>
-              <SelectContent>
-                {data.map((item) => {
-                  if (isGroupData(item)) {
-                    return (
-                      <SelectGroup key={item.group}>
-                        <SelectLabel>{item.group}</SelectLabel>
-                        {item.items.map((groupItem) => (
-                          <SelectDataItem
-                            key={getSelectDataKey(groupItem)}
-                            data={groupItem}
-                          />
-                        ))}
-                      </SelectGroup>
-                    );
-                  }
+            </FormControl>
 
+            <SelectContent>
+              {data.map((item) => {
+                if (isGroupData(item)) {
                   return (
-                    <SelectDataItem key={getSelectDataKey(item)} data={item} />
+                    <SelectGroup key={item.group}>
+                      <SelectLabel>{item.group}</SelectLabel>
+                      {item.items.map((groupItem) => (
+                        <SelectDataItem
+                          key={getSelectDataKey(groupItem)}
+                          data={groupItem}
+                        />
+                      ))}
+                    </SelectGroup>
                   );
-                })}
-              </SelectContent>
-            </FormControl>
+                }
+
+                return (
+                  <SelectDataItem key={getSelectDataKey(item)} data={item} />
+                );
+              })}
+            </SelectContent>
           </Select>
           {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />
diff --git a/src/form.ts b/src/form.ts
index c6fdaf1..6f3341a 100644
--- a/src/form.ts
+++ b/src/form.ts
@@ -1,8 +1,11 @@
-import { RouterInputs } from "@/utils/trpc";
 import { z } from "zod";
 
+// Form schemas are shared between the client and the server.
+// This ensures that the inputs are validated on both ends.
+
 const MAX_INPUT_LENGTH = 20000;
 
+// Card Content
 export const cardContentFormSchema = z.object({
   question: z
     .string()
@@ -29,6 +32,34 @@ export const cardContentDefaultValues = {
   answer: "",
 } satisfies CardContentFormValues;
 
+// Create Card
+export const createCardFormSchema = cardContentFormSchema.extend({
+  deckIds: z.array(z.string().uuid()).optional(),
+});
+
+export type CreateCardFormValues = z.infer<typeof createCardFormSchema>;
+
+export const createCardDefaultValues = {
+  ...cardContentDefaultValues,
+  deckIds: [],
+} satisfies CreateCardFormValues;
+
+// Create Many Cards
+export const createManyCardsFormSchema = z.object({
+  cardInputs: z.array(cardContentFormSchema).min(1),
+  deckIds: z.array(z.string().uuid()).optional(),
+});
+
+export type CreateManyCardsFormValues = z.infer<
+  typeof createManyCardsFormSchema
+>;
+
+export const createManyCardsDefaultValues = {
+  cardInputs: [],
+  deckIds: [],
+} satisfies CreateManyCardsFormValues;
+
+// Create Deck
 export const deckFormSchema = z.object({
   name: z
     .string()
diff --git a/src/schema.ts b/src/schema.ts
index a76cf7a..873380f 100644
--- a/src/schema.ts
+++ b/src/schema.ts
@@ -1,5 +1,4 @@
-import { relations, sql } from "drizzle-orm";
-import {
+import { relations, sql } from "drizzle-orm"; import {
   integer,
   primaryKey,
   real,
diff --git a/src/server/routers/card.ts b/src/server/routers/card.ts
index 036a181..9b2d8cf 100644
--- a/src/server/routers/card.ts
+++ b/src/server/routers/card.ts
@@ -1,5 +1,14 @@
 import db from "@/db";
-import { cardContents, cards, ratings, reviewLogs, states } from "@/schema";
+import { createCardFormSchema, createManyCardsFormSchema } from "@/form";
+import {
+  NewCardsToDecks,
+  cardContents,
+  cards,
+  cardsToDecks,
+  ratings,
+  reviewLogs,
+  states,
+} from "@/schema";
 import { publicProcedure, router } from "@/server/trpc";
 import { success } from "@/utils/format";
 import { gradeCard, newCardWithContent } from "@/utils/fsrs";
@@ -134,15 +143,10 @@ export const cardRouter = router({
 
   // Create a new card with content
   create: publicProcedure
-    .input(
-      z.object({
-        question: z.string(),
-        answer: z.string(),
-      }),
-    )
+    .input(createCardFormSchema)
     .mutation(async ({ ctx, input }) => {
       console.log("Adding card");
-      const { question, answer } = input;
+      const { question, answer, deckIds } = input;
       const { card, cardContent } = newCardWithContent(question, answer);
 
       const res = await db.transaction(async (tx) => {
@@ -151,6 +155,19 @@ export const cardRouter = router({
           .insert(cardContents)
           .values(cardContent)
           .returning();
+
+        if (deckIds && deckIds.length > 0) {
+          console.log("Adding cards to decks");
+          const cardsToDecksToInsert = deckIds.map((deckId) => ({
+            cardId: res.cards.id,
+            deckId,
+          })) satisfies NewCardsToDecks[];
+          await tx.insert(cardsToDecks).values(cardsToDecksToInsert);
+          console.log(
+            success`Added ${cardsToDecksToInsert.length} cards to decks`,
+          );
+        }
+
         return {
           cards: insertedCard[0],
           card_contents: insertedCardContent[0],
@@ -164,17 +181,11 @@ export const cardRouter = router({
 
   // Create many cards
   createMany: publicProcedure
-    .input(
-      z.array(
-        z.object({
-          question: z.string(),
-          answer: z.string(),
-        }),
-      ),
-    )
+    .input(createManyCardsFormSchema)
     .mutation(async ({ ctx, input }) => {
-      console.log(`Adding ${input.length} cards`);
-      const cardWithContents = input.map(({ question, answer }) =>
+      const { cardInputs, deckIds } = input;
+      console.log(`Adding ${cardInputs.length} cards`);
+      const cardWithContents = cardInputs.map(({ question, answer }) =>
         newCardWithContent(question, answer),
       );
 
@@ -193,13 +204,27 @@ export const cardRouter = router({
           .values(cardContentsToInsert)
           .returning();
 
+        if (deckIds && deckIds.length > 0) {
+          console.log("Adding cards to decks");
+          const cardsToDecksToInsert = deckIds.flatMap((deckId) =>
+            insertedCards.map((card) => ({
+              cardId: card.id,
+              deckId,
+            })),
+          ) satisfies NewCardsToDecks[];
+          await tx.insert(cardsToDecks).values(cardsToDecksToInsert);
+          console.log(
+            success`Added ${cardsToDecksToInsert.length} cards to decks`,
+          );
+        }
+
         return insertedCards.map((card, index) => ({
           cards: card,
           card_contents: insertedCardContents[index],
         }));
       });
 
-      console.log(success`Added ${input.length} cards`);
+      console.log(success`Added ${cardInputs.length} cards`);
       return res;
     }),
 

From 02635f9b584fb087fe11eee9a46363a6ec6d936c Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 15:41:35 +0800
Subject: [PATCH 10/11] feat: add deck for many create

---
 .../flashcard/create-flashcard-form.tsx       |  14 +-
 .../create-flashcard-simple-form.tsx          |  72 -----
 .../flashcard/create-many-flashcard-form.tsx  | 252 +++++++++++-------
 src/server/routers/card.ts                    |   2 +-
 src/utils/deck.ts                             |  11 +
 src/utils/obsidian-parse.ts                   |   2 +-
 6 files changed, 170 insertions(+), 183 deletions(-)
 delete mode 100644 src/components/flashcard/create-flashcard-simple-form.tsx

diff --git a/src/components/flashcard/create-flashcard-form.tsx b/src/components/flashcard/create-flashcard-form.tsx
index 680edeb..7d6f841 100644
--- a/src/components/flashcard/create-flashcard-form.tsx
+++ b/src/components/flashcard/create-flashcard-form.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { FormMarkdownEditor } from "@/components/form/form-markdown-editor";
-import { FormSelect, SelectData } from "@/components/form/form-select";
+import { FormSelect } from "@/components/form/form-select";
 import { Button } from "@/components/ui/button";
 import {
   UiCard,
@@ -19,22 +19,14 @@ import {
 } from "@/form";
 import { useCreateCard } from "@/hooks/card/use-create-card";
 import { useDeleteCard } from "@/hooks/card/use-delete-card";
-import { RouterOutputs, trpc } from "@/utils/trpc";
+import { allDeckDataToSelectData } from "@/utils/deck";
+import { trpc } from "@/utils/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
 
-type AllDeckData = RouterOutputs["deck"]["all"];
-
-function allDeckDataToSelectData(data: AllDeckData): SelectData {
-  return data.map((deck) => ({
-    value: deck.id,
-    label: deck.name,
-  }));
-}
-
 export default function CreateFlashcardForm() {
   const { data: decks = [], isLoading: isLoadingDeck } =
     trpc.deck.all.useQuery();
diff --git a/src/components/flashcard/create-flashcard-simple-form.tsx b/src/components/flashcard/create-flashcard-simple-form.tsx
deleted file mode 100644
index b0f7069..0000000
--- a/src/components/flashcard/create-flashcard-simple-form.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-
-import { FormValues } from "@/components/flashcard/create-many-flashcard-form";
-import { Button } from "@/components/ui/button";
-import { UiCard, UiCardClasses } from "@/components/ui/card";
-import { Textarea } from "@/components/ui/textarea";
-import { cn } from "@/utils/ui";
-import { Trash } from "lucide-react";
-
-type Values = Omit<FormValues, "id">;
-
-type Props = {
-  values: Values;
-  onChange: (values: Values) => void;
-  onDelete: () => void;
-  isPending?: boolean;
-};
-
-export default function CreateFlashcardSimpleForm({
-  values,
-  onChange,
-  onDelete,
-  isPending = false,
-}: Props) {
-  return (
-    <UiCard className={cn("flex w-96 flex-col px-4 py-4")}>
-      <Textarea
-        className="h-40 resize-none border-0"
-        disabled={isPending}
-        spellCheck="false"
-        placeholder="Question"
-        value={values.question}
-        onChange={(e) => {
-          onChange({
-            question: e.target.value,
-            answer: values.answer,
-          });
-        }}
-        onKeyDown={(e) => e.stopPropagation()}
-      />
-
-      <hr className="mx-auto w-8" />
-
-      <Textarea
-        className="h-40 resize-none border-0"
-        disabled={isPending}
-        spellCheck="false"
-        placeholder="Answer"
-        value={values.answer}
-        onChange={(e) => {
-          onChange({
-            question: values.question,
-            answer: e.target.value,
-          });
-        }}
-        onKeyDown={(e) => e.stopPropagation()}
-      />
-
-      <Button
-        disabled={isPending}
-        className="mt-2"
-        size="icon"
-        variant="outline"
-        onClick={() => onDelete()}
-      >
-        <Trash className="h-4 w-4" />
-      </Button>
-    </UiCard>
-  );
-}
-
-CreateFlashcardSimpleForm.displayName = "CreateFlashcardSimpleForm";
diff --git a/src/components/flashcard/create-many-flashcard-form.tsx b/src/components/flashcard/create-many-flashcard-form.tsx
index febc612..f954c29 100644
--- a/src/components/flashcard/create-many-flashcard-form.tsx
+++ b/src/components/flashcard/create-many-flashcard-form.tsx
@@ -1,69 +1,65 @@
 "use client";
 
-import CreateFlashcardSimpleForm from "@/components/flashcard/create-flashcard-simple-form";
+import { FormSelect } from "@/components/form/form-select";
+import { FormTextarea } from "@/components/form/form-textarea";
 import { Button } from "@/components/ui/button";
+import { UiCard } from "@/components/ui/card";
+import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
-  CreateManyMutationInput,
-  useCreateManyCard,
-} from "@/hooks/card/use-create-many-card";
+  CreateManyCardsFormValues,
+  cardContentDefaultValues,
+  createManyCardsDefaultValues,
+  createManyCardsFormSchema,
+} from "@/form";
+import { useCreateManyCard } from "@/hooks/card/use-create-many-card";
+import { allDeckDataToSelectData } from "@/utils/deck";
 import { extractCardContentFromMarkdownString } from "@/utils/obsidian-parse";
+import { trpc } from "@/utils/trpc";
 import { cn } from "@/utils/ui";
-import { Plus, SendHorizonal, TrashIcon } from "lucide-react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Plus, SendHorizonal, Trash, TrashIcon } from "lucide-react";
 import { ChangeEventHandler, useEffect, useState } from "react";
+import { SubmitHandler, useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 
-export type FormValues = {
-  id: string;
-} & CreateManyMutationInput[number];
-
-function newFormValues(values?: Partial<FormValues>): FormValues {
-  return {
-    id: crypto.randomUUID(),
-    question: "",
-    answer: "",
-    ...values,
-  };
-}
-
 export default function CreateManyFlashcardForm() {
-  const [forms, setForms] = useState<FormValues[]>([newFormValues()]);
-  const [isPressed, setIsPressed] = useState(false);
-  const createManyMutation = useCreateManyCard();
-  const isPending = createManyMutation.isPending;
-
-  const handleAddForm = () => {
-    setIsPressed(true);
-    setForms((forms) => [...forms, newFormValues()]);
-    setTimeout(() => setIsPressed(false), 200);
-  };
-
-  const handleEdit = (values: FormValues) => {
-    setForms((forms) =>
-      forms.map((form) => (form.id === values.id ? values : form)),
-    );
-  };
+  const { data: decks = [], isLoading: isLoadingDeck } =
+    trpc.deck.all.useQuery();
+  const deckSelectData = allDeckDataToSelectData(decks);
+
+  const form = useForm<CreateManyCardsFormValues>({
+    resolver: zodResolver(createManyCardsFormSchema),
+    defaultValues: createManyCardsDefaultValues,
+  });
+  // https://www.react-hook-form.com/api/usefieldarray/
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "cardInputs",
+  });
 
-  const handleDelete = (id: string) => {
-    setForms((forms) => forms.filter((form) => form.id !== id));
-  };
+  const createManyMutation = useCreateManyCard();
+  const isLoading = createManyMutation.isPending;
+  const [isPressed, setIsPressed] = useState(false);
 
   const handleDeleteAll = () => {
+    const previous = form.getValues("cardInputs");
+    form.setValue("cardInputs", []);
+
     toast.success("All forms deleted.", {
       action: {
         label: "Undo",
-        onClick: () => setForms(forms),
+        onClick: () => form.setValue("cardInputs", previous),
       },
     });
-    setForms([]);
   };
 
-  const handleSubmit = () => {
-    toast.promise(createManyMutation.mutateAsync(forms), {
+  const onSubmit: SubmitHandler<CreateManyCardsFormValues> = (data) => {
+    toast.promise(createManyMutation.mutateAsync(data), {
       loading: "Creating flashcards...",
       success: () => {
-        setForms([]);
+        form.reset();
         return "Flashcards created.";
       },
       error: "Failed to create flashcards.",
@@ -81,9 +77,9 @@ export default function CreateManyFlashcardForm() {
       const contents = extractCardContentFromMarkdownString(
         e.target?.result as string,
       );
-      const values = contents.map((content) => newFormValues(content));
-      setForms((forms) => [...forms, ...values]);
+      append(contents);
     };
+
     reader.onerror = (e) => {
       console.error(e);
       toast.error("Failed to read file.");
@@ -96,68 +92,128 @@ export default function CreateManyFlashcardForm() {
       if (e.key !== " ") {
         return;
       }
-      handleAddForm();
+
+      setIsPressed(true);
+      append({
+        ...cardContentDefaultValues,
+      });
+      setTimeout(() => {
+        setIsPressed(false);
+      }, 100);
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  });
 
   return (
-    <div className="flex flex-col items-center gap-y-6">
-      <div className="flex flex-col gap-y-2">
-        <div className="grid w-full items-center gap-1.5">
-          <Label htmlFor="markdownFile">Markdown File Upload</Label>
-          <Input
-            id="markdownFile"
-            type="file"
-            accept=".md"
-            onChange={handleFileUpload}
-          />
-        </div>
-        <div className="flex w-full min-w-80 flex-col  justify-center gap-x-2 gap-y-2 md:flex-row">
-          <Button
-            onClick={() => handleAddForm()}
-            variant="outline"
-            className={cn("transition", isPressed ? "scale-105" : "")}
-            disabled={isPending}
-          >
-            <Plus className="mr-2 h-4 w-4" />
-            Add
-          </Button>
-
-          <Button
-            variant="outline"
-            disabled={forms.length === 0 || isPending}
-            onClick={() => handleSubmit()}
-          >
-            <SendHorizonal className="mr-2 h-4 w-4" />
-            Create All
-          </Button>
-
-          <Button
-            variant="outline"
-            onClick={() => handleDeleteAll()}
-            disabled={forms.length === 0 || isPending}
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="flex flex-col items-center gap-y-6">
+          <div className="flex flex-col gap-y-2">
+            {/* Import markdown file input */}
+            <div className="grid w-full items-center gap-1.5">
+              <Label htmlFor="markdownFile">Markdown File Upload</Label>
+              <Input
+                id="markdownFile"
+                type="file"
+                accept=".md"
+                onChange={handleFileUpload}
+              />
+            </div>
+
+            {/* Buttons for managing the many cards */}
+            <div className="flex w-full min-w-80 flex-col  justify-center gap-x-2 gap-y-2 md:flex-row">
+              <Button
+                onClick={() =>
+                  append({
+                    ...cardContentDefaultValues,
+                  })
+                }
+                variant="outline"
+                className={cn("transition", isPressed ? "scale-105" : "")}
+                disabled={isLoading}
+              >
+                <Plus className="mr-2 h-4 w-4" />
+                Add
+              </Button>
+
+              <Button
+                variant="outline"
+                disabled={
+                  form.getValues("cardInputs").length === 0 || isLoading
+                }
+                type="submit"
+              >
+                <SendHorizonal className="mr-2 h-4 w-4" />
+                Create All
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={() => handleDeleteAll()}
+                disabled={
+                  form.getValues("cardInputs").length === 0 || isLoading
+                }
+              >
+                <TrashIcon className="mr-2 h-4 w-4" />
+                Delete All
+              </Button>
+            </div>
+
+            <FormSelect
+              name="deckIds"
+              label="Deck"
+              form={form}
+              disabled={isLoading}
+              multiple={true}
+              data={deckSelectData}
+            />
+          </div>
+
+          {/* Card inputs */}
+          <section
+            className="grid grid-cols-1 gap-x-2 gap-y-2 md:grid-cols-2 xl:grid-cols-3"
+            onKeyDown={(e) => e.stopPropagation()}
           >
-            <TrashIcon className="mr-2 h-4 w-4" />
-            Delete All
-          </Button>
+            {fields.map((item, index) => (
+              <UiCard
+                className={cn("flex w-96 flex-col px-4 py-4")}
+                key={item.id}
+              >
+                <FormTextarea
+                  className="h-40 resize-none border-0"
+                  name={`cardInputs.${index}.question`}
+                  label="Question"
+                  form={form}
+                  disabled={isLoading}
+                />
+
+                <hr className="mx-auto w-8" />
+
+                <FormTextarea
+                  className="h-40 resize-none border-0"
+                  name={`cardInputs.${index}.answer`}
+                  label="Answer"
+                  form={form}
+                  disabled={isLoading}
+                />
+
+                <Button
+                  disabled={isLoading}
+                  className="mt-2"
+                  size="icon"
+                  variant="outline"
+                  onClick={() => remove(index)}
+                >
+                  <Trash className="h-4 w-4" />
+                </Button>
+              </UiCard>
+            ))}
+          </section>
         </div>
-      </div>
-
-      <section className="grid grid-cols-1 gap-x-2 gap-y-2 md:grid-cols-2 xl:grid-cols-3">
-        {forms.map(({ id, ...values }) => (
-          <CreateFlashcardSimpleForm
-            isPending={isPending}
-            key={id}
-            values={values}
-            onChange={(values) => handleEdit({ id, ...values })}
-            onDelete={() => handleDelete(id)}
-          />
-        ))}
-      </section>
-    </div>
+      </form>
+    </Form>
   );
 }
 
diff --git a/src/server/routers/card.ts b/src/server/routers/card.ts
index 9b2d8cf..ba3106c 100644
--- a/src/server/routers/card.ts
+++ b/src/server/routers/card.ts
@@ -159,7 +159,7 @@ export const cardRouter = router({
         if (deckIds && deckIds.length > 0) {
           console.log("Adding cards to decks");
           const cardsToDecksToInsert = deckIds.map((deckId) => ({
-            cardId: res.cards.id,
+            cardId: insertedCard[0].id,
             deckId,
           })) satisfies NewCardsToDecks[];
           await tx.insert(cardsToDecks).values(cardsToDecksToInsert);
diff --git a/src/utils/deck.ts b/src/utils/deck.ts
index e70b94a..85b0678 100644
--- a/src/utils/deck.ts
+++ b/src/utils/deck.ts
@@ -1,4 +1,6 @@
+import { SelectData } from "@/components/form/form-select";
 import { NewDeck } from "@/schema";
+import { RouterOutputs } from "@/utils/trpc";
 
 export function newDeck({
   name,
@@ -13,3 +15,12 @@ export function newDeck({
     description: description ?? "",
   };
 }
+
+type AllDeckData = RouterOutputs["deck"]["all"];
+
+export function allDeckDataToSelectData(data: AllDeckData): SelectData {
+  return data.map((deck) => ({
+    value: deck.id,
+    label: deck.name,
+  }));
+}
diff --git a/src/utils/obsidian-parse.ts b/src/utils/obsidian-parse.ts
index 0f891dd..bdf54e6 100644
--- a/src/utils/obsidian-parse.ts
+++ b/src/utils/obsidian-parse.ts
@@ -11,7 +11,7 @@ const MULTILINE_SEPARATOR = "?";
 
 export function extractCardContentFromMarkdownString(
   markdown: string,
-): CreateManyMutationInput {
+): CreateManyMutationInput["cardInputs"] {
   const mdReplacedNewlines = markdown.replace(/\r\n/g, "\n");
   const lines = mdReplacedNewlines.split("\n");
 

From ada208a2a86d5e92db2a8d9ffd74bfac0ac29d7c Mon Sep 17 00:00:00 2001
From: sheng <49238630+zsh-eng@users.noreply.github.com>
Date: Sat, 20 Apr 2024 15:42:05 +0800
Subject: [PATCH 11/11] fix: fix hydration warning for next-themes

See https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
---
 src/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a450f0a..f4593b8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={cn(
           "min-h-screen bg-background font-sans antialiased",