- addressing feedback

src/features/settings/components/SystemConfig.tsx

@@ -1,11 +1,15 @@
 import { Formik, Form, Field, FieldArray } from "formik";
 import { useSystemSettings } from "../hooks/useSystemSettings";
-import type { SystemSettings } from "../../../types/types";
+import type { NetworkConfig, SystemSettings } from "../../../types/types";
 import { toast } from "sonner";
+import { useGetNetworkConfig } from "../hooks/useGetNetworkConfig";
 
 const SystemConfig = () => {
   const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings();
+  const { networkConfigQuery, networkConfigMutation } = useGetNetworkConfig();
 
+  const isLoading = networkConfigMutation?.isPending || networkConfigMutation?.isPending;
+  const isGettingLoading = systemSettingsQuery?.isLoading || networkConfigQuery?.isLoading;
   const timeZoneOptions = systemSettingsQuery?.data?.propLocalTimeZone?.accepted;
   const timeZoneOpts = timeZoneOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
   const timeSourceOptions = systemSettingsQuery?.data?.propTimeSource?.accepted;
@@ -15,8 +19,11 @@ const SystemConfig = () => {
   const SNTPServer = systemSettingsQuery?.data?.propSNTPServer?.value;
   const SNTPInterval = systemSettingsQuery?.data?.propSNTPIntervalMinutes?.value;
   const timeSource = systemSettingsQuery?.data?.propTimeSource?.value;
-  // const primaryServer = systemSettingsQuery?.data?.propPrimaryDNSServer?.value;
-  // const secondaryServer = systemSettingsQuery?.data?.propSecondaryDNSServer?.value;
+  const primaryServer = networkConfigQuery?.data?.propNameServerPrimary?.value;
+  const secondaryServer = networkConfigQuery?.data?.propNameServerSecondary?.value;
+  const ipAddress = networkConfigQuery?.data?.propHost?.value;
+  const subnetMask = networkConfigQuery?.data?.propNetmask?.value;
+  const gateway = networkConfigQuery?.data?.propGateway?.value;
 
   const initialValues = {
     deviceName: deviceName ?? "",
@@ -25,22 +32,36 @@ const SystemConfig = () => {
     SNTPServer: SNTPServer ?? "",
     SNTPInterval: SNTPInterval ?? 60,
     SNTPIntervalMinutes: SNTPInterval ?? 60,
-    primaryServer: "",
-    secondaryServer: "",
+    primaryServer: primaryServer ?? "",
+    secondaryServer: secondaryServer ?? "",
     timeSource: timeSource ?? "",
+    ipAddress: ipAddress ?? "",
+    subnetMask: subnetMask ?? "",
+    gateway: gateway ?? "",
     customFields: [],
   };
 
-  const handleSubmit = async (values: SystemSettings) => {
+  const handleSubmit = async (values: SystemSettings & NetworkConfig) => {
     const result = await systemSettingsMutation.mutateAsync(values);
+    const networkResult = await networkConfigMutation.mutateAsync({
+      ipAddress: values.ipAddress,
+      subnetMask: values.subnetMask,
+      gateway: values.gateway,
+      primaryServer: values.primaryServer,
+      secondaryServer: values.secondaryServer,
+    });
 
-    if (result.id) {
+    if (result.id && networkResult.id) {
       toast.success("System settings updated successfully");
     } else {
       toast.error("Failed to update system settings");
     }
   };
 
+  if (isGettingLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
       {({ values }) => (
@@ -106,6 +127,36 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="subnetMask">Subnet Mask</label>
+            <Field
+              name="subnetMask"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter subnet mask"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="ipAddress">IP Address</label>
+            <Field
+              name="ipAddress"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter IP address"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="gateway">Gateway</label>
+            <Field
+              name="gateway"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter gateway"
+              autoComplete="off"
+            />
+          </div>
           <div className="flex flex-row justify-between items-center mb-4">
             <label htmlFor="primaryServer">Primary DNS Server</label>
             <Field
@@ -133,7 +184,7 @@ const SystemConfig = () => {
             <FieldArray name="customFields">
               {(arrayHelpers) => (
                 <>
-                  {values.customFields.map((field, index) => (
+                  {values.customFields.map((_, index) => (
                     <div key={index} className="flex flex-row justify-between items-center mb-4">
                       <label htmlFor={`customFields.${index}`} className="mr-2">
                         Custom Field {index + 1}
@@ -167,8 +218,12 @@ const SystemConfig = () => {
               )}
             </FieldArray>
           </div>
-          <button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
-            Save Settings
+          <button
+            type="submit"
+            className="px-4 py-2 bg-green-700 text-white rounded-lg hover:bg-green-800 hover:cursor-pointer"
+            disabled={isLoading}
+          >
+            {isLoading ? "Saving..." : "Save Settings"}
           </button>
         </Form>
       )}