- more addition bugfixes

src/components/SettingForms/Channel1-JSON/ChannelCard.tsx

@@ -9,14 +9,17 @@ import { useEffect, useMemo } from "react";
 type ChannelCardProps = {
   touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
   isSubmitting: boolean;
+  isBof2ConstantsLoading: boolean;
+  isDispatcherLoading: boolean;
 };
 
-const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
+const ChannelCard = ({ touched, isSubmitting, isBof2ConstantsLoading, isDispatcherLoading }: ChannelCardProps) => {
   const { values, setFieldValue } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
   const { backOfficeQuery } = useCameraBackOfficeOutput(values?.format);
+  const isBackOfficeQueryLoading = backOfficeQuery?.isFetching;
 
   const mapped = useMemo(() => {
-    const d = backOfficeQuery.data;
+    const d = backOfficeQuery?.data;
     return {
       backOfficeURL: d?.propBackofficeURL?.value ?? "",
       username: d?.propUsername?.value ?? "",
@@ -27,7 +30,7 @@ const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
   }, [backOfficeQuery.data]);
 
   useEffect(() => {
-    if (!backOfficeQuery.isSuccess) return;
+    if (!backOfficeQuery?.isSuccess) return;
     for (const [key, value] of Object.entries(mapped)) {
       setFieldValue(key, value);
     }
@@ -36,12 +39,16 @@ const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
   return (
     <Card className="p-4">
       <CardHeader title={`Channel (${values?.format})`} />
-      <ChannelFields
-        touched={touched}
-        isSubmitting={isSubmitting}
-        backOfficeData={backOfficeQuery}
-        format={values?.format}
-      />
+      {!isBof2ConstantsLoading && !isDispatcherLoading && !isBackOfficeQueryLoading ? (
+        <ChannelFields
+          touched={touched}
+          isSubmitting={isSubmitting}
+          backOfficeData={backOfficeQuery}
+          format={values?.format}
+        />
+      ) : (
+        <>Loading...</>
+      )}
     </Card>
   );
 };

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -27,6 +27,9 @@ const SettingForms = () => {
   const GPSFormat = bof2ConstantsQuery?.data?.propGpsFormat?.value;
   const timestampSource = bof2ConstantsQuery?.data?.propTimeZoneType?.value;
 
+  const isDispatcherLoading = dispatcherQuery?.isFetching;
+  const isBof2ConstantsLoading = bof2ConstantsQuery?.isFetching;
+
   const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants = {
     format: format ?? "JSON",
     enabled: enabled === "true",
@@ -63,9 +66,8 @@ const SettingForms = () => {
   };
 
   const handleSubmit = async (values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants) => {
-    // if (formErrors && Object.entries(formErrors).length > 0) {
-    //   return;
-    // }
+    const validResponse = await validateMutation.mutateAsync(values);
+
     const dispatcherData = {
       format: values.format,
       enabled: values.enabled,
@@ -75,23 +77,24 @@ const SettingForms = () => {
     if (result?.id) {
       qc.invalidateQueries({ queryKey: ["dispatcher"] });
       qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
-      const validResponse = await validateMutation.mutateAsync(values);
+
       if (validResponse?.reason === "OK") {
         await backOfficeMutation.mutateAsync(values);
+
+        if (values.format.toLowerCase() === "bof2") {
+          const bof2ConstantsData: OptionalBOF2Constants = {
+            FFID: values.FFID,
+            SCID: values.SCID,
+            timestampSource: values.timestampSource,
+            GPSFormat: values.GPSFormat,
+          };
+          await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
+        }
       } else {
+        console.log("error");
         return;
       }
     }
-
-    if (values.format.toLowerCase() === "bof2") {
-      const bof2ConstantsData: OptionalBOF2Constants = {
-        FFID: values.FFID,
-        SCID: values.SCID,
-        timestampSource: values.timestampSource,
-        GPSFormat: values.GPSFormat,
-      };
-      await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
-    }
   };
 
   return (
@@ -100,7 +103,12 @@ const SettingForms = () => {
         <Form>
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
             <BearerTypeCard />
-            <ChannelCard touched={touched} isSubmitting={isSubmitting} />
+            <ChannelCard
+              touched={touched}
+              isSubmitting={isSubmitting}
+              isDispatcherLoading={isDispatcherLoading}
+              isBof2ConstantsLoading={isBof2ConstantsLoading}
+            />
           </div>
         </Form>
       )}