Add point editing support

app/routes/et-members.tsx

@@ -1,8 +1,21 @@
 import { useLoaderData } from "@remix-run/react";
 import {
+  Button,
   Container,
   Heading,
   Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
   Table,
   TableCaption,
   TableContainer,
@@ -11,6 +24,8 @@ import {
   Th,
   Thead,
   Tr,
+  useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
 import { useState } from "react";
 
@@ -42,6 +57,8 @@ export async function loader({ context }: { context: RequestContext }) {
 }
 
 export default function () {
+  const toast = useToast();
+
   async function removeMember(id: string) {
     await fetch("/api/events-team/team-members/user", {
       body: JSON.stringify({ id }),
@@ -55,10 +72,91 @@ export default function () {
   }
 
   const [realtimePoints, setRealtimePoints] = useState(0);
+  const [currentModalMember, setModalMember] = useState("");
   const [memberData, setMemberData] = useState(useLoaderData<typeof loader>());
+  const { isOpen, onClose, onOpen } = useDisclosure();
+  const isManagement = Math.round(Math.random()) === 1;
+
+  async function updatePoints(id: string, points: number) {
+    const updateResp = await fetch(`/api/events-team/points/${id}`, {
+      body: JSON.stringify({ points }),
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "POST",
+    });
+
+    if (!updateResp.ok) {
+      toast({
+        description: "Failed to update points",
+        status: "error",
+        title: "Oops!",
+      });
+
+      return;
+    }
+
+    toast({
+      description: `Point count changed to ${points}`,
+      status: "success",
+      title: "Points updated",
+    });
+
+    const newMemberData = memberData;
+    newMemberData[memberData.findIndex((m) => m.id === id)].points = points;
+
+    setMemberData(newMemberData);
+  }
 
   return (
     <Container maxW="container.lg">
+      <Modal
+        isOpen={isOpen}
+        onClose={() => {
+          setRealtimePoints(0);
+          onClose();
+        }}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Modify Points</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <NumberInput
+              allowMouseWheel
+              defaultValue={realtimePoints}
+              onChange={(n) => setRealtimePoints(parseInt(n))}
+              pt="8px"
+            >
+              <NumberInputField />
+              <NumberInputStepper>
+                <NumberIncrementStepper />
+                <NumberDecrementStepper />
+              </NumberInputStepper>
+            </NumberInput>
+          </ModalBody>
+          {isManagement ? (
+            <ModalFooter>
+              <Button
+                onClick={() => {
+                  setRealtimePoints(0);
+                  onClose();
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="blue"
+                onClick={async () =>
+                  await updatePoints(currentModalMember, realtimePoints)
+                }
+              >
+                Update Points
+              </Button>
+            </ModalFooter>
+          ) : null}
+        </ModalContent>
+      </Modal>
       <Heading>Events Team Members</Heading>
       <TableContainer pt="16px">
         <Table variant="simple">
@@ -80,7 +178,20 @@ export default function () {
                 <Td>{member.id}</Td>
                 <Td>{member.name}</Td>
                 <Td>{member.roblox_id}</Td>
-                <Td>{member.points}</Td>
+                <Td>
+                  {isManagement ? (
+                    <Link
+                      onClick={() => {
+                        setModalMember(member.id);
+                        onOpen();
+                      }}
+                    >
+                      {member.points}
+                    </Link>
+                  ) : (
+                    member.points
+                  )}
+                </Td>
                 <Td>
                   <Link onClick={async () => removeMember(member.id)}>
                     Remove