From 1fbdbd05c150624e4d0d59c5b2a664e2e7181d0d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 17 Mar 2025 09:42:17 -0600
Subject: [PATCH] Simplify dialog

---
 .../overlay/dialog/TextEntryDialog.tsx        | 77 ++++---------------
 .../overlay/dialog/UploadImageDialog.tsx      | 62 +++------------
 2 files changed, 24 insertions(+), 115 deletions(-)

diff --git a/web/src/components/overlay/dialog/TextEntryDialog.tsx b/web/src/components/overlay/dialog/TextEntryDialog.tsx
index a25c023ea..ea125b195 100644
--- a/web/src/components/overlay/dialog/TextEntryDialog.tsx
+++ b/web/src/components/overlay/dialog/TextEntryDialog.tsx
@@ -1,3 +1,4 @@
+import TextEntry from "@/components/input/TextEntry";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -7,15 +8,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback, useEffect } from "react";
-import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { z } from "zod";
-
 type TextEntryDialogProps = {
   open: boolean;
   title: string;
@@ -35,36 +29,8 @@ export default function TextEntryDialog({
   defaultValue = "",
   allowEmpty = false,
 }: TextEntryDialogProps) {
-  const formSchema = z.object({
-    text: z.string(),
-  });
-
   const { t } = useTranslation("components/dialog");
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: { text: defaultValue },
-  });
-  const fileRef = form.register("text");
-
-  // upload handler
-
-  const onSubmit = useCallback(
-    (data: z.infer<typeof formSchema>) => {
-      if (!allowEmpty && !data["text"]) {
-        return;
-      }
-      onSave(data["text"]);
-    },
-    [onSave, allowEmpty],
-  );
-
-  useEffect(() => {
-    if (open) {
-      form.reset({ text: defaultValue });
-    }
-  }, [open, defaultValue, form]);
-
   return (
     <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
       <DialogContent>
@@ -72,33 +38,20 @@ export default function TextEntryDialog({
           <DialogTitle>{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField
-              control={form.control}
-              name="text"
-              render={() => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      className="aspect-video h-8 w-full"
-                      type="text"
-                      {...fileRef}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <DialogFooter className="pt-4">
-              <Button type="button" onClick={() => setOpen(false)}>
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button variant="select" type="submit">
-                {t("button.save", { ns: "common" })}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+        <TextEntry
+          defaultValue={defaultValue}
+          allowEmpty={allowEmpty}
+          onSave={onSave}
+        >
+          <DialogFooter className="pt-4">
+            <Button type="button" onClick={() => setOpen(false)}>
+              {t("button.cancel", { ns: "common" })}
+            </Button>
+            <Button variant="select" type="submit">
+              {t("button.save", { ns: "common" })}
+            </Button>
+          </DialogFooter>
+        </TextEntry>
       </DialogContent>
     </Dialog>
   );
diff --git a/web/src/components/overlay/dialog/UploadImageDialog.tsx b/web/src/components/overlay/dialog/UploadImageDialog.tsx
index 6a01a7fab..efb05afac 100644
--- a/web/src/components/overlay/dialog/UploadImageDialog.tsx
+++ b/web/src/components/overlay/dialog/UploadImageDialog.tsx
@@ -1,3 +1,4 @@
+import ImageEntry from "@/components/input/ImageEntry";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -7,12 +8,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
 
 type UploadImageDialogProps = {
   open: boolean;
@@ -28,28 +23,6 @@ export default function UploadImageDialog({
   setOpen,
   onSave,
 }: UploadImageDialogProps) {
-  const formSchema = z.object({
-    file: z.instanceof(FileList, { message: "Please select an image file." }),
-  });
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-  });
-  const fileRef = form.register("file");
-
-  // upload handler
-
-  const onSubmit = useCallback(
-    (data: z.infer<typeof formSchema>) => {
-      if (!data["file"] || Object.keys(data.file).length == 0) {
-        return;
-      }
-
-      onSave(data["file"]["0"]);
-    },
-    [onSave],
-  );
-
   return (
     <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
       <DialogContent>
@@ -57,31 +30,14 @@ export default function UploadImageDialog({
           <DialogTitle>{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField
-              control={form.control}
-              name="file"
-              render={() => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      className="aspect-video h-40 w-full"
-                      type="file"
-                      {...fileRef}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <DialogFooter className="pt-4">
-              <Button onClick={() => setOpen(false)}>Cancel</Button>
-              <Button variant="select" type="submit">
-                Save
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+        <ImageEntry onSave={onSave}>
+          <DialogFooter className="pt-4">
+            <Button onClick={() => setOpen(false)}>Cancel</Button>
+            <Button variant="select" type="submit">
+              Save
+            </Button>
+          </DialogFooter>
+        </ImageEntry>
       </DialogContent>
     </Dialog>
   );