SiteFrontend/src/components/contact_form/contact.tsx

import React, {useState} from "react";
import './Contact.css';
import {useNavigate} from 'react-router-dom'
import {validationSchema} from "./validationSchema";
import {ErrorMessage, Field, Form, Formik, FormikValues} from "formik";

type InputNames = "username" | "email" | "question";

interface Step {
    label: string;
    name: InputNames;
    type: "text" | "email" | "textarea";
    min_length: number;
    max_length: number;
    required: boolean;
    pattern: string;
}

const ContactForm = () => {

    const navigate = useNavigate();

    const [currentStep, setCurrentStep] = useState<number>(0);


    const steps: Step[] = [
        {
            label: "Username",
            name: "username",
            type: "text",
            min_length: 3,
            max_length: 16,
            required: true,
            pattern: ""
        },
        {
            label: "Email",
            name: "email",
            type: "email",
            min_length: 3,
            max_length: 254,
            required: true,
            pattern: ""
        },
        {
            label: "Question",
            name: "question",
            type: "textarea",
            min_length: 10,
            max_length: 2000,
            required: true,
            pattern: ""
        },
    ]

    const handleSubmit = async (e: FormikValues) => {
        try {
            const response = await fetch('http://localhost:8002/api/contact/submitContactForm', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(e)
            })
            if (!response.ok) {
                alert("Your form submission was denied by the server, or the server was unable to process it, if you didn't mess with the data please contact the administrator at admin@alttd.com");
            } else {
                navigate('/verify-email', {
                    state: {
                        email: e['email']
                    }
                });
            }
        } catch (e) {
            alert("Your form submission was denied by the server, if you didn't mess with the data please contact the administrator at admin@alttd.com")
        }
    };

    const next = () => {
        setCurrentStep(current => current + 1)
    }

    const prev = () => {
        setCurrentStep(current => Math.max(current - 1, 0))
    }

    const [prevLength, setPrevLength] = useState(0);
    return (
        <div className="container">
            <div>
                <h1>Contact Form</h1>
            </div>
            <div>
                <Formik
                    initialValues={{username: '', email: '', question: ''}}
                    validationSchema={validationSchema}
                    onSubmit={(values: FormikValues) => {
                        handleSubmit(values);
                    }}
                >
                    {({
                          touched,
                          errors,
                          isValid,
                          handleChange,
                          values,
                          setFieldTouched
                      }) => (

                        <Form>
                            <div>
                                <label>
                                    {steps[currentStep].label}
                                    <Field
                                        type={steps[currentStep].type}
                                        name={steps[currentStep].name}
                                        required={steps[currentStep].required}
                                        min={steps[currentStep].min_length}
                                        max={steps[currentStep].max_length}
                                        as={(steps[currentStep].type === "textarea") ? "textarea" : "input"}
                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                            handleChange(e);
                                            if (prevLength != values[steps[currentStep].name].length) {
                                                setFieldTouched(steps[currentStep].name);
                                                setPrevLength(values[steps[currentStep].name].length);
                                            }
                                        }}
                                    />
                                    <ErrorMessage name={steps[currentStep].name} component="div"/>
                                </label>
                            </div>
                            <button type="button" onClick={prev} disabled={currentStep === 0}>
                                Previous
                            </button>
                            <button type="button" onClick={next}
                                    hidden={currentStep === (steps.length - 1)}
                                    disabled={(!touched[steps[currentStep].name] || !!errors[steps[currentStep].name]) || currentStep === (steps.length - 1)}>
                                Next
                            </button>
                            <input type="submit" value="Submit"
                                   hidden={currentStep !== (steps.length - 1)}
                                   disabled={!isValid || currentStep !== (steps.length - 1)}
                            />
                        </Form>
                    )}
                </Formik>
            </div>
        </div>
    );
};

export default ContactForm;