From b2d73a361de23e929be526a491d4f0507a60328d Mon Sep 17 00:00:00 2001
From: Angelo CG <angelocas13_8@hotmail.com>
Date: Fri, 10 Mar 2023 11:14:07 -0600
Subject: [PATCH] feat(components): improved format date

---
 .../election-schedule-segment.tsx                   |  2 +-
 .../participation-card.tsx                          | 13 +++++--------
 packages/webapp/src/elections/utils.ts              |  5 ++++-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/webapp/src/elections/components/registration-election-components/election-schedule-segment.tsx b/packages/webapp/src/elections/components/registration-election-components/election-schedule-segment.tsx
index 7f3c8ca35..995db0aa4 100644
--- a/packages/webapp/src/elections/components/registration-election-components/election-schedule-segment.tsx
+++ b/packages/webapp/src/elections/components/registration-election-components/election-schedule-segment.tsx
@@ -36,7 +36,7 @@ export const ElectionScheduleSegment = () => {
                 turn into an epic watch party that you might not want to miss!
             </Text>
             <Text type="info">
-                All times are local ({electionDates.startDateTime.format("z")})
+                All times are UTC ({electionDates.startDateTime})
             </Text>
             <Schedule>
                 <ScheduleEntry timeUtc="12:00">
diff --git a/packages/webapp/src/elections/components/registration-election-components/participation-card.tsx b/packages/webapp/src/elections/components/registration-election-components/participation-card.tsx
index dc9c3d0a4..f271e8d84 100644
--- a/packages/webapp/src/elections/components/registration-election-components/participation-card.tsx
+++ b/packages/webapp/src/elections/components/registration-election-components/participation-card.tsx
@@ -1,9 +1,6 @@
 import React, { useState } from "react";
 import { useQueryClient } from "react-query";
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-
-dayjs.extend(utc);
 
 import {
     delay,
@@ -91,11 +88,11 @@ export const ParticipationCard = ({ election }: Props) => {
         return <Text>{(e as Error).message}</Text>;
     }
 
-    const electionDate = electionDates.startDateTime.utc().format("LL");
-    const electionStartTime = electionDates.startDateTime.utc().format("LT");
-    const electionParticipationLimitTime = electionDates.participationTimeLimit
-        .utc()
-        .format("LLL");
+    const electionDate = electionDates.startDateTime.format("LL");
+    const electionStartTime = `${electionDates.startDateTime.format("LT")} UTC`;
+    const electionParticipationLimitTime = `${electionDates.participationTimeLimit.format(
+        "LLL"
+    )} UTC`;
 
     const isPastElectionParticipationTimeLimit = dayjs().isAfter(
         electionDates.participationTimeLimit
diff --git a/packages/webapp/src/elections/utils.ts b/packages/webapp/src/elections/utils.ts
index c6d06c32f..a330b6f89 100644
--- a/packages/webapp/src/elections/utils.ts
+++ b/packages/webapp/src/elections/utils.ts
@@ -1,4 +1,7 @@
 import dayjs, { Dayjs } from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 import { ActiveStateConfigType, SimpleVoteData } from "./interfaces";
 import { getMemberGroupFromIndex } from "./api";
@@ -13,7 +16,7 @@ export const extractElectionDates = (election: any) => {
         throw new Error("Error parsing the Election start date.");
     }
 
-    const startDateTime = dayjs(rawStartDateTime);
+    const startDateTime = dayjs(rawStartDateTime).utc();
     const participationTimeLimit = startDateTime.subtract(24, "hour");
     const estimatedEndDateTime = startDateTime.add(
         10, // TODO: estimate and calculate this value properly based on round numbers