feat: import parsed attendees to db dialog

omsimos · Aug 20, 2024 · 6707482 · 6707482
1 parent 2eff706
commit 6707482
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 140 deletions.
diff --git a/src/app/event-setup/components/add-participants.tsx b/src/app/event-setup/components/add-participants.tsx
@@ -1,67 +1,14 @@
 "use client";
 
-import { toast } from "sonner";
-import { nanoid } from "nanoid";
-import React, { useState } from "react";
-import { db } from "@/config/firebase";
-import { Attendee } from "@/lib/types";
-import { doc, setDoc } from "firebase/firestore";
-
-import AdminPermDialog from "./admin-perm-dialog";
-import { useParams } from "next/navigation";
-import { XlsxForm } from "./xlsx-form";
+import React from "react";
 import JsonForm from "./json-form";
+import { XlsxForm } from "./xlsx-form";
+import ImportParticipantsDialog from "./import-participants-dialog";
 
 export default function AddParticipants() {
-  const [attendees, setAttendees] = useState("");
-  const [parsedAttendees, setParsedAttendees] = useState<Attendee[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [openAdminModal, setAdminModal] = useState(false);
-
-  const params = useParams<{ name: string }>();
-
-  const handleImport = () => {
-    setLoading(true);
-    if (parsedAttendees.length === 0) {
-      toast.error("No attendees to import");
-      return;
-    }
-
-    try {
-      parsedAttendees.forEach(async (attendee) => {
-        try {
-          await setDoc(
-            doc(db, `${params.name}/data/certificates`, nanoid(10)),
-            {
-              firstName: attendee.firstName,
-              lastName: attendee.lastName,
-              email: attendee.email,
-            },
-          );
-        } catch (err: any) {
-          toast.error(err.message);
-        }
-      });
-
-      setTimeout(() => {
-        setParsedAttendees([]);
-        setAttendees("");
-      }, 500);
-
-      toast.success("Certificates added");
-    } catch (err: any) {
-      toast.error(err.message);
-    }
-    setLoading(false);
-  };
-
   return (
     <div className="relative z-10 flex flex-col gap-16">
-      <AdminPermDialog
-        openAdminModal={openAdminModal}
-        setAdminModal={setAdminModal}
-        handleSubmit={handleImport}
-      />
+      <ImportParticipantsDialog />
       <XlsxForm />
       <div className="flex items-center gap-3 text-center text-muted-foreground">
         <div className="h-px w-full bg-muted" />

diff --git a/src/app/event-setup/components/import-participants-dialog.tsx b/src/app/event-setup/components/import-participants-dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { toast } from "sonner";
+import { nanoid } from "nanoid";
+import { db } from "@/config/firebase";
+import React, { useState } from "react";
+import { useParams } from "next/navigation";
+import { doc, setDoc } from "firebase/firestore";
+import AdminPermDialog from "./admin-perm-dialog";
+import { useAttendeesStore } from "@/hooks/use-attendees-store";
+
+import { AlertDialog, AlertDialogContent } from "@/components/ui/alert-dialog";
+
+import { Icons } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { useDialogStore } from "@/hooks/use-dialog-store";
+
+export default function ImportParticipantsDialog() {
+  const params = useParams<{ name: string }>();
+
+  const [openAdminModal, setAdminModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { importDialog, setImportDialog } = useDialogStore();
+  const { parsedAttendees, setParsedAttendees } = useAttendeesStore();
+
+  const handleImport = () => {
+    setLoading(true);
+    if (parsedAttendees.length === 0) {
+      toast.error("No attendees to import");
+      return;
+    }
+
+    try {
+      parsedAttendees.forEach(async (attendee) => {
+        try {
+          await setDoc(
+            doc(db, `${params.name}/data/certificates`, nanoid(10)),
+            {
+              firstName: attendee.firstName,
+              lastName: attendee.lastName,
+              email: attendee.email,
+            },
+          );
+        } catch (err: any) {
+          toast.error(err.message);
+        }
+      });
+
+      setTimeout(() => {
+        setParsedAttendees([]);
+      }, 500);
+
+      toast.success("Certificates added");
+    } catch (err: any) {
+      toast.error(err.message);
+    }
+    setLoading(false);
+  };
+
+  const cancelImport = () => {
+    setImportDialog(false);
+    setParsedAttendees([]);
+  };
+
+  return (
+    <>
+      <AdminPermDialog
+        openAdminModal={openAdminModal}
+        setAdminModal={setAdminModal}
+        handleSubmit={handleImport}
+      />
+
+      <AlertDialog open={importDialog} onOpenChange={setImportDialog}>
+        <AlertDialogContent>
+          {parsedAttendees.length > 0 && (
+            <>
+              <p className="text-sm text-muted-foreground">
+                Total certificates to be added: {parsedAttendees.length}
+              </p>
+              <div className="mt-4 max-h-[300px] overflow-y-scroll rounded border px-6">
+                {parsedAttendees.map((m) => {
+                  return (
+                    <div
+                      key={nanoid()}
+                      className="flex space-x-8 border-b py-6 text-sm last-of-type:border-b-0"
+                    >
+                      <div className="[&>*]:text-muted-foreground">
+                        <p>Email:</p>
+                        <p>First Name:</p>
+                        <p>Last Name:</p>
+                      </div>
+                      <div>
+                        <p>{m.email}</p>
+                        <p>{m.firstName}</p>
+                        <p>{m.lastName}</p>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Button
+                  disabled={loading}
+                  type="button"
+                  className="mt-4 w-full"
+                  onClick={() => setAdminModal(!openAdminModal)}
+                >
+                  {!loading ? "Import Certificates" : <Icons.spinner />}
+                </Button>
+                <Button variant="outline" onClick={cancelImport}>
+                  Cancel
+                </Button>
+              </div>
+            </>
+          )}
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
diff --git a/src/app/event-setup/components/json-form.tsx b/src/app/event-setup/components/json-form.tsx
@@ -2,20 +2,21 @@
 
 import { z } from "zod";
 import { toast } from "sonner";
-import { nanoid } from "nanoid";
 import React, { useState } from "react";
 import { Attendee } from "@/lib/types";
 
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
-import { Icons } from "@/components/icons";
+import { useDialogStore } from "@/hooks/use-dialog-store";
+import { useAttendeesStore } from "@/hooks/use-attendees-store";
 
 export default function JsonForm() {
   const [attendees, setAttendees] = useState("");
-  const [parsedAttendees, setParsedAttendees] = useState<Attendee[]>([]);
   const [loading, setLoading] = useState(false);
-  const [openAdminModal, setAdminModal] = useState(false);
+
+  const { setParsedAttendees } = useAttendeesStore();
+  const { setImportDialog } = useDialogStore();
 
   const handleParse = () => {
     setLoading(true);
@@ -43,27 +44,29 @@ export default function JsonForm() {
 
       toast.success("Parsed successfully");
       setParsedAttendees(_parsedAttendees);
+      setImportDialog(true);
     } catch {
       toast.error("Invalid JSON format");
     }
     setLoading(false);
   };
 
   return (
-    <form className="mx-auto flex w-full max-w-screen-sm">
-      <div className="flex w-full flex-col gap-5">
-        <div>
-          <h3 className="text-lg font-medium">Import via JSON</h3>
-          <p className="text-sm text-muted-foreground">
-            <span className="font-semibold text-destructive">Strict: </span>
-            Make sure to follow the same JSON Format
-          </p>
-        </div>
-        <Separator />
-        <p className="text-sm text-muted-foreground">Sample JSON</p>
-        <pre className="bg-bg rounded border px-8 py-4 text-orange-600 dark:text-yellow-500">
-          <code>
-            {`[
+    <>
+      <form className="mx-auto flex w-full max-w-screen-sm">
+        <div className="flex w-full flex-col gap-5">
+          <div>
+            <h3 className="text-lg font-medium">Import via JSON</h3>
+            <p className="text-sm text-muted-foreground">
+              <span className="font-semibold text-destructive">Strict: </span>
+              Make sure to follow the same JSON Format
+            </p>
+          </div>
+          <Separator />
+          <p className="text-sm text-muted-foreground">Sample JSON</p>
+          <pre className="bg-bg rounded border px-8 py-4 text-orange-600 dark:text-yellow-500">
+            <code>
+              {`[
   {
     "firstName": "John",
     "lastName": "Doe",
@@ -75,65 +78,28 @@ export default function JsonForm() {
     "email": "[email protected]"
   }
 ]`}
-          </code>
-        </pre>
+            </code>
+          </pre>
 
-        <div>
-          <Textarea
-            placeholder="Paste JSON"
-            className="max-h-[350px] min-h-[150px]"
-            value={attendees}
-            onChange={(e) => setAttendees(e.target.value)}
-          />
+          <div>
+            <Textarea
+              placeholder="Paste JSON"
+              className="max-h-[350px] min-h-[150px]"
+              value={attendees}
+              onChange={(e) => setAttendees(e.target.value)}
+            />
 
-          <Button
-            disabled={loading}
-            type="button"
-            className="mt-2 w-full"
-            onClick={handleParse}
-          >
-            Parse Data
-          </Button>
-        </div>
-      </div>
-
-      {parsedAttendees.length > 0 && (
-        <div className="mt-8">
-          <p className="text-sm text-muted-foreground">
-            Total certificates to be added: {parsedAttendees.length}
-          </p>
-          <div className="mt-4 max-h-[300px] overflow-y-scroll rounded border px-6">
-            {parsedAttendees.map((m) => {
-              return (
-                <div
-                  key={nanoid()}
-                  className="flex space-x-8 border-b py-6 text-sm last-of-type:border-b-0"
-                >
-                  <div className="[&>*]:text-muted-foreground">
-                    <p>Email:</p>
-                    <p>First Name:</p>
-                    <p>Last Name:</p>
-                  </div>
-                  <div>
-                    <p>{m.email}</p>
-                    <p>{m.firstName}</p>
-                    <p>{m.lastName}</p>
-                  </div>
-                </div>
-              );
-            })}
+            <Button
+              disabled={loading}
+              type="button"
+              className="mt-2 w-full"
+              onClick={handleParse}
+            >
+              Parse Data
+            </Button>
           </div>
-
-          <Button
-            disabled={loading}
-            type="button"
-            className="mt-4 w-full"
-            onClick={() => setAdminModal(!openAdminModal)}
-          >
-            {!loading ? "Import Certificates" : <Icons.spinner />}
-          </Button>
         </div>
-      )}
-    </form>
+      </form>
+    </>
   );
 }