get new survey data every 24 hours

purpose : prevent too much API call

www/js/Main.tsx

@@ -58,9 +58,18 @@ const Main = () => {
   }, [appConfig, t]);
 
   useEffect(() => {
-    const { setShouldUpdateTimeline } = timelineContext;
+    const { setShouldUpdateTimeline, lastUpdateMetricDateTime, setLastUpdateMetricDateTime } = timelineContext;
     // update TimelineScrollList component only when the active tab is 'label' to fix leaflet map issue
     setShouldUpdateTimeline(!index);
+
+    // update it when the last updated data is more than 24 hours ago to get new survey data from server
+    // purpose : to prevent too much API call 
+    if(index === 1) {
+      var oneDayAgo = new Date().getTime() - (24 * 60 * 60 * 1000)
+      if (!lastUpdateMetricDateTime || lastUpdateMetricDateTime < oneDayAgo) {
+        setLastUpdateMetricDateTime(new Date().getTime());
+      }
+    } 
   }, [index]);
 
   return (

www/js/metrics/MetricsTab.tsx

@@ -14,7 +14,7 @@ import Carousel from '../components/Carousel';
 import DailyActiveMinutesCard from './DailyActiveMinutesCard';
 import CarbonTextCard from './CarbonTextCard';
 import ActiveMinutesTableCard from './ActiveMinutesTableCard';
-import { getAggregateData, getMetrics } from '../services/commHelper';
+import { getAggregateData, getMetrics, getSurveyMetric } from '../services/commHelper';
 import { displayErrorMsg, logDebug, logWarn } from '../plugin/logger';
 import useAppConfig from '../useAppConfig';
 import { ServerConnConfig } from '../types/appConfigTypes';
@@ -31,6 +31,26 @@ const DEFAULT_SECTIONS_TO_SHOW = ['footprint', 'active_travel', 'summary'] as co
 export const METRIC_LIST = ['duration', 'mean_speed', 'count', 'distance'] as const;
 const DEFAULT_SUMMARY_LIST = ['distance', 'count', 'duration'] as const;
 
+export type SurveyObject = {
+  'answered': number,
+  'unanswered': number,
+  'mismatched': number,
+}
+
+export type SurveyMetric = {
+  'me' : {
+    'overview' : SurveyObject,
+    'rank' : number,
+    'details': {
+      [key: string]: SurveyObject,
+    }  
+  },
+  'others' : {
+    'overview' : SurveyObject,
+    'leaderboard': SurveyObject[],
+  }
+}
+
 async function fetchMetricsFromServer(
   type: 'user' | 'aggregate',
   dateRange: [string, string],
@@ -63,9 +83,11 @@ const MetricsTab = () => {
     timelineIsLoading,
     refreshTimeline,
     loadMoreDays,
+    lastUpdateMetricDateTime
   } = useContext(TimelineContext);
 
   const [aggMetrics, setAggMetrics] = useState<MetricsData | undefined>(undefined);
+  const [surveyMetric, setSurveyMetric] = useState<null | SurveyMetric>(null);
 
   // user metrics are computed on the phone from the timeline data
   const userMetrics = useMemo(() => {
@@ -150,6 +172,18 @@ const MetricsTab = () => {
   const { width: windowWidth } = useWindowDimensions();
   const cardWidth = windowWidth * 0.88;
 
+  useEffect(() => {
+    async function getSurveyMetricData() {
+      const res = await getSurveyMetric();
+      setSurveyMetric(res as SurveyMetric);
+    }
+
+    // 'lastUpdateMetricDate' is used to get new survey data when the last data was 24 hours ago
+    if(lastUpdateMetricDateTime && sectionsToShow.includes('engagement')) {
+      getSurveyMetricData();
+    }
+  }, [lastUpdateMetricDateTime])
+
   return (
     <>
       <NavBar isLoading={Boolean(timelineIsLoading)}>
@@ -215,10 +249,10 @@ const MetricsTab = () => {
               unitFormatFn={getFormattedSpeed} /> */}
           </Carousel>
         )}
-        {!sectionsToShow.includes('engagement') && (
+        {surveyMetric && (
           <Carousel cardWidth={cardWidth} cardMargin={cardMargin}>
-            <SurveyLeaderboardCard />
-            <SurveyTripCategoriesCard />
+            <SurveyLeaderboardCard surveyMetric={surveyMetric} />
+            <SurveyTripCategoriesCard surveyTripCategoryMetric={surveyMetric.me?.details} />
           </Carousel>
         )}
       </ScrollView>