From c52c6c40a8b2ed4c43fee5be8b2fd062b90ae815 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Thu, 6 Oct 2022 14:39:56 +0200
Subject: [PATCH] fix: equality check on feature strategy (#2145)

fix: add ability to format objects to perform equality checks on
---
 .../FeatureStrategyCreate.tsx                 |  5 ++--
 .../FeatureStrategyEdit.tsx                   |  4 +++-
 .../FeatureStrategy/featureStrategy.utils.ts  |  8 +++++++
 frontend/src/hooks/useCollaborateData.tsx     | 23 +++++++++++++++----
 4 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/component/feature/FeatureStrategy/featureStrategy.utils.ts

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
index 628de7737c0..562a8ad6b94 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
@@ -20,13 +20,13 @@ import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/perm
 import { ISegment } from 'interfaces/segment';
 import { useSegmentsApi } from 'hooks/api/actions/useSegmentsApi/useSegmentsApi';
 import { formatStrategyName } from 'utils/strategyNames';
-import { useFeatureImmutable } from 'hooks/api/getters/useFeature/useFeatureImmutable';
 import { useFormErrors } from 'hooks/useFormErrors';
 import { createFeatureStrategy } from 'utils/createFeatureStrategy';
 import { useStrategy } from 'hooks/api/getters/useStrategy/useStrategy';
 import { useCollaborateData } from 'hooks/useCollaborateData';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { IFeatureToggle } from 'interfaces/featureToggle';
+import { comparisonModerator } from '../featureStrategy.utils';
 
 export const FeatureStrategyCreate = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -60,7 +60,8 @@ export const FeatureStrategyCreate = () => {
             feature,
             {
                 afterSubmitAction: refetchFeature,
-            }
+            },
+            comparisonModerator
         );
 
     useEffect(() => {
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
index 581ea6b584d..0ae2eec3739 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
@@ -24,6 +24,7 @@ import { sortStrategyParameters } from 'utils/sortStrategyParameters';
 import { useCollaborateData } from 'hooks/useCollaborateData';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { IFeatureToggle } from 'interfaces/featureToggle';
+import { comparisonModerator } from '../featureStrategy.utils';
 
 export const FeatureStrategyEdit = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -58,7 +59,8 @@ export const FeatureStrategyEdit = () => {
             feature,
             {
                 afterSubmitAction: refetchFeature,
-            }
+            },
+            comparisonModerator
         );
 
     useEffect(() => {
diff --git a/frontend/src/component/feature/FeatureStrategy/featureStrategy.utils.ts b/frontend/src/component/feature/FeatureStrategy/featureStrategy.utils.ts
new file mode 100644
index 00000000000..2f731af41b3
--- /dev/null
+++ b/frontend/src/component/feature/FeatureStrategy/featureStrategy.utils.ts
@@ -0,0 +1,8 @@
+import { IFeatureToggle } from 'interfaces/featureToggle';
+
+export const comparisonModerator = (data: IFeatureToggle) => {
+    const tempData = { ...data };
+    delete tempData.lastSeenAt;
+
+    return tempData;
+};
diff --git a/frontend/src/hooks/useCollaborateData.tsx b/frontend/src/hooks/useCollaborateData.tsx
index f69598ef113..0cfa0c435e1 100644
--- a/frontend/src/hooks/useCollaborateData.tsx
+++ b/frontend/src/hooks/useCollaborateData.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { SWRConfiguration } from 'swr';
 import { dequal } from 'dequal';
 import { StaleDataNotification } from 'component/common/StaleDataNotification/StaleDataNotification';
+import { IFeatureToggle } from 'interfaces/featureToggle';
 
 interface IFormatUnleashGetterOutput<Type> {
     data: Type;
@@ -42,7 +43,8 @@ interface IStaleNotificationOptions {
 export const useCollaborateData = <Type,>(
     getterOptions: IGetterOptions,
     initialData: Type,
-    notificationOptions: IStaleNotificationOptions
+    notificationOptions: IStaleNotificationOptions,
+    comparisonModeratorFunc: (data: Type) => any
 ): ICollaborateDataOutput<Type> => {
     const { data, refetch } = formatUnleashGetter<Type>(getterOptions);
     const [cache, setCache] = useState<Type | null>(initialData || null);
@@ -53,6 +55,17 @@ export const useCollaborateData = <Type,>(
         setCache(data);
     };
 
+    const formatDequalData = (data: Type | null) => {
+        if (!data) return data;
+        if (
+            comparisonModeratorFunc &&
+            typeof comparisonModeratorFunc === 'function'
+        ) {
+            return comparisonModeratorFunc(data);
+        }
+        return data;
+    };
+
     useEffect(() => {
         if (cache === null) {
             setCache(initialData);
@@ -60,7 +73,9 @@ export const useCollaborateData = <Type,>(
     }, [initialData]);
 
     useEffect(() => {
-        const equal = dequal(data, cache);
+        if (!cache || !data) return;
+
+        const equal = dequal(formatDequalData(cache), formatDequalData(data));
 
         if (!equal) {
             setDataModified(true);
@@ -72,8 +87,8 @@ export const useCollaborateData = <Type,>(
         refetch,
         staleDataNotification: (
             <StaleDataNotification
-                cache={cache}
-                data={data}
+                cache={formatDequalData(cache)}
+                data={formatDequalData(data)}
                 refresh={() => forceRefreshCache(data)}
                 show={dataModified}
                 afterSubmitAction={notificationOptions.afterSubmitAction}