Add hasDifference logic for localUnitView component empty message

Author: shreeyash07

app/src/utils/localUnits.ts

@@ -0,0 +1,89 @@
+import {
+    isNotDefined,
+    isObject,
+} from '@togglecorp/fujs';
+import { removeNull } from '@togglecorp/toggle-form';
+
+import { type PartialLocalUnits } from '#views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/schema';
+
+import { type GoApiResponse } from './restRequest';
+
+type LocalUnitResponse = NonNullable<GoApiResponse<'/api/v2/local-units/{id}/'>>;
+
+export function getFormFields(value: LocalUnitResponse | PartialLocalUnits) {
+    const {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        created_at,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        created_by_details,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        modified_at,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        modified_by,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        modified_by_details,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        is_locked,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        validated,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        version_id,
+        health,
+        ...formValues
+        // Note: the cast is safe as we're only trying to
+        // remove fields if they exist
+    } = removeNull(value) as LocalUnitResponse;
+
+    const {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        modified_by_details: healthModifiedByDetails,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        modified_at: healthModifiedAt,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        modified_by: healthModifiedby,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        created_at: healthCreatedAt,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        created_by_details: healthCreatedByDetails,
+        ...formHealthValues
+    } = health ?? {};
+
+    return { ...formValues, health: { ...formHealthValues } };
+}
+
+// FIXME: this should be gracefully handled
+function isObjectWithStringKey(obj: unknown): obj is Record<string, unknown> {
+    return isObject(obj);
+}
+
+export default function hasDifferences(newValue: unknown, oldValue: unknown): boolean {
+    if (isNotDefined(newValue) && isNotDefined(oldValue)) {
+        return false;
+    }
+
+    // FIXME: we might need to also consider the order for array
+    if (Array.isArray(newValue) && Array.isArray(oldValue)) {
+        if (newValue.length !== oldValue.length) {
+            return true;
+        }
+
+        return newValue.some(
+            (_, i) => hasDifferences(newValue[i], oldValue[i]),
+        );
+    }
+
+    if (isObjectWithStringKey(newValue) && isObjectWithStringKey(oldValue)) {
+        const newValueKeys = Object.keys(removeNull(newValue));
+        const oldValueKeys = Object.keys(removeNull(oldValue));
+
+        if (newValueKeys.length !== oldValueKeys.length) {
+            return true;
+        }
+
+        return newValueKeys.some(
+            (key) => hasDifferences(newValue[key], oldValue[key]),
+        );
+    }
+
+    return newValue !== oldValue;
+}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/i18n.json

@@ -86,6 +86,7 @@
         "localUnitViewConfirmChangesContentQuestion": "Are you sure you want to have these changes in this local unit?",
         "localUnitViewNewLocalUnitDescription": "New local unit",
         "localUnitViewLatitude": "Latitude",
-        "localUnitViewLongitude": "Longitude"
+        "localUnitViewLongitude": "Longitude",
+        "localUnitViewNoChanges": "No changes found"
     }
 }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/index.tsx

@@ -29,6 +29,8 @@ import {
 } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
 
 import i18n from './i18n.json';
+import { useMemo } from 'react';
+import hasDifferences, { getFormFields } from '#utils/localUnits';
 
 type VisibilityOptions = NonNullable<GoApiResponse<'/api/v2/global-enums/'>['api_visibility_choices']>[number]
 type LocalUnitResponse = NonNullable<GoApiResponse<'/api/v2/local-units/{id}/'>>;
@@ -68,7 +70,6 @@ function LocalUnitView(props: Props) {
     const {
         response: localUnitPreviousResponse,
         pending: localUnitPreviousResponsePending,
-        // error: localUnitPreviousResponseError,
     } = useRequest({
         skip: isDefined(locallyChangedValue) || isNotDefined(localUnitId),
         url: '/api/v2/local-units/{id}/latest-change-request/',
@@ -82,14 +83,24 @@ function LocalUnitView(props: Props) {
         ? localUnitResponse
         : (localUnitPreviousResponse?.previous_data_details as unknown as LocalUnitResponse);
 
-    // FIXME: Handle case when there is no change.
-    // We need to display message to the user
+    const hasDifference = useMemo(() => {
+        if (!newValue || !oldValue) {
+            return false;
+        }
+
+        const newFormFields = getFormFields(newValue);
+        const oldFormFields = getFormFields(oldValue);
+
+        return hasDifferences(newFormFields, oldFormFields);
+    }, [newValue, oldValue]);
 
     return (
         <Container
             contentViewType="vertical"
             pending={localUnitResponsePending || localUnitPreviousResponsePending}
             errored={!!localUnitResponseError}
+            empty={!hasDifference}
+            emptyMessage={strings.localUnitViewNoChanges}
         >
             <DiffWrapper
                 showOnlyDiff

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitViewModal/index.tsx

@@ -5,6 +5,7 @@ import { type PartialLocalUnits } from '../LocalUnitsFormModal/LocalUnitsForm/sc
 import LocalUnitView from '../LocalUnitView';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 interface Props {
     footerActions: React.ReactNode;
@@ -30,6 +31,7 @@ function LocalUnitViewModal(props: Props) {
             withHeaderBorder
             onClose={onClose}
             footerActions={footerActions}
+            childrenContainerClassName={styles.localUnitViewChildrenContainer}
         >
             <LocalUnitView
                 localUnitId={localUnitId}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitViewModal/styles.module.css

@@ -0,0 +1,3 @@
+.local-unit-view-children-container {
+    max-height: 36rem;
+}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx

@@ -55,6 +55,7 @@ import useAlert from '#hooks/useAlert';
 import { getFirstTruthyString } from '#utils/common';
 import { VISIBILITY_PUBLIC } from '#utils/constants';
 import { getUserName } from '#utils/domain/user';
+import hasDifferences, { getFormFields } from '#utils/localUnits';
 import { type CountryOutletContext } from '#utils/outletContext';
 import {
     type GoApiResponse,
@@ -434,16 +435,6 @@ function LocalUnitsForm(props: Props) {
     const healthFormError = getErrorObject(error?.health);
     const revertChangesFormError = getErrorObject(revertChangesError);
 
-    const submitButton = readOnly ? null : (
-        <Button
-            name={undefined}
-            onClick={handleFormSubmit}
-            disabled={addLocalUnitsPending || updateLocalUnitsPending}
-        >
-            {strings.submitButtonLabel}
-        </Button>
-    );
-
     const previousData = (
         localUnitPreviousResponse?.previous_data_details as unknown as LocalUnitResponse
     );
@@ -455,8 +446,34 @@ function LocalUnitsForm(props: Props) {
         }
         return false;
     }, [previousData]);
+
     const showChanges = !isNewLocalUnit && !!localUnitDetailsResponse?.is_locked;
 
+    const hasDifference = useMemo(() => {
+        if (!value || !previousData) {
+            return false;
+        }
+
+        const newFormFields = getFormFields(value);
+        const oldFormFields = getFormFields(previousData);
+
+        return hasDifferences(newFormFields, oldFormFields);
+    }, [value, previousData]);
+
+    const submitButton = readOnly ? null : (
+        <Button
+            name={undefined}
+            onClick={handleFormSubmit}
+            disabled={
+                !hasDifference
+                    || addLocalUnitsPending
+                    || updateLocalUnitsPending
+            }
+        >
+            {strings.submitButtonLabel}
+        </Button>
+    );
+
     return (
         <div className={styles.localUnitsForm}>
             {isDefined(localUnitDetailsResponse)