From c2006a5536d680afed1d228be51bf7036ab9636e Mon Sep 17 00:00:00 2001
From: hatim dinia <diniahatim@gmail.com>
Date: Thu, 8 Feb 2024 15:18:10 +0100
Subject: [PATCH] fix(ui-map): reload map data on study revisit

---
 webapp/src/redux/ducks/studySyntheses.ts | 10 ++++
 webapp/src/redux/hooks/useStudyMaps.ts   | 62 +++++++++++++++---------
 2 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/webapp/src/redux/ducks/studySyntheses.ts b/webapp/src/redux/ducks/studySyntheses.ts
index a7ae6cdc52..0a9a40f88c 100644
--- a/webapp/src/redux/ducks/studySyntheses.ts
+++ b/webapp/src/redux/ducks/studySyntheses.ts
@@ -11,6 +11,7 @@ import {
   LaunchJobDTO,
   Link,
   LinkElement,
+  StudyMetadata,
   WSMessage,
 } from "../../common/types";
 import * as api from "../../services/api/study";
@@ -33,12 +34,14 @@ export interface StudySynthesesState
   currentArea: string;
   currentLink: string;
   currentBindingConst: string;
+  prevStudyId: StudyMetadata["id"] | null;
 }
 
 const initialState = studySynthesesAdapter.getInitialState({
   currentArea: "",
   currentLink: "",
   currentBindingConst: "",
+  prevStudyId: null,
 }) as StudySynthesesState;
 
 const n = makeActionName("studySyntheses");
@@ -78,6 +81,10 @@ export const deleteStudyLink = createAction<{
   area2: LinkElement["area2"];
 }>(n("DELETE_STUDY_LINK"));
 
+export const setPrevStudyId = createAction<StudyMetadata["id"] | null>(
+  n("SET_PREV_STUDY_ID"),
+);
+
 ////////////////////////////////////////////////////////////////
 // Thunks
 ////////////////////////////////////////////////////////////////
@@ -196,5 +203,8 @@ export default createReducer(initialState, (builder) => {
     })
     .addCase(setCurrentBindingConst, (draftState, action) => {
       draftState.currentBindingConst = action.payload;
+    })
+    .addCase(setPrevStudyId, (draftState, action) => {
+      draftState.prevStudyId = action.payload;
     });
 });
diff --git a/webapp/src/redux/hooks/useStudyMaps.ts b/webapp/src/redux/hooks/useStudyMaps.ts
index 49652627ad..6605c6c89d 100644
--- a/webapp/src/redux/hooks/useStudyMaps.ts
+++ b/webapp/src/redux/hooks/useStudyMaps.ts
@@ -12,50 +12,66 @@ import {
 import useStudySynthesis from "./useStudySynthesis";
 import { Response } from "../../components/common/utils/UsePromiseCond";
 import usePromise, { PromiseStatus } from "../../hooks/usePromise";
+import { setPrevStudyId } from "../ducks/studySyntheses";
 
 interface Props<T> {
   studyId: StudyMetadata["id"];
-  selector?: (state: AppState, studyId: StudyMetadata["id"]) => T;
+  selector: (state: AppState, studyId: StudyMetadata["id"]) => T;
 }
 
-export default function useStudyMaps<T>(props: Props<T>): Response<T> {
-  const { studyId, selector } = props;
-  const synthesisRes = useStudySynthesis({ studyId });
-  const isMapsExist = useAppSelector((state) => !!getStudyMap(state, studyId));
-  const data = useAppSelector((state) =>
-    isMapsExist && selector ? selector(state, studyId) : undefined,
-  );
-  const dispatch = useAppDispatch();
+export default function useStudyMaps<T>({
+  studyId,
+  selector,
+}: Props<T>): Response<T> {
   const [status, setStatus] = useState(PromiseStatus.Idle);
   const [error, setError] = useState<Response["error"]>();
+  const dispatch = useAppDispatch();
+  const synthesis = useStudySynthesis({ studyId });
+  const isMapsExists = useAppSelector((state) => !!getStudyMap(state, studyId));
+  const data = useAppSelector((state) => selector(state, studyId) || undefined);
+  const prevStudyId = useAppSelector(
+    (state) => state.studySyntheses.prevStudyId,
+  );
 
   usePromise(async () => {
-    if (synthesisRes.status === PromiseStatus.Rejected) {
-      setError(synthesisRes.error);
+    if (synthesis.status === PromiseStatus.Rejected) {
+      setError(synthesis.error);
       setStatus(PromiseStatus.Rejected);
       return;
     }
 
-    if (synthesisRes.status !== PromiseStatus.Resolved) {
+    if (synthesis.status !== PromiseStatus.Resolved) {
       setStatus(PromiseStatus.Pending);
       return;
     }
 
-    if (!isMapsExist) {
-      setStatus(PromiseStatus.Pending);
+    setStatus(PromiseStatus.Pending);
+
+    try {
+      /*
+       * Conditionally fetch study map data to address two scenarios:
+       * 1. The map data does not exist for the current study (isMapsExist is false).
+       * 2. The user has navigated to a different study than previously viewed (prevStudyId !== studyId).
+       *
+       * Particularly critical for accuracy when users return to a previously viewed study.
+       */
+      if (!isMapsExists || prevStudyId !== studyId) {
+        await Promise.all([
+          dispatch(fetchStudyMapLayers(studyId)).unwrap(),
+          dispatch(fetchStudyMapDistricts(studyId)).unwrap(),
+          dispatch(createStudyMap(studyId)).unwrap(),
+        ]);
 
-      try {
-        await dispatch(fetchStudyMapLayers(studyId)).unwrap();
-        await dispatch(fetchStudyMapDistricts(studyId)).unwrap();
-        await dispatch(createStudyMap(studyId)).unwrap();
-      } catch (e) {
-        setError(e as Error);
-        setStatus(PromiseStatus.Rejected);
+        // Updates the previous study ID to track navigation between studies.
+        dispatch(setPrevStudyId(studyId));
       }
-    } else {
+
       setStatus(PromiseStatus.Resolved);
+    } catch (err) {
+      setError(err as Error);
+      setStatus(PromiseStatus.Rejected);
     }
-  }, [isMapsExist, studyId, synthesisRes.status]);
+  }, [isMapsExists, studyId, synthesis.status]);
 
   return { data, status, error };
 }