From 9799442cb92d4db58a74f2979fec20b841c1e773 Mon Sep 17 00:00:00 2001
From: regalijan <r@regalijan.com>
Date: Thu, 19 Oct 2023 16:49:17 -0400
Subject: [PATCH] Fix hydration issues with date string

---
 components/AppealCard.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/AppealCard.tsx b/components/AppealCard.tsx
index 2c6ba27..67e38ad 100644
--- a/components/AppealCard.tsx
+++ b/components/AppealCard.tsx
@@ -10,6 +10,7 @@ import {
   StackDivider,
   Text,
 } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 
 export default function (props: {
   ban_reason: string;
@@ -20,6 +21,14 @@ export default function (props: {
   reason_for_unban: string;
   username: string;
 }) {
+  const [dateString, setDateString] = useState(
+    new Date(props.createdAt).toUTCString()
+  );
+
+  useEffect(() => {
+    setDateString(new Date(props.createdAt).toLocaleString());
+  }, [props.createdAt]);
+
   return (
     <>
       <Card>
@@ -46,13 +55,15 @@ export default function (props: {
             </Box>
             <Box>
               <Button colorScheme="red">Deny</Button>
-              <Button colorScheme="blue" ml="8px">Accept</Button>
+              <Button colorScheme="blue" ml="8px">
+                Accept
+              </Button>
             </Box>
           </Stack>
         </CardBody>
         <CardFooter>
           <Text fontSize="xs">
-            Submitted at: {new Date(props.createdAt).toLocaleString()}
+            Submitted at: {dateString}
             <br />
             ID: {props.id}
           </Text>