Mentor Form confirmation (#550)

* mentor form-EmojiRain small changes * mentor form confirmation * mentor form confirmation * bg "light" added * bg light
Vets-Who-Code · Feb 16, 2024 · 2c8e7b7 · 2c8e7b7
1 parent 3b2f77f
commit 2c8e7b7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 16 deletions.
diff --git a/src/components/EmojiRain/index.tsx b/src/components/EmojiRain/index.tsx
@@ -8,21 +8,21 @@ const EmojiRain = () => {
     }));
 
     return (
-        <div className="fixed top-0 left-0 w-full h-full pointer-events-none z-50 overflow-hidden">
-            {emojis.map((emojiObj) => (
-                <div
-                    key={emojiObj.id} // Using the unique ID as key
-                    style={{
-                        position: "absolute",
-                        left: `${Math.random() * 100}vw`,
-                        top: `-${Math.random() * 100}vh`,
-                        animation: "fall 5s linear forwards",
-                    }}
-                >
-                    {emojiObj.emoji}
-                </div>
-            ))}
-        </div>
+            <div className="fixed top-0 left-0 w-full h-full pointer-events-none z-50 overflow-hidden">
+                {emojis.map((emojiObj) => (
+                    <div
+                        key={emojiObj.id} // Using the unique ID as key
+                        style={{
+                            position: "absolute",
+                            left: `${Math.random() * 100}%`,
+                            top: `${Math.random() * 100}%`,
+                            animation: "fall 5s linear forwards",
+                        }}
+                    >
+                        {emojiObj.emoji}
+                    </div>
+                ))}
+            </div>
     );
 };
 

diff --git a/src/components/forms/mentor-form.tsx b/src/components/forms/mentor-form.tsx
@@ -1,9 +1,11 @@
+import EmojiRain from "@components/EmojiRain";
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import axios from "axios";
 import Input from "@ui/form-elements/input";
 import Button from "@ui/button";
 import { hasKey } from "@utils/methods";
+import Feedback from "@ui/form-elements/feedback";
 
 interface IFormValues {
     name: string;
@@ -17,6 +19,8 @@ interface IFormValues {
 
 const MentorForm = () => {
     const [message, setMessage] = useState("");
+    const [showEmojiRain, setShowEmojiRain] = useState<boolean>(false);
+
     const {
         register,
         handleSubmit,
@@ -28,6 +32,10 @@ const MentorForm = () => {
         try {
             await axios.post("/api/mentor", data);
             setMessage("Thank you for your registration!");
+            setShowEmojiRain(true);
+
+            setTimeout(() => setShowEmojiRain(false), 5000);
+
             reset();
         } catch (error) {
             setMessage("Failed to submit the form. Please try again later.");
@@ -37,7 +45,6 @@ const MentorForm = () => {
     return (
         <div className="tw-px-4 md:tw-px-[250px]">
             <h3 className="tw-text-h2 tw-mb-5">Register</h3>
-            {message && <p>{message}</p>}
             <form onSubmit={handleSubmit(onSubmit)} noValidate>
                 <div className="tw-mb-7.5">
                     <label
@@ -49,6 +56,7 @@ const MentorForm = () => {
                     <Input
                         id="name"
                         placeholder="Jody Grinder"
+                        bg="light"
                         feedbackText={errors?.name?.message}
                         state={hasKey(errors, "name") ? "error" : "success"}
                         showState={!!hasKey(errors, "name")}
@@ -67,6 +75,7 @@ const MentorForm = () => {
                     <Input
                         id="email"
                         placeholder="[email protected]"
+                        bg="light"
                         feedbackText={errors?.email?.message}
                         state={hasKey(errors, "email") ? "error" : "success"}
                         showState={!!hasKey(errors, "email")}
@@ -89,6 +98,7 @@ const MentorForm = () => {
                     <Input
                         id="branch-of-service"
                         placeholder="Civilian"
+                        bg="light"
                         feedbackText={errors?.["branch-of-service"]?.message}
                         state={
                             hasKey(errors, "branch-of-service")
@@ -111,6 +121,7 @@ const MentorForm = () => {
                     <Input
                         id="technical-expertise"
                         placeholder="Javascript, React, Node, etc."
+                        bg="light"
                         feedbackText={errors?.["technical-expertise"]?.message}
                         state={
                             hasKey(errors, "technical-expertise")
@@ -133,6 +144,7 @@ const MentorForm = () => {
                     <Input
                         id="github-portfolio-or-linkedin"
                         placeholder="github.com/jody-fake-profile"
+                        bg="light"
                         feedbackText={
                             errors?.["github-portfolio-or-linkedin"]?.message
                         }
@@ -160,6 +172,7 @@ const MentorForm = () => {
                     <Input
                         id="location"
                         placeholder="Washington, DC"
+                        bg="light"
                         feedbackText={errors?.location?.message}
                         state={hasKey(errors, "location") ? "error" : "success"}
                         showState={!!hasKey(errors, "location")}
@@ -178,6 +191,7 @@ const MentorForm = () => {
                     <Input
                         id="employer-restrictions"
                         placeholder="None"
+                        bg="light"
                         feedbackText={
                             errors?.["employer-restrictions"]?.message
                         }
@@ -200,6 +214,10 @@ const MentorForm = () => {
                 >
                     Register
                 </Button>
+                {message && (
+                    <Feedback state="success">{message}</Feedback>
+                )}
+                {showEmojiRain && <EmojiRain />}
             </form>
         </div>
     );