Use client side rendering for local dates

app/components/certificate/certificate-available.tsx

@@ -21,14 +21,14 @@ import type { CertificateWithFullChain } from '~/models/certificate.server';
 
 interface CertificateAvailableProps {
   certificate: CertificateWithFullChain;
-  validFromFormatted: string;
-  validToFormatted: string;
+  validFromISO: string;
+  validToISO: string;
 }
 
 export default function CertificateAvailable({
   certificate,
-  validFromFormatted,
-  validToFormatted,
+  validFromISO,
+  validToISO,
 }: CertificateAvailableProps) {
   const isRenewable = useMemo((): boolean => {
     if (certificate.validTo) {
@@ -44,8 +44,8 @@ export default function CertificateAvailable({
       <Description
         description="With this certificate, you will have an HTTPS certificate for all of your projects connected to your DNS records."
         certRequested={true}
-        validFromFormatted={validFromFormatted}
-        validToFormatted={validToFormatted}
+        validFromISO={validFromISO}
+        validToISO={validToISO}
         isRenewable={isRenewable}
       />
 

app/components/certificate/description.tsx

@@ -1,5 +1,6 @@
 import { RepeatIcon, DeleteIcon } from '@chakra-ui/icons';
 import { Form, Link as RemixLink } from '@remix-run/react';
+import { useEffect, useState } from 'react';
 import {
   Flex,
   Text,
@@ -15,17 +16,17 @@ import {
 
 interface DescriptionSectionProps {
   certRequested: boolean;
-  validFromFormatted?: string;
-  validToFormatted?: string;
+  validFromISO?: string;
+  validToISO?: string;
   description: string;
   isRenewable?: boolean;
   link?: string;
 }
 
 export default function DescriptionSection({
   certRequested,
-  validFromFormatted,
-  validToFormatted,
+  validFromISO,
+  validToISO,
   description,
   isRenewable,
   link,
@@ -45,15 +46,19 @@ export default function DescriptionSection({
           </>
         )}
       </Text>
-      {certRequested && !!validFromFormatted && !!validToFormatted && (
+      {certRequested && !!validFromISO && !!validToISO && (
         <Wrap align="center">
           <Stat backgroundColor="whitesmoke" maxW={200} px={5} py={3} borderRadius={8}>
             <StatLabel>Created On</StatLabel>
-            <StatNumber>{validFromFormatted}</StatNumber>
+            <StatNumber>
+              <LocalDate iso={validFromISO} />
+            </StatNumber>
           </Stat>
           <Stat backgroundColor="whitesmoke" maxW={200} px={5} py={3} borderRadius={8}>
             <StatLabel>Expires On</StatLabel>
-            <StatNumber>{validToFormatted}</StatNumber>
+            <StatNumber>
+              <LocalDate iso={validToISO} />
+            </StatNumber>
           </Stat>
           <WrapItem>
             <Flex justifyContent="flex-end">
@@ -87,3 +92,20 @@ export default function DescriptionSection({
     </Flex>
   );
 }
+
+function LocalDate({ iso }: { iso: string }) {
+  const [formatted, setFormatted] = useState('');
+
+  useEffect(() => {
+    const date = new Date(iso);
+    setFormatted(
+      date.toLocaleDateString('en-CA', {
+        month: 'short',
+        day: '2-digit',
+        year: 'numeric',
+      })
+    );
+  }, [iso]);
+
+  return <time>{formatted}</time>;
+}

app/routes/_auth.certificate._index.tsx

@@ -77,16 +77,6 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   });
 };
 
-function formatDate(val: Date): string {
-  const date = val.toLocaleDateString('en-US', {
-    month: 'short',
-    day: '2-digit',
-    year: 'numeric',
-  });
-
-  return date;
-}
-
 function mapStatusToErrorText(statusCode: number): string {
   switch (statusCode) {
     case 404:
@@ -140,8 +130,8 @@ export default function CertificateIndexRoute() {
       {certificate?.status === 'issued' ? (
         <CertificateAvailable
           certificate={certificate}
-          validFromFormatted={formatDate(certificate.validFrom!)}
-          validToFormatted={formatDate(certificate.validTo!)}
+          validFromISO={certificate.validFrom!.toISOString()}
+          validToISO={certificate.validTo!.toISOString()}
         />
       ) : (
         <CertificateRequestView