Try fixing again

components/AppealBans.tsx

@@ -19,24 +19,6 @@ 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(
@@ -44,7 +26,6 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
   );
   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`, {
@@ -80,7 +61,15 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
     setEntries([...entries].filter((entry) => entry.user !== user));
   }
 
-  useEffect(() => {}, []);
+  useEffect(() => {
+    (async function () {
+      const banData = await fetch("/api/appeals/bans");
+
+      if (!banData.ok) return;
+
+      setEntries(await banData.json());
+    });
+  }, []);
 
   return (
     <>

functions/api/appeals/bans.ts

@@ -2,7 +2,7 @@ import { jsonResponse } from "../../common.js";
 
 export async function onRequestGet(context: RequestContext) {
   const { results } = await context.env.D1.prepare(
-    "SELECT * FROM appeal_bans;",
+    "SELECT * FROM appeal_bans ORDER BY created_by DESC;",
   ).all();
 
   return jsonResponse(JSON.stringify(results));