feat:refactor teams table with tanstackTable (#167)

Author: justin-phxm

amplify/data/resource.ts

@@ -97,7 +97,7 @@ const schema = a
         teamRooms: a.hasMany("TeamRoom", "teamId"),
       })
       .authorization((allow) => [
-        allow.group("Admin").to(["read", "update", "create"]),
+        allow.group("Admin").to(["read", "update", "create", "delete"]),
         allow.authenticated().to(["read"]),
       ]),
     Score: a

package-lock.json

@@ -25,10 +25,12 @@
     "@emotion/styled": "^11.13.0",
     "@react-email/components": "^0.0.19",
     "@react-email/render": "^0.0.15",
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/query-async-storage-persister": "^5.36.0",
     "@tanstack/react-query": "^5.32.1",
     "@tanstack/react-query-devtools": "^5.32.0",
     "@tanstack/react-query-persist-client": "^5.36.0",
+    "@tanstack/react-table": "^8.20.5",
     "@typescript-eslint/parser": "^7.11.0",
     "@yudiel/react-qr-scanner": "^2.0.4",
     "aws-amplify": "^6.0.18",
@@ -82,5 +84,6 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package.json

@@ -18,11 +18,11 @@ export const metadata: Metadata = {
 
 function AdminLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen w-full flex-1">
+    <div className="flex w-full flex-1 ">
       <SideNavBar />
-      <div className="flex size-full flex-1 flex-col">
+      <div className="flex w-full flex-1 flex-col ">
         <TopNavBar />
-        <main className="grow">{children}</main>
+        {children}
       </div>
     </div>
   );

src/app/admin/layout.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+
+import type { Row, TableMeta } from "@tanstack/react-table";
+
+import type { Team } from "../tanstackTableSetup";
+import Modal from "./Modal";
+
+export default function DeleteButton({
+  row,
+  meta,
+}: {
+  row: Row<Team>;
+  meta?: TableMeta<Team>;
+}) {
+  const [showPopup, setShowPopup] = useState(false);
+
+  return (
+    <>
+      <button className=" text-dark-pink" onClick={() => setShowPopup(true)}>
+        Delete
+      </button>
+      {showPopup && (
+        <Modal onClose={() => setShowPopup(false)}>
+          <h1 className="text-3xl font-semibold">
+            {row.original.teamName}
+            {"'s"} Team - #{row.original.teamID}
+          </h1>
+          <div className="flex flex-col gap-2 bg-light-grey p-2">
+            <h1 className="text-xl font-bold">
+              Are you sure you want to delete this record?
+            </h1>
+            <h2 className="mb-2">
+              This record will be deleted{" "}
+              <i>
+                <b>permanently</b>
+              </i>
+              . You cannot undo this action.
+            </h2>
+            <div className="flex justify-end gap-2">
+              <button
+                className=" rounded-md border border-black p-2 px-6 hover:opacity-40"
+                onClick={() => setShowPopup(false)}
+              >
+                Cancel
+              </button>
+              <button
+                className="rounded-md border bg-dark-pink p-2 px-6 text-white transition-all hover:bg-pastel-pink"
+                onClick={() => {
+                  meta?.deleteTeam(row.original, row.index);
+                  setShowPopup(false);
+                }}
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}