Properly add appeal ban data to popup

components/AppealBans.tsx

@@ -19,13 +19,32 @@ import {
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import NewAppealBan from "./NewAppealBan.js";
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader({ context }: { context: RequestContext }) {
+  const list = (
+    await context.env.D1.prepare(
+      "SELECT * FROM appeal_bans ORDER BY created_at DESC;",
+    ).all()
+  ).results as {
+    created_at: number | string;
+    created_by: string;
+    user: string;
+  }[];
+
+  for (const row of list)
+    row.created_at = new Date(row.created_at).toUTCString();
+
+  return list;
+}
 
 export default function (props: { isOpen: boolean; onClose: () => void }) {
   const [entries, setEntries] = useState(
-    [] as { created_at: number; created_by: string; user: string }[],
+    [] as { created_at: number | string; created_by: string; user: string }[],
   );
   const toast = useToast();
   const { isOpen, onClose, onOpen } = useDisclosure();
+  setEntries(useLoaderData<typeof loader>());
 
   async function removeBan(user: string) {
     const removeResp = await fetch(`/api/appeals/${user}/ban`, {