From 0cc4a14344b4ba87f9e8155a8fd9546c3d2bd307 Mon Sep 17 00:00:00 2001
From: Jijeong Lee <jijeong0114@gmail.com>
Date: Thu, 25 Apr 2024 17:15:05 -0700
Subject: [PATCH] update TimelineScrollList only when the active tab is 'label'

Leaflet map encounters an error when prerendered, so we need to render the TimelineScrollList component when the active tab is 'label'
'shouldUpdateTimeline' state is used to determine whether to render the TimelineScrollList or not
---
 www/js/Main.tsx                       |  8 +++++++-
 www/js/TimelineContext.ts             |  7 +++++++
 www/js/diary/list/LabelListScreen.tsx | 11 ++++++++---
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/www/js/Main.tsx b/www/js/Main.tsx
index 6361e6828..f38b80018 100644
--- a/www/js/Main.tsx
+++ b/www/js/Main.tsx
@@ -1,7 +1,7 @@
 /* Once onboarding is done, this is the main app content.
   Includes the bottom navigation bar and each of the tabs. */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useContext, useMemo, useState } from 'react';
 import { BottomNavigation, useTheme } from 'react-native-paper';
 import { AppContext } from './App';
@@ -55,6 +55,12 @@ const Main = () => {
     return showMetrics ? defaultRoutes(t) : defaultRoutes(t).filter((r) => r.key != 'metrics');
   }, [appConfig, t]);
 
+  useEffect(() => {
+    const { setShouldUpdateTimeline } = timelineContext;
+    // update TimelineScrollList component only when the active tab is 'label' to fix leaflet map issue
+    setShouldUpdateTimeline(!index);
+  }, [index]);
+
   return (
     <TimelineContext.Provider value={timelineContext}>
       <BottomNavigation
diff --git a/www/js/TimelineContext.ts b/www/js/TimelineContext.ts
index bbef214bd..347403e7d 100644
--- a/www/js/TimelineContext.ts
+++ b/www/js/TimelineContext.ts
@@ -50,6 +50,8 @@ type ContextProps = {
   loadMoreDays: (when: 'past' | 'future', nDays: number) => void;
   loadSpecificWeek: (d: string) => void;
   refreshTimeline: () => void;
+  shouldUpdateTimeline: Boolean;
+  setShouldUpdateTimeline: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const useTimelineContext = (): ContextProps => {
@@ -69,6 +71,9 @@ export const useTimelineContext = (): ContextProps => {
   const [timelineLabelMap, setTimelineLabelMap] = useState<TimelineLabelMap | null>(null);
   const [timelineNotesMap, setTimelineNotesMap] = useState<TimelineNotesMap | null>(null);
   const [refreshTime, setRefreshTime] = useState<Date | null>(null);
+  // Leaflet map encounters an error when prerendered, so we need to render the TimelineScrollList component when the active tab is 'label'
+  // 'shouldUpdateTimeline' gets updated based on the current tab index, and we can use it to determine whether to render the timeline or not
+  const [shouldUpdateTimeline, setShouldUpdateTimeline] = useState(true);
 
   // initialization, once the appConfig is loaded
   useEffect(() => {
@@ -356,6 +361,8 @@ export const useTimelineContext = (): ContextProps => {
     notesFor,
     confirmedModeFor,
     addUserInputToEntry,
+    shouldUpdateTimeline,
+    setShouldUpdateTimeline,
   };
 };
 
diff --git a/www/js/diary/list/LabelListScreen.tsx b/www/js/diary/list/LabelListScreen.tsx
index 54df33500..af27bfe00 100644
--- a/www/js/diary/list/LabelListScreen.tsx
+++ b/www/js/diary/list/LabelListScreen.tsx
@@ -12,8 +12,13 @@ import { displayErrorMsg } from '../../plugin/logger';
 
 const LabelListScreen = () => {
   const { filterInputs, setFilterInputs, displayedEntries } = useContext(LabelTabContext);
-  const { timelineMap, loadSpecificWeek, timelineIsLoading, refreshTimeline } =
-    useContext(TimelineContext);
+  const {
+    timelineMap,
+    loadSpecificWeek,
+    timelineIsLoading,
+    refreshTimeline,
+    shouldUpdateTimeline,
+  } = useContext(TimelineContext);
   const { colors } = useTheme();
 
   return (
@@ -42,7 +47,7 @@ const LabelListScreen = () => {
         />
       </NavBar>
       <View style={{ flex: 1, backgroundColor: colors.background }}>
-        <TimelineScrollList listEntries={displayedEntries} />
+        {shouldUpdateTimeline && <TimelineScrollList listEntries={displayedEntries} />}
       </View>
     </>
   );