Propagate change request constraint id mapper

frontend/src/hooks/api/getters/useChangeRequest/useChangeRequest.ts

@@ -3,38 +3,11 @@ import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler.js';
 import type {
     ChangeRequestType,
-    IChangeRequestAddStrategy,
     IChangeRequestFeature,
-    IChangeRequestUpdateStrategy,
     IFeatureChange,
 } from 'component/changeRequest/changeRequest.types';
 import { useMemo } from 'react';
-import { constraintId } from 'constants/constraintId.js';
+import { addConstraintIdsToFeatureChange } from 'utils/addConstraintIdsToFeatureChange.js';
-import { v4 as uuidv4 } from 'uuid';
-
-const isAddStrategyChange = (
-    change: IFeatureChange,
-): change is IChangeRequestAddStrategy => change.action === 'addStrategy';
-const isUpdateStrategyChange = (
-    change: IFeatureChange,
-): change is IChangeRequestUpdateStrategy => change.action === 'updateStrategy';
-
-const addConstraintIdsToFeatureChange = (change: IFeatureChange) => {
-    if (isAddStrategyChange(change) || isUpdateStrategyChange(change)) {
-        const { constraints, ...rest } = change.payload;
-        return {
-            ...change,
-            payload: {
-                ...rest,
-                constraints: constraints.map((constraint) => ({
-                    ...constraint,
-                    [constraintId]: uuidv4(),
-                })),
-            },
-        } as IFeatureChange;
-    }
-    return change;
-};
 
 export const useChangeRequest = (projectId: string, id: string) => {
     const { data, error, mutate } = useSWR<ChangeRequestType>(
@@ -60,8 +33,15 @@ export const useChangeRequest = (projectId: string, id: string) => {
             );
         }, [JSON.stringify(features)]);
 
+    const mappedData = data
+        ? {
+              ...dataProps,
+              features: featuresWithConstraintIds,
+          }
+        : data;
+
     return {
-        data: { ...dataProps, features: featuresWithConstraintIds },
+        data: mappedData,
         loading: !error && !data,
         refetchChangeRequest: () => mutate(),
         error,

frontend/src/hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests.ts

@@ -1,7 +1,12 @@
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler.js';
-import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types';
+import type {
+    ChangeRequestType,
+    IFeatureChange,
+} from 'component/changeRequest/changeRequest.types';
 import { useEnterpriseSWR } from '../useEnterpriseSWR/useEnterpriseSWR.js';
+import { useMemo } from 'react';
+import { addConstraintIdsToFeatureChange } from 'utils/addConstraintIdsToFeatureChange.js';
 
 const fetcher = (path: string) => {
     return fetch(path)
@@ -16,8 +21,29 @@ export const usePendingChangeRequests = (project: string) => {
         fetcher,
     );
 
+    const mappedData: typeof data = useMemo(
+        () =>
+            data?.map((changeRequest) => {
+                const { features, ...rest } = changeRequest || {};
+                const featuresWithConstraintIds =
+                    features?.map((feature) => {
+                        const changes: IFeatureChange[] = feature.changes.map(
+                            addConstraintIdsToFeatureChange,
+                        );
+
                         return {
-        data,
+                            ...feature,
+                            changes,
+                        };
+                    }) ?? [];
+
+                return { ...rest, features: featuresWithConstraintIds };
+            }),
+        [JSON.stringify(data)],
+    );
+
+    return {
+        mappedData,
         loading: !error && !data,
         refetch: mutate,
         error,

frontend/src/utils/addConstraintIdsToFeatureChange.ts

@@ -0,0 +1,31 @@
+import type {
+    IFeatureChange,
+    IChangeRequestAddStrategy,
+    IChangeRequestUpdateStrategy,
+} from 'component/changeRequest/changeRequest.types';
+import { constraintId } from 'constants/constraintId';
+import { v4 as uuidv4 } from 'uuid';
+
+const isAddStrategyChange = (
+    change: IFeatureChange,
+): change is IChangeRequestAddStrategy => change.action === 'addStrategy';
+const isUpdateStrategyChange = (
+    change: IFeatureChange,
+): change is IChangeRequestUpdateStrategy => change.action === 'updateStrategy';
+
+export const addConstraintIdsToFeatureChange = (change: IFeatureChange) => {
+    if (isAddStrategyChange(change) || isUpdateStrategyChange(change)) {
+        const { constraints, ...rest } = change.payload;
+        return {
+            ...change,
+            payload: {
+                ...rest,
+                constraints: constraints.map((constraint) => ({
+                    ...constraint,
+                    [constraintId]: uuidv4(),
+                })),
+            },
+        } as IFeatureChange;
+    }
+    return change;
+};