Ferrodri/agora 1688 display exact date in proposals (#154)

* format active proposal end time * fix with utc time * try timezone one more time * local timezone * add log * proposal time status should be a client component * remove log * comment
voteagora · Mar 5, 2024 · b74ef1d · b74ef1d
1 parent bc4ea97
commit b74ef1d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/components/Proposals/NeedsMyVoteProposalsList/NeedsMyVoteProposalsList.jsx b/src/components/Proposals/NeedsMyVoteProposalsList/NeedsMyVoteProposalsList.jsx
@@ -31,8 +31,6 @@ export default function NeedsMyVoteProposalsList({
     getProposals();
   }, [getProposals, address]);
 
-  console.log(proposals);
-
   return (
     <>
       {isConnected && proposals.length > 0 && (

diff --git a/src/components/Proposals/Proposal/ProposalTimeStatus.jsx b/src/components/Proposals/Proposal/ProposalTimeStatus.jsx
@@ -1,20 +1,32 @@
+// Use client for local timezone instead of server timezone
+"use client";
+
 import { HStack } from "@/components/Layout/Stack";
 import { formatDistanceToNowStrict } from "date-fns";
 
 export default function ProposalTimeStatus({
   proposalStatus,
   proposalEndTime,
 }) {
+  const options = {
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    timeZoneName: "short",
+  };
+
+  const activeProposalEndTime = new Intl.DateTimeFormat(
+    "en-US",
+    options
+  ).format(proposalEndTime);
+
   switch (proposalStatus) {
     case "PENDING":
       return <HStack gap={1}>Voting</HStack>;
 
     case "ACTIVE":
-      return (
-        <HStack gap={1}>
-          Ends in {formatDistanceToNowStrict(proposalEndTime)}
-        </HStack>
-      );
+      return <HStack gap={1}>Ends {activeProposalEndTime}</HStack>;
 
     case "CANCELLED":
       return <HStack gap={1}></HStack>;

diff --git a/src/components/Proposals/Proposal/proposal.module.scss b/src/components/Proposals/Proposal/proposal.module.scss
@@ -28,15 +28,15 @@
   }
 }
 .cell_status {
-  width: 15%;
+  width: 20%;
   align-items: flex-start;
   justify-content: center;
   @media (max-width: $screen-sm) {
     display: none;
   }
 }
 .cell_result {
-  width: 30%;
+  width: 25%;
   align-items: flex-end;
   justify-content: center;
   @media (max-width: $screen-sm) {