change for converting date to local timezone (#271)

bcgov · Jan 31, 2025 · 347ae0e · 347ae0e
1 parent ef47c0c
commit 347ae0e
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 20 deletions.
diff --git a/submit-web/src/components/Projects/ProjectTable/ProponentTableRow.tsx b/submit-web/src/components/Projects/ProjectTable/ProponentTableRow.tsx
@@ -1,8 +1,8 @@
 import { ArrowForwardIos } from "@mui/icons-material";
+import dateUtils from "@/utils/dateUtils";
 import { Link, Typography } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
 import { SubmissionPackage } from "@/models/Package";
-import dayjs from "dayjs";
 import { PackageStatusChipStack } from "../../PackageStatusChip/PackageStatusChipStack";
 import {
   StyledProjectTableCell,
@@ -47,9 +47,7 @@ export default function ProponentTableRow({ subPackage }: ProjectRowProps) {
           </Link>
         </StyledProjectTableCell>
         <StyledProjectTableCell align="left">
-          {subPackage.submitted_on
-            ? dayjs(subPackage.submitted_on).format("DD-MMM-YYYY")
-            : ""}
+          {dateUtils.formatDate(String(subPackage.submitted_on))}
         </StyledProjectTableCell>
         <StyledProjectTableCell align="left">
           {subPackage.submitted_by ?? ""}

diff --git a/submit-web/src/components/Projects/ProjectTable/StaffTableRow.tsx b/submit-web/src/components/Projects/ProjectTable/StaffTableRow.tsx
@@ -1,4 +1,5 @@
 import { ArrowForwardIos } from "@mui/icons-material";
+import dateutils from "@/utils/dateUtils";
 import { Stack, Typography } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
 import { SubmissionPackage } from "@/models/Package";
@@ -96,7 +97,7 @@ export default function StaffTableRow({ submissionPackage }: ProjectRowProps) {
             color: BCDesignTokens.typographyFontSizeBody,
           }}
         >
-          {submitted_on ? dayjs(submitted_on).format("DD-MMM-YYYY") : ""}
+          {dateutils.formatDate(String(submitted_on))}
         </StyledProjectTableCell>
         <StyledProjectTableCell
           align="right"
@@ -116,7 +117,7 @@ export default function StaffTableRow({ submissionPackage }: ProjectRowProps) {
             maxWidth: "75px",
           }}
         >
-          {cc_completed_on ? dayjs(cc_completed_on).format("DD-MMM-YYYY") : ""}
+          {dateutils.formatDate(cc_completed_on)}
         </StyledProjectTableCell>
         <StyledProjectTableCell
           align="right"

diff --git a/submit-web/src/components/Submission/InfoBox.tsx b/submit-web/src/components/Submission/InfoBox.tsx
@@ -1,9 +1,9 @@
+import dateUtils from "@/utils/dateUtils";
 import { SubmissionPackage } from "@/models/Package";
 import { USER_TYPE } from "@/models/User";
 import { useAccount } from "@/store/accountStore";
 import { Grid, Typography } from "@mui/material";
 import { ReactNode } from "@tanstack/react-router";
-import dayjs from "dayjs";
 import { BCDesignTokens } from "epic.theme";
 import { Case, Switch } from "react-if";
 import VersionGroup from "./VersionGroup";
@@ -82,13 +82,13 @@ const ProponentInfoBox = ({ submissionPackage }: InfoBoxProps) => {
       <Grid item xs={12} lg={4} container>
         <InfoBoxItem
           label={"Submitted on"}
-          value={submitted_on ? dayjs(submitted_on).format("DD-MMM-YYYY") : ""}
+          value={dateUtils.formatDate(submitted_on)}
         />
       </Grid>
       <Grid item xs={12} lg={4} container>
         <InfoBoxItem
           label={"Date Review Completed"}
-          value={date_review_completed}
+          value={dateUtils.formatDate(date_review_completed)}
         />
       </Grid>
       <Grid item xs={12} lg={4} container>
@@ -139,7 +139,7 @@ const StaffInfoBox = ({ submissionPackage }: InfoBoxProps) => {
       <Grid item xs={12} lg={4} container>
         <InfoBoxItem
           label={"Submitted on"}
-          value={submitted_on ? dayjs(submitted_on).format("DD-MMM-YYYY") : ""}
+          value={dateUtils.formatDate(String(submitted_on))}
         />
       </Grid>
       <Grid item xs={12} lg={4} container>
@@ -149,7 +149,7 @@ const StaffInfoBox = ({ submissionPackage }: InfoBoxProps) => {
         <InfoBoxItem
           label={"CC Start Date"}
           value={
-            cc_start_date ? dayjs(cc_start_date).format("DD-MMM-YYYY") : ""
+            dateUtils.formatDate(cc_start_date)
           }
         />
       </Grid>
@@ -166,7 +166,7 @@ const StaffInfoBox = ({ submissionPackage }: InfoBoxProps) => {
         <InfoBoxItem
           label={"CC Completed"}
           value={
-            cc_completed_on ? dayjs(cc_completed_on).format("DD-MMM-YYYY") : ""
+            dateUtils.formatDate(cc_completed_on)
           }
         />
       </Grid>
@@ -176,9 +176,7 @@ const StaffInfoBox = ({ submissionPackage }: InfoBoxProps) => {
         <InfoBoxItem
           label={"Review Start Date"}
           value={
-            review_start_date
-              ? dayjs(review_start_date).format("DD-MMM-YYYY")
-              : ""
+              dateUtils.formatDate(review_start_date)
           }
         />
       </Grid>
@@ -194,9 +192,7 @@ const StaffInfoBox = ({ submissionPackage }: InfoBoxProps) => {
         <InfoBoxItem
           label={"Review Completed"}
           value={
-            review_completed_on
-              ? dayjs(review_completed_on).format("DD-MMM-YYYY")
-              : ""
+            dateUtils.formatDate(review_completed_on)
           }
         />
       </Grid>

diff --git a/submit-web/src/components/Submission/UpdateRequestWidget/RequestSection.tsx b/submit-web/src/components/Submission/UpdateRequestWidget/RequestSection.tsx
@@ -1,6 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
-import dayjs from "dayjs";
+import dateUtils from "@/utils/dateUtils";
 import { UPDATE_REQUEST_TYPE, UpdateRequest } from "@/models/UpdateRequest";
 import { Case, Switch, Unless, When } from "react-if";
 import { AddRequestNoteSection } from "./AddRequestNoteSection";
@@ -20,7 +20,7 @@ export default function RequestSection({
 }: UpdateRequestProps) {
   const { reason, created_date, created_by, note, type, submission_item_ids } =
     updateRequest;
-  const createdDate = dayjs(created_date).format("DD-MMM-YYYY");
+  const createdDate = dateUtils.formatDate(created_date)
 
   const { roles } = useAccount();
   const isEAO = checkIfEAO(roles || []);

diff --git a/submit-web/src/utils/dateUtils.ts b/submit-web/src/utils/dateUtils.ts
@@ -0,0 +1,40 @@
+import dayjs, { Dayjs } from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+
+type UnitOfTime = "second" | "minute" | "hour" | "day" | "month" | "year";
+
+export const DATE_FORMAT = "YYYY-MM-DD";
+export const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm";
+
+dayjs.extend(utc);
+/**
+ * @param date Input date string
+ * @param format Valid date format
+ * @returns Formatted date string
+ */
+const formatDate = (date: string | number, format?: string) => {
+    if (!date) return ""; // Handle null or undefined values
+
+    // server date is in UTC, convert to local timezone
+    return dayjs.utc(String(date)).local().format(format || DATE_FORMAT);
+  };
+
+const diff = (fromDate: string, toDate: string, unitOfTime: UnitOfTime) => {
+  return dayjs(fromDate).diff(dayjs(toDate), unitOfTime);
+};
+
+const add = (date: Date, unit: number, unitOfTime: UnitOfTime) => {
+  return dayjs(date).add(unit, unitOfTime);
+};
+
+const dateToISO = (date: Date | Dayjs) => {
+  return dayjs(date).toISOString();
+};
+
+export default {
+  formatDate,
+  diff,
+  add,
+  dateToISO,
+};