Add form active status check and redirection

Introduced `FormActiveRedirect` component to check if forms are active before rendering. Updated form data to include `backendFormName` and adjusted routes in `App.tsx` to use the new component. This ensures that inactive forms redirect users with a relevant message.

src/App.tsx

@@ -9,6 +9,7 @@ import DEBUG from "./components/DEBUG/DEBUG";
 import GenericForm from "./components/form/genericForm";
 import {getFormProperties} from "./components/form/formData";
 import {FormProperties} from "./components/form/formInterfaces";
+import FormActiveRedirect from "./components/form/formActiveRedirect";
 
 function App() {
     return (
@@ -21,7 +22,7 @@ function App() {
                         <Route
                             key={property.path}
                             path={property.path}
-                            element={<GenericForm {...property.formData} />}
+                            element={<FormActiveRedirect {...property.formData} />}
                         />
                     ))}
                     <Route path="/verify-email" element={<VerifyMail/>}/>

src/components/form/data/apply.tsx

@@ -213,5 +213,6 @@ export const apply: FormData = {
         other: Yup.string()
                     .max(2000, 'Please provide at most 2000 characters')
     }),
-    title: "Staff Application"
+    title: "Staff Application",
+    backendFormName: "StaffApplication",
 };

src/components/form/data/contact.tsx

@@ -48,5 +48,6 @@ export const contact: FormData = {
             .max(2000, 'Question should not exceed 2000 characters')
             .required('Question is required')
     }),
-    title: "Contact Form"
+    title: "Contact Form",
+    backendFormName: "ContactForm",
 };

src/components/form/formActiveRedirect.tsx

@@ -0,0 +1,35 @@
+import {FormData} from "./formInterfaces";
+import {useEffect, useState} from "react";
+import GenericForm from "./genericForm";
+
+const FormActiveRedirect = (formData: FormData) => {
+    const [isLoading, setLoading] = useState(true);
+    const [isFormActive, setFormActive] = useState(false);
+    const handleCheckForm = async () => {
+        const result = await fetch(`${process.env.REACT_APP_BACKEND_BASE_URL}/api/checks/formActive`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ formName: formData.backendFormName })
+        });
+        const response = await result.json();
+        setFormActive(response.isActive);
+        setLoading(false);
+    };
+
+    useEffect(() => {
+        handleCheckForm();
+    }, []);
+
+    if (isLoading) {
+        return <div className={"container"}><h2>Checking if form is active</h2></div>;
+    }
+
+    if (!isFormActive) {
+        return <div className={"container"}><h2>The {formData.title} is not currently active</h2></div>;
+    }
+
+    return (
+        <GenericForm {...formData} />
+    );
+}
+export default FormActiveRedirect;

src/components/form/formInterfaces.tsx

@@ -22,6 +22,7 @@ export interface UserInput {
 }
 
 export type FormData = {
+    backendFormName: string;
     steps: Step[];
     backend: string;
     userInput: UserInput;

src/components/form/genericForm.tsx

@@ -11,6 +11,7 @@ const GenericForm = (formData: FormData) => {
     const backend: string = formData.backend;
     const userInput: UserInput = formData.userInput;
     const spec: Yup.Schema<any> = formData.spec;
+    const backendFormname = formData.backendFormName
 
     const navigate = useNavigate();