chore: refactor admin forms error display

Author: shon-button

bciers/apps/administration/app/components/buttons/Review.tsx

@@ -9,6 +9,10 @@ import Modal from "@bciers/components/modal/Modal";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import { Role, Status } from "@bciers/utils/src/enums";
+import {
+  useValidationErrors,
+  handleApiResponse,
+} from "@bciers/components/validationErrors";
 
 interface Props {
   confirmApproveMessage: string;
@@ -36,9 +40,7 @@ const CloseButton = ({ onClose }: CloseProps) => {
       aria-label="close"
       color="inherit"
       size="small"
-      onClick={() => {
-        onClose();
-      }}
+      onClick={onClose}
     >
       <CloseIcon fontSize="inherit" />
     </IconButton>
@@ -56,11 +58,14 @@ const Review = ({
   onApprove,
   onReject,
 }: Readonly<Props>) => {
-  const [errorList, setErrorList] = useState([] as any[]);
   const [successMessageList, setSuccessMessageList] = useState([] as any[]);
   const [modalState, setModalState] = useState("" as string);
   const [dismissAlert, setDismissAlert] = useState(false);
 
+  const { setErrors, renderedErrors } = useValidationErrors({
+    config: {},
+  });
+
   const handleApprove = () => {
     setModalState("approve");
   };
@@ -74,25 +79,29 @@ const Review = ({
   };
 
   const handleConfirmApprove = async () => {
+    setErrors(undefined);
+    setModalState("");
     const response = await onApprove();
-    if (response.error) {
-      setModalState("");
-      return setErrorList([{ message: response.error }]);
+    const isSuccess = handleApiResponse(response, setErrors);
+
+    if (!isSuccess) {
+      return;
     }
 
-    setModalState("");
-    return setSuccessMessageList([{ message: approvedMessage }]);
+    setSuccessMessageList([{ message: approvedMessage }]);
   };
 
   const handleConfirmReject = async () => {
+    setErrors(undefined);
+    setModalState("");
     const response = await onReject();
-    if (response.error) {
-      setModalState("");
-      return setErrorList([{ message: response.error }]);
+    const isSuccess = handleApiResponse(response, setErrors);
+
+    if (!isSuccess) {
+      return;
     }
 
-    setModalState("");
-    return setSuccessMessageList([{ message: declinedMessage }]);
+    setSuccessMessageList([{ message: declinedMessage }]);
   };
 
   const handleCloseAlert = () => {
@@ -102,7 +111,7 @@ const Review = ({
   const isReviewButtons =
     status !== Status.DECLINED &&
     role !== Role.ADMIN &&
-    errorList.length === 0 &&
+    !renderedErrors &&
     successMessageList.length === 0;
 
   const isApprove = modalState === "approve";
@@ -113,7 +122,6 @@ const Review = ({
   return (
     <Box
       sx={{
-        // 🛠️ to prevent leaving extra space when there is no content
         minHeight: "auto",
         width: "100%",
         marginBottom: isReviewButtons ? "16px" : "0",
@@ -191,56 +199,45 @@ const Review = ({
               <Note message={note} />
             </span>
           )}
-          {
-            <Box
+          <Box
+            sx={{
+              width: "fit-content",
+              minWidth: "fit-content",
+              height: "fit-content",
+            }}
+          >
+            <Button
+              onClick={handleApprove}
+              className="mr-2"
+              color="success"
+              variant="outlined"
+              aria-label="Approve application"
+              sx={{
+                marginRight: "12px",
+                border: "1px solid",
+                fontWeight: "bold",
+              }}
+            >
+              Approve as Administrator <RecommendIcon />
+            </Button>
+            <Button
+              onClick={handleReject}
+              color="error"
+              variant="outlined"
+              aria-label="Reject application"
               sx={{
-                width: "fit-content",
-                minWidth: "fit-content",
-                height: "fit-content",
+                border: "1px solid",
+                fontWeight: "bold",
               }}
             >
-              <Button
-                onClick={handleApprove}
-                className="mr-2"
-                color="success"
-                variant="outlined"
-                aria-label="Approve application"
-                sx={{
-                  marginRight: "12px",
-                  border: "1px solid",
-                  fontWeight: "bold",
-                }}
-              >
-                Approve as Administrator <RecommendIcon />
-              </Button>
-              <Button
-                onClick={handleReject}
-                color="error"
-                variant="outlined"
-                aria-label="Reject application"
-                sx={{
-                  border: "1px solid",
-                  fontWeight: "bold",
-                }}
-              >
-                Decline Access <DoNotDisturbIcon />
-              </Button>
-            </Box>
-          }
+              Decline Access <DoNotDisturbIcon />
+            </Button>
+          </Box>
         </Box>
       )}
-      {errorList.length > 0 &&
-        !dismissAlert &&
-        errorList.map((e: any) => (
-          <Alert
-            key={e.message}
-            action={<CloseButton onClose={handleCloseAlert} />}
-            severity="error"
-            className="mb-4"
-          >
-            {e?.stack ?? e.message}
-          </Alert>
-        ))}
+
+      {renderedErrors && <div className="mb-4">{renderedErrors}</div>}
+
       {successMessageList.length > 0 &&
         !dismissAlert &&
         successMessageList.map((e: any) => (

bciers/apps/administration/app/components/profile/ProfileForm.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { useState } from "react";
 import type { ReactNode } from "react";
-import { Alert } from "@mui/material";
 import { actionHandler } from "@bciers/actions";
 import FormBase from "@bciers/components/form/FormBase";
 import { Button } from "@mui/material";
@@ -13,6 +12,11 @@ import {
   UserProfilePartialFormData,
 } from "@bciers/types/form/formData";
 import { IDP } from "@bciers/utils/src/enums";
+import {
+  useValidationErrors,
+  handleApiResponse,
+  createGenericValidationError,
+} from "@bciers/components/validationErrors";
 
 export const userSchema: RJSFSchema = {
   type: "object",
@@ -50,7 +54,9 @@ export default function ProfileForm({
   contactId,
 }: Props) {
   // 🐜 To display errors
-  const [errorList, setErrorList] = useState([] as any[]);
+  const { setErrors, renderedErrors } = useValidationErrors({
+    config: {},
+  });
 
   // 🌀 Loading state for the Submit button
   const [isLoading, setIsLoading] = useState(false);
@@ -120,8 +126,7 @@ export default function ProfileForm({
 
   // 🛠️ Function to submit user form data to API
   const submitHandler = async (data: { formData?: UserProfileFormData }) => {
-    //Set states
-    setErrorList([]);
+    setErrors(undefined);
     setIsLoading(true);
     setIsSuccess(false);
 
@@ -142,11 +147,10 @@ export default function ProfileForm({
       },
     );
 
-    // 🛑 Set loading to false after the API call is completed
     setIsLoading(false);
 
-    if (response.error) {
-      setErrorList([{ message: response.error }]);
+    const isSuccessResponse = handleApiResponse(response, setErrors);
+    if (!isSuccessResponse) {
       return;
     }
 
@@ -162,12 +166,7 @@ export default function ProfileForm({
       uiSchema={userUiSchema}
       onSubmit={submitHandler}
     >
-      {errorList.length > 0 &&
-        errorList.map((e: any) => (
-          <Alert key={e.message} severity="error">
-            {e?.stack ?? e.message}
-          </Alert>
-        ))}
+      {renderedErrors}
       <div className="flex justify-end gap-3">
         {/* Disable the button when loading or when success state is true */}
         <Button

bciers/apps/administration/app/components/userOperators/SelectOperatorForm.tsx

@@ -1,75 +1,64 @@
 "use client";
+
 import { BC_GOV_LINKS_COLOR } from "@bciers/styles/colors";
 import Link from "next/link";
 import Form from "@bciers/components/form/FormBase";
-import { useState } from "react";
-import { Alert } from "@mui/material";
 import { useRouter } from "next/navigation";
 import { actionHandler } from "@bciers/actions";
+import {
+  useValidationErrors,
+  handleApiResponse,
+} from "@bciers/components/validationErrors";
 import { SelectOperatorFormData } from "../userOperators/types";
 import { selectOperatorUiSchema } from "../../data/jsonSchema/selectOperator";
 import { selectOperatorSchema } from "../../data/jsonSchema/selectOperator";
+import { validationUIConfig } from "@/administration/app/components/validationErrors/config";
+import type { ValidationKey } from "@/administration/app/components/validationErrors/types";
 
 export default function SelectOperatorForm() {
-  const [errorList, setErrorList] = useState<{ message: string }[]>([]);
   const router = useRouter();
+  const { setErrors, renderedErrors } = useValidationErrors<ValidationKey>({
+    config: validationUIConfig,
+  });
 
   const handleSubmit = async (data: { formData?: SelectOperatorFormData }) => {
-    // Reset previous errors on new submission
-    setErrorList([]);
+    setErrors(undefined);
 
     const queryParam = `?${data.formData?.search_type}=${
       data.formData?.[
         data.formData?.search_type as keyof SelectOperatorFormData
       ]
     }`;
 
-    try {
-      const response = await actionHandler(
-        `registration/operators/search${queryParam}`,
-        "GET",
-        "/select-operator",
-      );
-
-      // Updated check: handles response.error, response.message, or response.detail
-      const errorMessage =
-        response?.error || response?.message || response?.detail;
+    const response = await actionHandler(
+      `registration/operators/search${queryParam}`,
+      "GET",
+      "/select-operator",
+    );
 
-      if (errorMessage) {
-        console.log("[ERROR DETECTED] Setting error message:", errorMessage);
-        setErrorList([
-          {
-            message:
-              typeof errorMessage === "string"
-                ? errorMessage
-                : JSON.stringify(errorMessage),
-          },
-        ]);
-        return;
-      }
+    const isSuccess = handleApiResponse<ValidationKey>(
+      response,
+      setErrors,
+      "operator_not_found",
+    );
+    if (!isSuccess) {
+      return;
+    }
 
-      // If the response is an array, we want the first element
-      let operatorId;
-      let operatorLegalName;
-      if (Array.isArray(response) && response.length > 0) {
-        operatorId = response[0].id;
-        operatorLegalName = response[0].legal_name;
-      } else if (response && response.id) {
-        operatorId = response.id;
-        operatorLegalName = response.legal_name;
-      } else {
-        setErrorList([{ message: "Unexpected response format from server." }]);
-        return;
-      }
+    const operator = Array.isArray(response) ? response[0] : response;
 
-      router.push(
-        `/select-operator/confirm/${operatorId}?title=${operatorLegalName}`,
+    if (!operator?.id) {
+      handleApiResponse<ValidationKey>(
+        { error: "No operator found matching the provided criteria." },
+        setErrors,
+        "operator_not_found",
       );
-    } catch (err: any) {
-      setErrorList([
-        { message: err?.message || "An unexpected error occurred." },
-      ]);
+      return;
     }
+
+    router.push(
+      `/select-operator/confirm/${operator.id}?title=${operator.legal_name}`,
+    );
   };
 
   return (
@@ -82,16 +71,7 @@ export default function SelectOperatorForm() {
           uiSchema={selectOperatorUiSchema}
           className="mx-auto"
         >
-          {/* Needed to display errors from cra number */}
-          {errorList.length > 0 &&
-            errorList.map((e: any, index: number) => {
-              return (
-                <Alert key={index} severity="error" className="mt-2">
-                  {e.message}
-                </Alert>
-              );
-            })}
-          {/* Needed to prevent rendering of standard submit buttons by RJSF */}
+          {renderedErrors}
           <></>
         </Form>
         <p>

bciers/apps/administration/app/components/validationErrors/config.ts

@@ -27,4 +27,15 @@ export const validationUIConfig: Partial<
     resolveFormattedMessage: (error) =>
       error.message ?? "Please return to Contacts to assign a representative.",
   },
+  operator_not_found: {
+    priority: 10,
+    renderMode: "inline_link",
+    resolveLabel: () => "Add Operator",
+    resolveHref: () => "/select-operator/add-operator",
+    resolveMessage: (error) =>
+      error.message ?? "No operator found matching the provided criteria.",
+    resolveFormattedMessage: (error) =>
+      error.message ??
+      "No operator found matching the provided criteria. You can Add Operator instead.",
+  },
 };