feat(web): enable 1 hour app delay using feature flag

web/src/api/getState.ts

@@ -1,5 +1,6 @@
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
+import { useFeatureFlag } from 'features/feature-flags/api';
 import { useAtomValue } from 'jotai';
 import { useParams } from 'react-router-dom';
 import type { GridState, RouteParameters } from 'types';
@@ -12,13 +13,15 @@ import {
   cacheBuster,
   getBasePath,
   getHeaders,
+  getParameters,
   isValidDate,
   QUERY_KEYS,
   TIME_RANGE_TO_BACKEND_PATH,
 } from './helpers';
 
 const getState = async (
   timeRange: TimeRange,
+  is1HourAppDelay: boolean,
   targetDatetime?: string
 ): Promise<GridState> => {
   const shouldQueryHistorical =
@@ -27,9 +30,11 @@ const getState = async (
     isValidHistoricalTimeRange(timeRange);
 
   const path: URL = new URL(
-    `v10/state/${TIME_RANGE_TO_BACKEND_PATH[timeRange]}${
-      shouldQueryHistorical ? `?targetDate=${targetDatetime}` : ''
-    }`,
+    `v10/state/${TIME_RANGE_TO_BACKEND_PATH[timeRange]}${getParameters(
+      shouldQueryHistorical,
+      is1HourAppDelay,
+      targetDatetime
+    )}`,
     getBasePath()
   );
 
@@ -53,15 +58,18 @@ const getState = async (
 const useGetState = (): UseQueryResult<GridState> => {
   const { urlDatetime } = useParams<RouteParameters>();
   const timeRange = useAtomValue(timeRangeAtom);
+  const is1HourAppDelay = useFeatureFlag('1-hour-app-delay');
+  console.log(is1HourAppDelay);
   return useQuery<GridState>({
     queryKey: [
       QUERY_KEYS.STATE,
       {
         aggregate: timeRange,
         targetDatetime: urlDatetime,
+        is1HourAppDelay,
       },
     ],
-    queryFn: () => getState(timeRange, urlDatetime),
+    queryFn: () => getState(timeRange, is1HourAppDelay, urlDatetime),
     staleTime: getStaleTime(timeRange, urlDatetime),
     refetchOnWindowFocus: true,
   });

web/src/api/getZone.ts

@@ -1,5 +1,6 @@
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
+import { useFeatureFlag } from 'features/feature-flags/api';
 import { useAtomValue } from 'jotai';
 import { useParams } from 'react-router-dom';
 import invariant from 'tiny-invariant';
@@ -14,6 +15,7 @@ import {
   cacheBuster,
   getBasePath,
   getHeaders,
+  getParameters,
   isValidDate,
   QUERY_KEYS,
   TIME_RANGE_TO_BACKEND_PATH,
@@ -22,6 +24,7 @@ import {
 const getZone = async (
   timeRange: TimeRange,
   zoneId: string,
+  is1HourAppDelay: boolean,
   targetDatetime?: string
 ): Promise<ZoneDetails> => {
   invariant(zoneId, 'Zone ID is required');
@@ -32,9 +35,11 @@ const getZone = async (
     isValidHistoricalTimeRange(timeRange);
 
   const path: URL = new URL(
-    `v10/details/${TIME_RANGE_TO_BACKEND_PATH[timeRange]}/${zoneId}${
-      shouldQueryHistorical ? `?targetDate=${targetDatetime}` : ''
-    }`,
+    `v10/details/${TIME_RANGE_TO_BACKEND_PATH[timeRange]}/${zoneId}${getParameters(
+      shouldQueryHistorical,
+      is1HourAppDelay,
+      targetDatetime
+    )}`,
     getBasePath()
   );
   if (!targetDatetime) {
@@ -62,20 +67,23 @@ const useGetZone = (): UseQueryResult<ZoneDetails> => {
   const { zoneId, urlDatetime } = useParams<RouteParameters>();
   const timeRange = useAtomValue(timeRangeAtom);
 
+  const is1HourAppDelay = useFeatureFlag('1-hour-app-delay');
+
   return useQuery<ZoneDetails>({
     queryKey: [
       QUERY_KEYS.ZONE,
       {
         zone: zoneId,
         aggregate: timeRange,
         targetDatetime: urlDatetime,
+        is1HourAppDelay,
       },
     ],
     queryFn: async () => {
       if (!zoneId) {
         throw new Error('Zone ID is required');
       }
-      return getZone(timeRange, zoneId, urlDatetime);
+      return getZone(timeRange, zoneId, is1HourAppDelay, urlDatetime);
     },
     staleTime: getStaleTime(timeRange, urlDatetime),
     refetchOnWindowFocus: true,

web/src/api/helpers.ts

@@ -110,3 +110,17 @@ export const TIME_RANGE_TO_BACKEND_PATH: Record<TimeRange, string> = {
   [TimeRange.ALL_MONTHS]: 'monthly_all',
   [TimeRange.ALL_YEARS]: 'yearly',
 } as const;
+
+export const getParameters = (
+  shouldQueryHistorical: boolean | '' | undefined,
+  is1HourAppDelay: boolean,
+  targetDatetime?: string
+) => {
+  if (shouldQueryHistorical) {
+    return `?targetDate=${targetDatetime}`;
+  }
+  if (is1HourAppDelay) {
+    return '?delay=1';
+  }
+  return '';
+};