improved website

2024-07-07 22:16:55 -04:00
parent fae0c95aa1
commit 82ee8fddd1
11 changed files with 278 additions and 191 deletions
@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react';
+import InputBox from './InputBox';
+
+export default function ContactForm() {
+    const [ error, setError ] = useState<string>("");
+    const [ success, setSuccess ] = useState<boolean>(false);
+    const [ inputState, setInputState ] = useState<{name: string, email: string, subject: string, message: string}>({
+        name: "",
+        email: "",
+        subject: "",
+        message: ""
+    });
+
+    const onSubmit = () => {
+        if (
+            inputState.name === ""
+            || inputState.email === ""
+            || inputState.subject === ""
+            || inputState.message === ""
+        ) {
+            setError("A required field was missing")
+        } else {
+            console.log("Form submitted")
+
+            fetch("https://api.alexav.gg/v4/contact", {
+                method: "post",
+                headers: {
+                    'content-type': 'application/json'
+                },
+                body: JSON.stringify(inputState)
+            }).then((res) => {
+                if (res.ok) {
+                    setSuccess(true)
+                } else {
+                    setError("An error occurred while submitting your info.")
+                }
+            }).catch((e) => {
+                console.error(e)
+                setError("An error occurred while submitting your info.")
+            })
+        }
+    }
+
+    useEffect(() => {
+        setTimeout(() => {
+            setError("")
+        }, 6000)
+    }, [error]);
+    useEffect(() => {
+        setTimeout(() => {
+            setSuccess(false)
+        }, 6000)
+    })
+
+    return (
+        <div className="bg-white rounded-lg text-black p-2">
+            <h1 className="text-2xl font-bold">Contact Me</h1>
+            <hr className="my-2 border-black" />
+
+            <div className="space-y-2">
+                <InputBox 
+                    isText={true}
+                    name="name"
+                    placeholder="Name.."
+                    onChange={(value: string) => {
+                        setInputState((prevState) => {
+                            return {
+                                ...prevState,
+                                name: value
+                            }
+                        })
+                    }}
+                />
+                <InputBox 
+                    name="email"
+                    isText={true}
+                    placeholder="Email.."
+                    onChange={(value: string) => {
+                        setInputState((prevState) => {
+                            return {
+                                ...prevState,
+                                email: value
+                            }
+                        })
+                    }}
+                />
+                <InputBox 
+                    isText={true}
+                    name="subject"
+                    placeholder="Subject.."
+                    onChange={(value: string) => {
+                        setInputState((prevState) => {
+                            return {
+                                ...prevState,
+                                subject: value
+                            }
+                        })
+                    }}
+                />
+                <InputBox 
+                    isText={false}
+                    name="message"
+                    placeholder="Message.."
+                    onChange={(value: string) => {
+                        setInputState((prevState) => {
+                            return {
+                                ...prevState,
+                                message: value
+                            }
+                        })
+                    }}
+                />
+            </div>
+
+            <div className="block">
+                <button
+                    type="button"
+                    className="bg-black w-full text-white font-bold rounded-lg p-2"
+                    onClick={onSubmit}
+                >
+                    Submit
+                </button>
+                <p className="text-red-400 font-bold text-center">{error}</p>
+                <p className="font-bold text-center">{ success && "Success! Your message has been received"}</p>
+            </div>
+        </div>
+    )
+}