Add useCallback to optimize handleCheckForm

Refactored handleCheckForm using useCallback to prevent unnecessary re-renders. This ensures the function is only re-created when formData.backendFormName changes, improving performance. Updated useEffect dependencies to include handleCheckForm for proper effect cleanup.

Jenkinsfile

@@ -11,7 +11,11 @@ pipeline {
                     def success = false
 
                     // Clean npm cache and try normal install and npm ci once
+                    try {
                         sh 'npm cache clean --force'
+                    } catch (Exception e0) {
+                        echo 'npm cache clean --force failed trying more things'
+                    }
                     try {
                         sh 'npm install'
                         success = true
@@ -39,6 +43,12 @@ pipeline {
                                 echo "Retry ${retryCount}/${MAX_RETRIES} failed"
                             }
                         }
+                        try {
+                            sh 'npm install --legacy-peer-deps --force'
+                            success = true
+                        } catch (Exception e4) {
+                            echo "npm install --legacy-peer-deps --force failed"
+                        }
                     }
 
                     if (!success) {
@@ -56,9 +66,11 @@ pipeline {
         }
         stage('discord') {
             when {
+                anyOf {
                     branch 'main'
                     branch 'master'
                 }
+            }
             steps {
                 discordSend description: "Build: ${BUILD_NUMBER}", showChangeset: true, result: currentBuild.currentResult, title: currentBuild.fullProjectName, webhookURL: env.discordwebhook
             }

src/App.tsx

@@ -6,9 +6,9 @@ import Footer from "./components/footer/footer";
 import VerifyMail from "./components/verify_email/verify_mail";
 import ThankYou from "./components/verify_email/thank_you";
 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 +21,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,37 @@
+import {FormData} from "./formInterfaces";
+import {useEffect, useState, useCallback} from "react";
+import GenericForm from "./genericForm";
+
+const FormActiveRedirect = (formData: FormData) => {
+    const [isLoading, setLoading] = useState(true);
+    const [isFormActive, setFormActive] = useState(false);
+
+    const handleCheckForm = useCallback(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);
+    }, [formData.backendFormName]);
+
+    useEffect(() => {
+        handleCheckForm().then(() => {});
+    }, [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

@@ -1,10 +1,9 @@
 import React, {useState} from "react";
 import './GenericForm.css';
 import {useNavigate} from 'react-router-dom'
-import {ErrorMessage, Field, Form, FormikProvider, FormikValues, useFormik} from "formik";
+import {ErrorMessage, Form, FormikProvider, FormikValues, useFormik} from "formik";
 import {Step, UserInput, FormData} from './formInterfaces';
 import * as Yup from "yup";
-import formHTML from "./formHTML";
 import FormHTML from "./formHTML";
 
 const GenericForm = (formData: FormData) => {