From 8f67585430bd9c83698d1767e07a9065c99289e8 Mon Sep 17 00:00:00 2001
From: wayangalihpratama <wgprtm@gmail.com>
Date: Thu, 4 Jan 2024 18:34:03 +0800
Subject: [PATCH] [#192] Check updated payload value for segments

---
 .../src/pages/cases/components/CaseProfile.js | 25 +++---------
 .../cases/components/IncomeDriverDataEntry.js | 39 ++++++++++++++++++-
 frontend/src/pages/cases/components/index.js  |  9 +++++
 3 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/cases/components/CaseProfile.js b/frontend/src/pages/cases/components/CaseProfile.js
index f57e9e5e..1f94fb4a 100644
--- a/frontend/src/pages/cases/components/CaseProfile.js
+++ b/frontend/src/pages/cases/components/CaseProfile.js
@@ -30,6 +30,7 @@ import {
   selectProps,
   yesNoOptions,
   DebounceSelect,
+  removeUndefinedObjectValue,
 } from "./";
 import { api } from "../../../lib";
 import { UIState, UserState } from "../../../store";
@@ -457,27 +458,11 @@ const CaseProfile = ({
       tags: values.tags || null,
     };
 
-    // check current value with update value
-    const filteredCurrentCaseProfile = Object.entries(
-      currentCaseProfile
-    ).reduce((acc, [key, value]) => {
-      if (typeof value !== "undefined") {
-        acc[key] = value;
-      }
-      return acc;
-    }, {});
-    const filteredValues = Object.entries(values).reduce(
-      (acc, [key, value]) => {
-        if (typeof value !== "undefined") {
-          acc[key] = value;
-        }
-        return acc;
-      },
-      {}
-    );
+    // detect is payload updated
+    const filteredCurrentCaseProfile =
+      removeUndefinedObjectValue(currentCaseProfile);
+    const filteredValues = removeUndefinedObjectValue(values);
     const isUpdated = !isEqual(filteredCurrentCaseProfile, filteredValues);
-    // console.log(filteredCurrentCaseProfile, "FormData");
-    // console.log(filteredValues, "payload");
     console.info(isUpdated, "UPDATED");
 
     const paramCaseId = caseId ? caseId : currentCaseId;
diff --git a/frontend/src/pages/cases/components/IncomeDriverDataEntry.js b/frontend/src/pages/cases/components/IncomeDriverDataEntry.js
index 2ef1669b..477b9234 100644
--- a/frontend/src/pages/cases/components/IncomeDriverDataEntry.js
+++ b/frontend/src/pages/cases/components/IncomeDriverDataEntry.js
@@ -1,9 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { Row, Col, Tabs, message } from "antd";
 import { PlusCircleFilled } from "@ant-design/icons";
-import { DataFields, generateSegmentPayloads } from "./";
+import {
+  DataFields,
+  generateSegmentPayloads,
+  removeUndefinedObjectValue,
+} from "./";
 import { api } from "../../../lib";
-import { orderBy } from "lodash";
+import { orderBy, isEqual } from "lodash";
 
 const IncomeDriverDataEntry = ({
   commodityList,
@@ -24,6 +28,7 @@ const IncomeDriverDataEntry = ({
   const [formValues, setFormValues] = useState([]);
   const [messageApi, contextHolder] = message.useMessage();
   const [isSaving, setIsSaving] = useState(false);
+  const [currentValues, setCurrentValues] = useState([]);
 
   useEffect(() => {
     const formValeusWithTotalCurrentIncomeAnswer = formValues.map(
@@ -55,6 +60,28 @@ const IncomeDriverDataEntry = ({
     const apiCalls = [];
     const postFormValues = formValues.filter((fv) => !fv.currentSegmentId);
     const putFormValues = formValues.filter((fv) => fv.currentSegmentId);
+
+    // detect is payload updated
+    const isUpdated = currentValues
+      .map((cv) => {
+        cv = {
+          ...cv,
+          answers: removeUndefinedObjectValue(cv.answers),
+        };
+        let findPayload = formValues.find((fv) => fv.key === cv.key);
+        findPayload = {
+          ...findPayload,
+          answers: removeUndefinedObjectValue(findPayload.answers),
+        };
+        const equal = isEqual(
+          removeUndefinedObjectValue(cv),
+          removeUndefinedObjectValue(findPayload)
+        );
+        return !equal;
+      })
+      .filter((x) => x);
+    console.info(isUpdated, "UPDATED");
+
     if (postFormValues.length) {
       const postPayloads = generateSegmentPayloads(
         postFormValues,
@@ -104,6 +131,7 @@ const IncomeDriverDataEntry = ({
           };
         });
         setFormValues(transformFormValues);
+        setCurrentValues(transformFormValues);
         messageApi.open({
           type: "success",
           content: "Segments saved successfully.",
@@ -184,6 +212,7 @@ const IncomeDriverDataEntry = ({
           }
           setItems(itemsTmp);
           setFormValues(formValuesTmp);
+          setCurrentValues(formValuesTmp);
         })
         .catch(() => {
           // default items if no segments in database
@@ -203,6 +232,12 @@ const IncomeDriverDataEntry = ({
               answers: {},
             },
           ]);
+          setCurrentValues({
+            key: "1",
+            label: "Segment 1",
+            currentSegmentId: null,
+            answers: {},
+          });
         });
     });
   }, [commodityList, setQuestionGroups, currentCaseId, enableEditCase]);
diff --git a/frontend/src/pages/cases/components/index.js b/frontend/src/pages/cases/components/index.js
index 71cd13f2..45783ffb 100644
--- a/frontend/src/pages/cases/components/index.js
+++ b/frontend/src/pages/cases/components/index.js
@@ -192,6 +192,15 @@ export const yAxisFormula = {
   "#9002": "( #9001 + ( ( #5 * #2 ) + ( #26 * #3 * #2 ) ) ) - ( #2 * #4 * #3 )", // diversified
 };
 
+export const removeUndefinedObjectValue = (obj) => {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (typeof value !== "undefined") {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+};
+
 export { default as AreaUnitFields } from "./AreaUnitFields";
 export { default as SideMenu } from "./SideMenu";
 export { default as CaseProfile } from "./CaseProfile";