Define FormioSchemaAndSubmission type (that takes Submission generic …

…type), and use it across app instead of re-defining the shape of the server response in each component that expects data in that shape

app/client/src/components/change2023New.tsx

@@ -30,15 +30,15 @@ type ChangeRequestData = {
   name: string;
 };
 
-type ServerResponse = { url: string; json: object };
+type Response = { url: string; json: object };
 
 /** Custom hook to fetch Formio schema */
 function useFormioSchemaQuery() {
   const url = `${serverUrl}/api/formio/2023/change`;
 
   const query = useQuery({
     queryKey: ["formio/2023/change"],
-    queryFn: () => getData<ServerResponse>(url),
+    queryFn: () => getData<Response>(url),
     refetchOnWindowFocus: false,
   });
 

app/client/src/components/change2024New.tsx

@@ -30,15 +30,15 @@ type ChangeRequestData = {
   name: string;
 };
 
-type ServerResponse = { url: string; json: object };
+type Response = { url: string; json: object };
 
 /** Custom hook to fetch Formio schema */
 function useFormioSchemaQuery() {
   const url = `${serverUrl}/api/formio/2024/change`;
 
   const query = useQuery({
     queryKey: ["formio/2024/change"],
-    queryFn: () => getData<ServerResponse>(url),
+    queryFn: () => getData<Response>(url),
     refetchOnWindowFocus: false,
   });
 

app/client/src/routes/change2023.tsx

@@ -4,24 +4,17 @@ import { useQueryClient, useQuery } from "@tanstack/react-query";
 import { Form } from "@formio/react";
 import icons from "uswds/img/sprite.svg";
 // ---
-import { type FormioChange2023Submission } from "@/types";
+import {
+  type FormioSchemaAndSubmission,
+  type FormioChange2023Submission,
+} from "@/types";
 import { serverUrl, messages } from "@/config";
 import { getData, useContentData } from "@/utilities";
 import { Loading } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 
-type ServerResponse =
-  | {
-      userAccess: false;
-      formSchema: null;
-      submission: null;
-    }
-  | {
-      userAccess: true;
-      formSchema: { url: string; json: object };
-      submission: FormioChange2023Submission;
-    };
+type Response = FormioSchemaAndSubmission<FormioChange2023Submission>;
 
 /** Custom hook to fetch Formio submission data */
 function useFormioSubmissionQuery(mongoId: string | undefined) {
@@ -35,7 +28,7 @@ function useFormioSubmissionQuery(mongoId: string | undefined) {
 
   const query = useQuery({
     queryKey: ["formio/2023/change", { id: mongoId }],
-    queryFn: () => getData<ServerResponse>(url),
+    queryFn: () => getData<Response>(url),
     refetchOnWindowFocus: false,
   });
 

app/client/src/routes/change2024.tsx

@@ -4,24 +4,17 @@ import { useQueryClient, useQuery } from "@tanstack/react-query";
 import { Form } from "@formio/react";
 import icons from "uswds/img/sprite.svg";
 // ---
-import { type FormioChange2024Submission } from "@/types";
+import {
+  type FormioSchemaAndSubmission,
+  type FormioChange2024Submission,
+} from "@/types";
 import { serverUrl, messages } from "@/config";
 import { getData, useContentData } from "@/utilities";
 import { Loading } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 
-type ServerResponse =
-  | {
-      userAccess: false;
-      formSchema: null;
-      submission: null;
-    }
-  | {
-      userAccess: true;
-      formSchema: { url: string; json: object };
-      submission: FormioChange2024Submission;
-    };
+type Response = FormioSchemaAndSubmission<FormioChange2024Submission>;
 
 /** Custom hook to fetch Formio submission data */
 function useFormioSubmissionQuery(mongoId: string | undefined) {
@@ -35,7 +28,7 @@ function useFormioSubmissionQuery(mongoId: string | undefined) {
 
   const query = useQuery({
     queryKey: ["formio/2024/change", { id: mongoId }],
-    queryFn: () => getData<ServerResponse>(url),
+    queryFn: () => getData<Response>(url),
     refetchOnWindowFocus: false,
   });
 

app/client/src/routes/crf2022.tsx

@@ -8,7 +8,10 @@ import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
-import { type FormioCRF2022Submission } from "@/types";
+import {
+  type FormioSchemaAndSubmission,
+  type FormioCRF2022Submission,
+} from "@/types";
 import { serverUrl, messages } from "@/config";
 import {
   getData,
@@ -26,17 +29,7 @@ import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
 
-type ServerResponse =
-  | {
-      userAccess: false;
-      formSchema: null;
-      submission: null;
-    }
-  | {
-      userAccess: true;
-      formSchema: { url: string; json: object };
-      submission: FormioCRF2022Submission;
-    };
+type Response = FormioSchemaAndSubmission<FormioCRF2022Submission>;
 
 /** Custom hook to fetch and update Formio submission data */
 function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
@@ -51,7 +44,7 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
   const query = useQuery({
     queryKey: ["formio/2022/crf-submission", { id: rebateId }],
     queryFn: () => {
-      return getData<ServerResponse>(url).then((res) => {
+      return getData<Response>(url).then((res) => {
         const mongoId = res.submission?._id;
         const comboKey = res.submission?.data.bap_hidden_entity_combo_key;
 
@@ -90,7 +83,7 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
       return postData<FormioCRF2022Submission>(url, updatedSubmission);
     },
     onSuccess: (res) => {
-      return queryClient.setQueryData<ServerResponse>(
+      return queryClient.setQueryData<Response>(
         ["formio/2022/crf-submission", { id: rebateId }],
         (prevData) => {
           return prevData?.submission

app/client/src/routes/frf2022.tsx

@@ -8,7 +8,10 @@ import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
-import { type FormioFRF2022Submission } from "@/types";
+import {
+  type FormioSchemaAndSubmission,
+  type FormioFRF2022Submission,
+} from "@/types";
 import { serverUrl, messages } from "@/config";
 import {
   getData,
@@ -27,17 +30,7 @@ import { MarkdownContent } from "@/components/markdownContent";
 import { useDialogActions } from "@/contexts/dialog";
 import { useNotificationsActions } from "@/contexts/notifications";
 
-type ServerResponse =
-  | {
-      userAccess: false;
-      formSchema: null;
-      submission: null;
-    }
-  | {
-      userAccess: true;
-      formSchema: { url: string; json: object };
-      submission: FormioFRF2022Submission;
-    };
+type Response = FormioSchemaAndSubmission<FormioFRF2022Submission>;
 
 /** Custom hook to fetch and update Formio submission data */
 function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
@@ -52,7 +45,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
   const query = useQuery({
     queryKey: ["formio/2022/frf-submission", { id: mongoId }],
     queryFn: () => {
-      return getData<ServerResponse>(url).then((res) => {
+      return getData<Response>(url).then((res) => {
         const comboKey = res.submission?.data.bap_hidden_entity_combo_key;
 
         /**
@@ -101,7 +94,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
       return postData<FormioFRF2022Submission>(url, updatedSubmission);
     },
     onSuccess: (res) => {
-      return queryClient.setQueryData<ServerResponse>(
+      return queryClient.setQueryData<Response>(
         ["formio/2022/frf-submission", { id: mongoId }],
         (prevData) => {
           return prevData?.submission

app/client/src/routes/frf2023.tsx

@@ -8,7 +8,10 @@ import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
-import { type FormioFRF2023Submission } from "@/types";
+import {
+  type FormioSchemaAndSubmission,
+  type FormioFRF2023Submission,
+} from "@/types";
 import { serverUrl, messages } from "@/config";
 import {
   getData,
@@ -27,17 +30,7 @@ import { MarkdownContent } from "@/components/markdownContent";
 import { useDialogActions } from "@/contexts/dialog";
 import { useNotificationsActions } from "@/contexts/notifications";
 
-type ServerResponse =
-  | {
-      userAccess: false;
-      formSchema: null;
-      submission: null;
-    }
-  | {
-      userAccess: true;
-      formSchema: { url: string; json: object };
-      submission: FormioFRF2023Submission;
-    };
+type Response = FormioSchemaAndSubmission<FormioFRF2023Submission>;
 
 /** Custom hook to fetch and update Formio submission data */
 function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
@@ -52,7 +45,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
   const query = useQuery({
     queryKey: ["formio/2023/frf-submission", { id: mongoId }],
     queryFn: () => {
-      return getData<ServerResponse>(url).then((res) => {
+      return getData<Response>(url).then((res) => {
         const comboKey = res.submission?.data._bap_entity_combo_key;
 
         /**
@@ -87,7 +80,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
       return postData<FormioFRF2023Submission>(url, updatedSubmission);
     },
     onSuccess: (res) => {
-      return queryClient.setQueryData<ServerResponse>(
+      return queryClient.setQueryData<Response>(
         ["formio/2023/frf-submission", { id: mongoId }],
         (prevData) => {
           return prevData?.submission

app/client/src/routes/frf2024.tsx

@@ -8,7 +8,10 @@ import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
-import { type FormioFRF2024Submission } from "@/types";
+import {
+  type FormioSchemaAndSubmission,
+  type FormioFRF2024Submission,
+} from "@/types";
 import { serverUrl, messages } from "@/config";
 import {
   getData,
@@ -27,17 +30,7 @@ import { MarkdownContent } from "@/components/markdownContent";
 import { useDialogActions } from "@/contexts/dialog";
 import { useNotificationsActions } from "@/contexts/notifications";
 
-type ServerResponse =
-  | {
-      userAccess: false;
-      formSchema: null;
-      submission: null;
-    }
-  | {
-      userAccess: true;
-      formSchema: { url: string; json: object };
-      submission: FormioFRF2024Submission;
-    };
+type Response = FormioSchemaAndSubmission<FormioFRF2024Submission>;
 
 /** Custom hook to fetch and update Formio submission data */
 function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
@@ -52,7 +45,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
   const query = useQuery({
     queryKey: ["formio/2024/frf-submission", { id: mongoId }],
     queryFn: () => {
-      return getData<ServerResponse>(url).then((res) => {
+      return getData<Response>(url).then((res) => {
         const comboKey = res.submission?.data._bap_entity_combo_key;
 
         /**
@@ -87,7 +80,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
       return postData<FormioFRF2024Submission>(url, updatedSubmission);
     },
     onSuccess: (res) => {
-      return queryClient.setQueryData<ServerResponse>(
+      return queryClient.setQueryData<Response>(
         ["formio/2024/frf-submission", { id: mongoId }],
         (prevData) => {
           return prevData?.submission

app/client/src/routes/helpdesk.tsx

@@ -47,7 +47,7 @@ import {
   useRebateYearActions,
 } from "@/contexts/rebateYear";
 
-type ServerResponse =
+type Response =
   | {
       formSchema: null;
       formio: null;
@@ -114,7 +114,7 @@ function ResultTableRow(props: {
     SetStateAction<{ fetched: boolean; results: SubmissionAction[] }>
   >;
   submissionMutation: UseMutationResult<
-    ServerResponse["formio"],
+    Response["formio"],
     unknown,
     DraftSubmission,
     unknown
@@ -390,17 +390,17 @@ export function Helpdesk() {
 
   const submissionQuery = useQuery({
     queryKey: ["helpdesk/submission"],
-    queryFn: () => getData<ServerResponse>(submissionUrl),
+    queryFn: () => getData<Response>(submissionUrl),
     onSuccess: (_res) => setResultDisplayed(true),
     enabled: false,
   });
 
   const submissionMutation = useMutation({
     mutationFn: (submission: DraftSubmission) => {
-      return postData<ServerResponse["formio"]>(submissionUrl, submission);
+      return postData<Response["formio"]>(submissionUrl, submission);
     },
     onSuccess: (res) => {
-      queryClient.setQueryData<ServerResponse>(
+      queryClient.setQueryData<Response>(
         ["helpdesk/submission"],
         (prevData) => {
           return prevData?.formio

app/client/src/routes/prf2022.tsx

@@ -8,7 +8,10 @@ import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
 // ---
-import { type FormioPRF2022Submission } from "@/types";
+import {
+  type FormioSchemaAndSubmission,
+  type FormioPRF2022Submission,
+} from "@/types";
 import { serverUrl, messages } from "@/config";
 import {
   getData,
@@ -26,17 +29,7 @@ import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
 
-type ServerResponse =
-  | {
-      userAccess: false;
-      formSchema: null;
-      submission: null;
-    }
-  | {
-      userAccess: true;
-      formSchema: { url: string; json: object };
-      submission: FormioPRF2022Submission;
-    };
+type Response = FormioSchemaAndSubmission<FormioPRF2022Submission>;
 
 /** Custom hook to fetch and update Formio submission data */
 function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
@@ -51,7 +44,7 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
   const query = useQuery({
     queryKey: ["formio/2022/prf-submission", { id: rebateId }],
     queryFn: () => {
-      return getData<ServerResponse>(url).then((res) => {
+      return getData<Response>(url).then((res) => {
         const mongoId = res.submission?._id;
         const comboKey = res.submission?.data.bap_hidden_entity_combo_key;
 
@@ -90,7 +83,7 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
       return postData<FormioPRF2022Submission>(url, updatedSubmission);
     },
     onSuccess: (res) => {
-      return queryClient.setQueryData<ServerResponse>(
+      return queryClient.setQueryData<Response>(
         ["formio/2022/prf-submission", { id: rebateId }],
         (prevData) => {
           return prevData?.submission