updated Contact form

Author: anserwaseem

src/common/ErrorSnackbar.tsx

@@ -6,7 +6,7 @@ export const ErrorSnackbar = (props: ErrorSnackbarProps) => {
 
   return (
     <Snackbar
-      open={true}
+      open={props?.open ?? true}
       autoHideDuration={6000}
       onClose={props.handleErrorSnackbarClose}
       anchorOrigin={{

src/common/props/ErrorSnackbarProps.ts

@@ -2,4 +2,5 @@ export type ErrorSnackbarProps = {
   handleErrorSnackbarClose: () => void;
   titleMessage?: string;
   bodyMessage?: string;
+  open?: boolean;
 };

src/components/Contact.tsx

@@ -4,62 +4,104 @@ import {
   TextField,
   Typography,
   Button,
+  Box,
 } from "@mui/material";
 import { useState } from "react";
+import { ErrorSnackbar } from "../common/ErrorSnackbar";
 import { Email } from "../consts/Email";
 
 export const Contact = () => {
   const [subject, setSubject] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   const handleSubmit = (e: any) => {
     if (subject !== "" && email !== "" && message !== "") {
       e.preventDefault();
-      window.location.assign(
-        `mailto:${Email}?subject=${subject}&body=${message}`
-      );
-    }
+      try {
+        window.location.assign(
+          `mailto:${Email}?subject=${subject}&body=${message}`
+        );
+        setSnackbarMessage("Email sent successfully.");
+      } catch (e) {
+        setSnackbarMessage("Email failed to send.");
+        console.log(e);
+      }
+    } else setSnackbarMessage("Please fill out all fields.");
   };
 
   return (
-    <Container maxWidth={false}>
-      <Typography
-        variant="h4"
-        fontWeight={"bold"}
-        color={"black"}
-        sx={{ p: "1rem 0 3rem" }}
-      >
-        Contact Us
-      </Typography>
-      <FormControl fullWidth onSubmit={handleSubmit}>
-        <TextField
-          id="subject"
-          label="Subject"
-          value={subject}
-          onChange={(e) => setSubject(e?.target?.value || "")}
-          sx={{ pb: "1rem" }}
+    <>
+      {snackbarMessage !== "" && (
+        <ErrorSnackbar
+          open={snackbarMessage !== ""}
+          handleErrorSnackbarClose={function (): void {
+            setSnackbarMessage("");
+          }}
+          titleMessage={snackbarMessage}
+          bodyMessage={snackbarMessage}
         />
-        <TextField
-          id="email"
-          label="Email"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e?.target?.value || "")}
-          sx={{ pb: "1rem" }}
-        />
-        <TextField
-          id="message"
-          label="Message"
-          multiline
-          value={message}
-          onChange={(e) => setMessage(e?.target?.value || "")}
-          sx={{ pb: "1rem" }}
-        />
-        <Button variant="contained" type="submit" onClick={handleSubmit}>
-          Submit
-        </Button>
-      </FormControl>
-    </Container>
+      )}
+
+      <Container>
+        <Typography
+          variant="h4"
+          fontWeight={"bold"}
+          color={"black"}
+          sx={{ p: "1rem 0 3rem" }}
+        >
+          Contact Us
+        </Typography>
+
+        <Box
+          component="form"
+          autoComplete={"true"}
+          onSubmit={handleSubmit}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            bgcolor: "#44444",
+          }}
+        >
+          <TextField
+            id="subject"
+            label="Subject"
+            required
+            value={subject}
+            onChange={(e) => setSubject(e?.target?.value || "")}
+            sx={{ pb: "1rem" }}
+          />
+          <TextField
+            id="email"
+            label="Email"
+            required
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e?.target?.value || "")}
+            sx={{ pb: "1rem" }}
+          />
+          <TextField
+            id="message"
+            label="Message"
+            required
+            multiline
+            value={message}
+            onChange={(e) => setMessage(e?.target?.value || "")}
+            sx={{ pb: "1rem" }}
+          />
+          <Button
+            variant="contained"
+            type="submit"
+            fullWidth
+            disabled={subject === "" || email === "" || message === ""}
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </Box>
+      </Container>
+    </>
   );
 };