diff --git a/app/routes/et-members.tsx b/app/routes/et-members.tsx index 367862a..4bafda8 100644 --- a/app/routes/et-members.tsx +++ b/app/routes/et-members.tsx @@ -3,6 +3,7 @@ import { Button, Container, Heading, + Input, Link, Modal, ModalBody, @@ -28,7 +29,7 @@ import { useDisclosure, useToast, } from "@chakra-ui/react"; -import { useState } from "react"; +import { FormEvent, useState } from "react"; export async function loader({ context }: { context: RequestContext }) { if (!context.data.current_user) @@ -54,7 +55,10 @@ export async function loader({ context }: { context: RequestContext }) { status: 500, }); - return etData.results as { [k: string]: any }[]; + return { can_manage: true, members: etData.results } as { + can_manage: boolean; + members: { [k: string]: any }[]; + }; } export default function () { @@ -88,17 +92,58 @@ export default function () { setMemberData(memberData.filter((member) => member.id !== id)); } + async function addMember() { + const addResp = await fetch("/api/events-team/team-members/user", { + body: JSON.stringify({ + id: addingMemberId, + name: addingMemberName, + roblox_username: addingMemberRoblox, + }), + headers: { + "content-type": "application/json", + }, + method: "POST", + }); + + if (!addResp.ok) { + toast({ + description: "Failed to add member, try again later", + status: "error", + title: "Oops", + }); + + return; + } + + toast({ + description: `Member ${addingMemberName} was added to the roster`, + status: "success", + title: "Member Added", + }); + + location.reload(); + } + + const data = useLoaderData(); const [realtimePoints, setRealtimePoints] = useState(0); const [currentModalMember, setModalMember] = useState(""); const [currentDelMember, setDelMember] = useState({ id: "", name: "" }); - const [memberData, setMemberData] = useState(useLoaderData()); + const [memberData, setMemberData] = useState(data.members); + const [addingMemberId, setAddingMemberId] = useState(""); + const [addingMemberName, setAddingMemberName] = useState(""); + const [addingMemberRoblox, setAddingMemberRoblox] = useState(""); const { isOpen, onClose, onOpen } = useDisclosure(); const { isOpen: isDelConfirmOpen, onClose: closeDelConfirm, onOpen: openDelConfirm, } = useDisclosure(); - const isManagement = Math.round(Math.random()) === 1; + const { + isOpen: isAddMemberOpen, + onClose: closeAddMember, + onOpen: openAddMember, + } = useDisclosure(); + const isManagement = data.can_manage; async function updatePoints(id: string, points: number) { const updateResp = await fetch(`/api/events-team/points/${id}`, { @@ -216,6 +261,67 @@ export default function () { + + + + Add Member + + + User ID + { + const { + data, + }: { data?: string } & FormEvent = e; + + if (data?.match(/\D/)) e.preventDefault(); + }} + onChange={(e) => setAddingMemberId(e.target.value)} + pb="16px" + type="number" + /> + Name + setAddingMemberName(e.target.value)} + pb="16px" + /> + Roblox Username (optional) + { + const { + data, + }: { data?: string } & FormEvent = e; + + if (!data) return; + + if ( + data.match(/\W/) || + data.length > 20 || + data.length < 4 || + (data.match(/_/g)?.length || 0) > 1 || + data.startsWith("_") || + data.endsWith("_") + ) + e.preventDefault(); + }} + onChange={(e) => setAddingMemberRoblox(e.target.value)} + /> + + + + + + + Events Team Members @@ -252,20 +358,27 @@ export default function () { )} ))}
- { - setDelMember({ id: member.id, name: member.name }); - openDelConfirm(); - }} - > - Remove - + {isManagement ? ( + { + setDelMember({ id: member.id, name: member.name }); + openDelConfirm(); + }} + > + Remove + + ) : null}
+ {isManagement ? ( + + Add Member + + ) : null} ); }