From 15b99a82f8911a5849c636eb57aae5428cd3b0be Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Mon, 21 Oct 2024 21:16:18 -0400
Subject: [PATCH] close dialog after someone clicks subscribe

---
 src/components/MailingListDialog.jsx | 185 ++++++++++++++-------------
 1 file changed, 98 insertions(+), 87 deletions(-)

diff --git a/src/components/MailingListDialog.jsx b/src/components/MailingListDialog.jsx
index eafc16f..b1340c8 100644
--- a/src/components/MailingListDialog.jsx
+++ b/src/components/MailingListDialog.jsx
@@ -1,96 +1,107 @@
-import React, { useState } from 'react';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
+import React, { useState } from "react";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
 
 const MailingListDialog = ({ open, onClose }) => {
-    const [name, setName] = useState('');
-    const [email, setEmail] = useState('');
-    const [error, setError] = useState('');
-    const [success, setSuccess] = useState('');
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
 
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        setError('');
-        setSuccess('');
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setError("");
+    setSuccess("");
 
-        const form = document.createElement('form');
-        form.action = 'https://tech.us9.list-manage.com/subscribe/post';
-        form.method = 'POST';
-        form.target = '_blank';
+    const form = document.createElement("form");
+    form.action = "https://tech.us9.list-manage.com/subscribe/post";
+    form.method = "POST";
+    form.target = "_blank";
 
-        const hiddenFields = {
-            u: 'aaf43cf1740b320b738dade27',
-            id: '344e2f39e6',
-            MERGE1: name,
-            MERGE0: email,
-        };
-
-        Object.keys(hiddenFields).forEach((key) => {
-            const input = document.createElement('input');
-            input.type = 'hidden';
-            input.name = key;
-            input.value = hiddenFields[key];
-            form.appendChild(input);
-        });
-
-        document.body.appendChild(form);
-        form.submit();
-        document.body.removeChild(form);
-
-        setSuccess('Thank you for subscribing!');
-        setName('');
-        setEmail('');
+    const hiddenFields = {
+      u: "aaf43cf1740b320b738dade27",
+      id: "344e2f39e6",
+      MERGE1: name,
+      MERGE0: email,
     };
 
-    return (
-        <Dialog open={open} onClose={onClose}>
-            <DialogTitle>Join Our Mailing List</DialogTitle>
-            <DialogContent>
-                <DialogContentText>
-                    Stay updated with the latest news and updates from Do Tech Bro.
-                </DialogContentText>
-                <TextField
-                    autoFocus
-                    margin="dense"
-                    id="name"
-                    label="Name"
-                    type="text"
-                    fullWidth
-                    variant="outlined"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                />
-                <TextField
-                    margin="dense"
-                    id="email"
-                    label="Email Address"
-                    type="email"
-                    fullWidth
-                    variant="outlined"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                />
-                <DialogContentText className="mt-2 text-xs text-gray-600">
-                    We promise not to sell your information or email you more than once or twice a month.
-                </DialogContentText>
-                {error && <DialogContentText className="mt-2 text-xs text-red-600">{error}</DialogContentText>}
-                {success && <DialogContentText className="mt-2 text-xs text-green-600">{success}</DialogContentText>}
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onClose} color="primary">
-                    Cancel
-                </Button>
-                <Button onClick={handleSubmit} color="primary">
-                    Subscribe
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
+    Object.keys(hiddenFields).forEach((key) => {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = key;
+      input.value = hiddenFields[key];
+      form.appendChild(input);
+    });
+
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+
+    setSuccess("Thank you for subscribing!");
+    setName("");
+    setEmail("");
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Join Our Mailing List</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Stay updated with the latest news and updates from Do Tech Bro.
+        </DialogContentText>
+        <TextField
+          autoFocus
+          margin="dense"
+          id="name"
+          label="Name"
+          type="text"
+          fullWidth
+          variant="outlined"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <TextField
+          margin="dense"
+          id="email"
+          label="Email Address"
+          type="email"
+          fullWidth
+          variant="outlined"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <DialogContentText className="mt-2 text-xs text-gray-600">
+          We promise not to sell your information or email you more than once or
+          twice a month.
+        </DialogContentText>
+        {error && (
+          <DialogContentText className="mt-2 text-xs text-red-600">
+            {error}
+          </DialogContentText>
+        )}
+        {success && (
+          <DialogContentText className="mt-2 text-xs text-green-600">
+            {success}
+          </DialogContentText>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={handleSubmit} color="primary">
+          Subscribe
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
 };
 
-export default MailingListDialog;
\ No newline at end of file
+export default MailingListDialog;
+