add table with suggested teams

prefs_page/src/App.tsx

@@ -17,6 +17,7 @@ import {
   FormHelperText,
   Stack,
 } from "@mui/material";
+import TeamTables from "./Table";
 
 function getStyles(name: string, players: readonly string[], theme: Theme) {
   return {
@@ -29,7 +30,8 @@ function getStyles(name: string, players: readonly string[], theme: Theme) {
 async function submit(
   person: string,
   players: string[],
-  setResponseStatus: (value: number) => void
+  setResponseStatus: (value: number) => void,
+  setDialog: (value: boolean) => void
 ) {
   // console.log(JSON.stringify({ person: person, players: players }));
   const response = await fetch("https://0124816.xyz/team/submit/", {
@@ -40,6 +42,7 @@ async function submit(
     body: JSON.stringify({ person: person, players: players }),
   });
   setResponseStatus(response.status);
+  setDialog(true);
 }
 
 type SubmitButtonProps = {
@@ -49,17 +52,20 @@ type SubmitButtonProps = {
 
 function SubmitButton(props: SubmitButtonProps) {
   const [responseStatus, setResponseStatus] = React.useState(0);
+  const [dialog, setDialog] = React.useState(false);
 
   return (
     <div>
       <Button
         variant="contained"
         color={responseStatus === 200 ? "success" : "primary"}
-        onClick={() => submit(props.person, props.players, setResponseStatus)}
+        onClick={() =>
+          submit(props.person, props.players, setResponseStatus, setDialog)
+        }
       >
         submit
       </Button>
-      <Dialog open={responseStatus === 200}>
+      <Dialog onClose={() => setDialog(false)} open={dialog}>
         <DialogTitle>thank you. please leave now.</DialogTitle>
       </Dialog>
     </div>
@@ -194,6 +200,7 @@ function App() {
         {SubmitButton({ person, players })}
         <p>now: click submit.</p>
       </div>
+      {TeamTables()}
       <p className="read-the-docs">
         something not working? message <a href="https://t.me/x0124816">me</a>.
       </p>

prefs_page/src/Table.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import data from "./table.json";
+
+export default function TeamTables() {
+  return (
+    <>
+      {Object.keys(data).map((teamname) => (
+        <>
+          <h1>{teamname as String}</h1>
+          <TableContainer component={Paper}>
+            <Table
+              sx={{ m: "8px auto" }}
+              size="small"
+              aria-label="simple table"
+            >
+              <TableHead>
+                <TableRow>
+                  <TableCell>player</TableCell>
+                  <TableCell>wishes fulfilled</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {data[teamname].map((row) => (
+                  <TableRow
+                    key={row[0]}
+                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                  >
+                    <TableCell key={row[0] + "-cell"}>{row[0]}</TableCell>
+                    <TableCell key={row[0] + "-cell-2"}>
+                      {"♥️".repeat(row[1]) + "♡".repeat(row[2] - row[1])}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </>
+      ))}
+    </>
+  );
+}