Merge pull request #176 from TogetherCrew/fix/fix-date-period

fix data showing for first day on metrics graph

src/components/pages/pageIndex/HeatmapChart.tsx

@@ -15,6 +15,7 @@ import useAppStore from '../../../store/useStore';
 import { FiCalendar } from 'react-icons/fi';
 import { communityActiveDates } from '../../../lib/data/dateRangeValues';
 import * as Sentry from '@sentry/nextjs';
+import { transformToMidnightUTC } from '../../../helpers/momentHelper';
 
 if (typeof Highcharts === 'object') {
   HighchartsHeatmap(Highcharts);
@@ -210,7 +211,7 @@ const HeatmapChart = () => {
   const [user, setUser] = useState<IUser | null>(null);
   const [activeDateRange, setActiveDateRange] = useState(1);
   const [dateRange, setDateRange] = useState<
-    [moment.Moment | null, moment.Moment | null]
+    [string | moment.Moment | null, string | moment.Moment | null]
   >([null, null]);
   const [selectedZone, setSelectedZone] = useState(moment.tz.guess());
   const [channels, setChannels] = useState<string[]>([]);
@@ -247,7 +248,10 @@ const HeatmapChart = () => {
         const defaultEndDate = moment().subtract(1, 'day');
         const defaultStartDate = moment(defaultEndDate).subtract(7, 'days');
 
-        setDateRange([defaultStartDate, defaultEndDate]);
+        setDateRange([
+          transformToMidnightUTC(defaultStartDate).toString(),
+          transformToMidnightUTC(defaultEndDate).toString(),
+        ]);
 
         const channelIds = channelsList
           .flatMap((channel) => channel.subChannels || []) // Flatten the subChannels arrays
@@ -288,8 +292,8 @@ const HeatmapChart = () => {
 
   const fetchHeatmap = async (
     guildId: string,
-    startDate: moment.Moment | null,
-    endDate: moment.Moment | null,
+    startDate: moment.Moment | string | null,
+    endDate: moment.Moment | string | null,
     timezone: string,
     channelIds: string[]
   ) => {
@@ -450,7 +454,10 @@ const HeatmapChart = () => {
     }
 
     if (startDate && endDate) {
-      setDateRange([startDate, endDate]);
+      setDateRange([
+        transformToMidnightUTC(startDate).toString(),
+        transformToMidnightUTC(endDate).toString(),
+      ]);
     }
   };
 

src/helpers/amplitudeHelper.tsx

@@ -4,7 +4,6 @@ import { StorageService } from '../services/StorageService';
 import { IDecodedToken, ITrackEventParams } from '../utils/interfaces';
 import { IUser } from '../utils/types';
 import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
 import { useRouter } from 'next/router';
 
 export const setAmplitudeUserIdFromToken = () => {

src/helpers/momentHelper.ts

@@ -0,0 +1,15 @@
+import moment from 'moment';
+
+export function transformToMidnightUTC(
+  dateStr: string | Date | moment.Moment
+): string {
+  const modifiedDate = moment.utc(dateStr).startOf('day');
+  return modifiedDate.format('YYYY-MM-DD[T]HH:mm:ss[Z]');
+}
+
+export function transformToEndOfUTC(
+  dateStr: string | Date | moment.Moment
+): string {
+  const modifiedDate = moment.utc(dateStr).endOf('day');
+  return modifiedDate.format('YYYY-MM-DD[T]HH:mm:ss[Z]');
+}

src/pages/statistics.tsx

@@ -16,6 +16,7 @@ import { Box } from '@mui/material';
 import Link from '../components/global/Link';
 import { AiOutlineLeft } from 'react-icons/ai';
 import Onboarding from '../components/pages/statistics/Onboarding';
+import { transformToMidnightUTC } from '../helpers/momentHelper';
 
 const Statistics = () => {
   const user = StorageService.readLocalStorage<IUser>('user');
@@ -203,8 +204,8 @@ const Statistics = () => {
     }
 
     return [
-      startDate.format('YYYY-MM-DDTHH:mm:ss[Z]'),
-      endDate.format('YYYY-MM-DDTHH:mm:ss[Z]'),
+      transformToMidnightUTC(startDate).toString(),
+      transformToMidnightUTC(endDate).toString(),
     ];
   };