Replace direct new date call with a helper function

Author: frozenhelium

community-dashboard/app/Base/utils/temporal.ts

@@ -1,7 +1,16 @@
 import { isDefined } from '@togglecorp/fujs';
 
+export function getDateSafe(value: Date | number | string) {
+    if (typeof value === 'string') {
+        return new Date(`${value}T00:00`);
+    }
+
+    return new Date(value);
+}
+
 export function resolveTime(date: Date | number | string, resolution: 'day' | 'month' | 'year'): Date {
-    const newDate = new Date(date);
+    const newDate = getDateSafe(date);
+
     if (resolution === 'day' || resolution === 'month' || resolution === 'year') {
         newDate.setUTCHours(0, 0, 0, 0);
     }
@@ -41,23 +50,23 @@ export function getTimestamps(
 }
 
 export function formatDate(value: number | string) {
-    const date = new Date(value);
+    const date = getDateSafe(value);
     return new Intl.DateTimeFormat(
         navigator.language,
         { year: 'numeric', month: 'short', day: 'numeric' },
     ).format(date);
 }
 
 export function formatMonth(value: number | string) {
-    const date = new Date(value);
+    const date = getDateSafe(value);
     return new Intl.DateTimeFormat(
         navigator.language,
         { year: 'numeric', month: 'short' },
     ).format(date);
 }
 
 export function formatYear(value: number | string) {
-    const date = new Date(value);
+    const date = getDateSafe(value);
     return new Intl.DateTimeFormat(
         navigator.language,
         { year: 'numeric' },

community-dashboard/app/components/Calendar/index.tsx

@@ -11,6 +11,8 @@ import {
     IoCalendarOutline,
 } from 'react-icons/io5';
 
+import { getDateSafe } from '#utils/temporal';
+
 import Button from '../Button';
 import NumberInput from '../NumberInput';
 import SelectInput from '../SelectInput';
@@ -124,7 +126,7 @@ function Calendar<P extends CalendarDateProps>(props: Props<P>) {
     } = props;
 
     const today = new Date();
-    const current = initialDate ? new Date(initialDate) : today;
+    const current = initialDate ? getDateSafe(initialDate) : today;
     const currentYear = current.getFullYear();
     const currentMonth = current.getMonth();
 
@@ -193,8 +195,8 @@ function Calendar<P extends CalendarDateProps>(props: Props<P>) {
                                 styles.monthSelectionPopup,
                             )}
                             optionsPopupContentClassName={styles.popupContent}
-                            optionRenderer={undefined}
-                            optionRendererParams={undefined}
+                            // optionRenderer={undefined}
+                            // optionRendererParams={undefined}
                         />
                     </div>
                 </div>

community-dashboard/app/components/CalendarHeatMapContainer/index.tsx

@@ -5,6 +5,8 @@ import { scaleQuantile } from 'd3-scale';
 import ReactTooltip from 'react-tooltip';
 import InformationCard from '#components/InformationCard';
 
+import { getDateSafe } from '#utils/temporal';
+
 import styles from './styles.css';
 
 const githubColors = [' #eeeeee', '#d6e685', '#8cc665', '#44a340', '#1e6823'];
@@ -24,15 +26,16 @@ function getDateRange(data: Data[] | null | undefined) {
     const startDate = sortedData[0].date;
     const endDate = sortedData[sortedData.length - 1].date;
 
-    if (getDifferenceInDays(new Date(endDate).getTime(), new Date(startDate).getTime()) <= 365) {
-        const currentYear = new Date(startDate).getFullYear();
+    if (getDifferenceInDays(getDateSafe(endDate).getTime(),
+        getDateSafe(startDate).getTime()) <= 365) {
+        const currentYear = getDateSafe(startDate).getFullYear();
         return {
             startDate: encodeDate(new Date(currentYear, 0, 1)),
             endDate: encodeDate(new Date(currentYear, 11, 31)),
         };
     }
-    const startDateTime = new Date(startDate);
-    const endDateTime = new Date(endDate);
+    const startDateTime = getDateSafe(startDate);
+    const endDateTime = getDateSafe(endDate);
 
     return {
         startDate: encodeDate(new Date(startDateTime.getFullYear(), startDateTime.getMonth(), 1)),

community-dashboard/app/components/Page/index.tsx

@@ -195,7 +195,7 @@ function Page(props: Props) {
                                     value={props.totalUserGroups}
                                     label="Total Groups"
                                     // eslint-disable-next-line react/destructuring-assignment
-                                    secondaryValue={props.totalContributorsLastMonth}
+                                    secondaryValue={props.totalUserGroupsLastMonth}
                                     secondaryValueDescription="active groups in the last 30 days"
                                 />
                             </>

community-dashboard/app/views/StatsBoard/index.tsx

@@ -58,6 +58,7 @@ import {
     formatYear,
     resolveTime,
     getTimestamps,
+    getDateSafe,
 } from '#utils/temporal';
 import styles from './styles.css';
 
@@ -208,14 +209,15 @@ function StatsBoard(props: Props) {
     React.useEffect(
         () => {
             const timestamps = contributionTimeStats?.map(
-                (item) => new Date(item.date).getTime(),
+                (item) => getDateSafe(item.date).getTime(),
             ) ?? [];
+
             if (timestamps.length <= 0) {
                 timestamps.push(new Date().getTime());
             }
 
-            const minDate = new Date(Math.min(...timestamps));
-            const maxDate = new Date(Math.max(...timestamps));
+            const minDate = getDateSafe(Math.min(...timestamps));
+            const maxDate = getDateSafe(Math.max(...timestamps));
 
             const minDateYear = minDate.getFullYear();
             const maxDateYear = maxDate.getFullYear();
@@ -325,7 +327,7 @@ function StatsBoard(props: Props) {
     const totalContributionByDay = useMemo(() => {
         const dayWiseContribution = listToGroupList(
             contributionTimeStats,
-            (d) => new Date(d.date).getDay(),
+            (d) => getDateSafe(d.date).getDay(),
             (d) => d.totalSwipeTime,
         );