Show date edit button on own events

app/routes/events-team.tsx

@@ -9,6 +9,7 @@ import {
   FormControl,
   FormLabel,
   Heading,
+  IconButton,
   Link,
   Modal,
   ModalBody,
@@ -116,6 +117,11 @@ export default function () {
     onClose: onDeleteClose,
     onOpen: onDeleteOpen,
   } = useDisclosure();
+  const {
+    isOpen: isRescheduleOpen,
+    onClose: onRescheduleClose,
+    onOpen: onRescheduleOpen,
+  } = useDisclosure();
   const toast = useToast();
   const [selectedEvent, setSelectedEvent] = useState("");
   const [showOld, setShowOld] = useState(false);
@@ -345,6 +351,42 @@ export default function () {
     setSelectedEvent("");
   }
 
+  async function reschedule(eventId: string) {
+    const newDate = (
+      document.getElementById("reschedule-input") as HTMLInputElement
+    ).value;
+    const rescheduleResp = await fetch(`/api/events-team/events/${eventId}`, {
+      body: JSON.stringify({ day: newDate.split("-").at(2) }),
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "PATCH",
+    });
+
+    if (!rescheduleResp.ok) {
+      let msg = "Unknown error";
+
+      try {
+        msg = ((await rescheduleResp.json()) as { error: string }).error;
+      } catch {}
+
+      toast({
+        description: msg,
+        status: "error",
+        title: "Failed to reschedule",
+      });
+
+      return;
+    }
+
+    onRescheduleClose();
+    toast({
+      description: `Event rescheduled to ${newDate}`,
+      status: "success",
+      title: "Rescheduled",
+    });
+  }
+
   return (
     <Container maxW="container.lg">
       <Modal isOpen={isOpen} onClose={onClose}>
@@ -460,6 +502,37 @@ export default function () {
           </ModalFooter>
         </ModalContent>
       </Modal>
+      <Modal isOpen={isRescheduleOpen} onClose={onRescheduleClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Reschedule Event</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>
+              New date:
+              <input
+                id="reschedule-input"
+                type="date"
+                style={{ marginLeft: "8px" }}
+                min={new Date().toISOString().split("T").at(0)}
+                max={(function () {
+                  const date = new Date();
+
+                  date.setUTCMonth(date.getUTCMonth() + 1, 0);
+
+                  return date.toISOString().split("T").at(0);
+                })()}
+              />
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={onRescheduleClose}>Cancel</Button>
+            <Button colorScheme="blue" ml="8px">
+              Reschedule
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
       <VStack spacing="8">
         {eventData
           .map((event) => {
@@ -488,6 +561,36 @@ export default function () {
                       <Heading size="sm">Date</Heading>
                       <Text fontSize="sm" pt="2">
                         {event.year}-{event.month}-{event.day}
+                        <IconButton
+                          aria-label="Edit event date"
+                          display={
+                            (event.created_by === user_id &&
+                              event.day > new Date().getUTCDate()) ||
+                            can_approve
+                              ? undefined
+                              : "none"
+                          }
+                          icon={
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              fill="currentColor"
+                              viewBox="0 0 16 16"
+                            >
+                              <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
+                              <path
+                                fill-rule="evenodd"
+                                d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
+                              />
+                            </svg>
+                          }
+                          ml="8px"
+                          onClick={() => {
+                            setEventData(event.id);
+                            onRescheduleOpen();
+                          }}
+                        />
                       </Text>
                     </Box>
                     <Box>
@@ -604,8 +707,9 @@ export default function () {
                           : "Approved"
                         : "Denied"}
                   </Text>
-                  <Button
+                  <IconButton
                     alignSelf="center"
+                    aria-label="Delete event"
                     display={
                       (event.created_by === user_id &&
                         event.day > new Date().getUTCDate()) ||
@@ -613,23 +717,24 @@ export default function () {
                         ? undefined
                         : "none"
                     }
+                    icon={
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="32"
+                        height="32"
+                        fill="currentColor"
+                        viewBox="0 0 16 16"
+                      >
+                        <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" />
+                      </svg>
+                    }
                     marginLeft="auto"
                     marginRight={0}
                     onClick={() => {
                       setSelectedEvent(event.id);
                       onDeleteOpen();
                     }}
-                  >
+                  />
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="32"
-                      height="32"
-                      fill="currentColor"
-                      viewBox="0 0 16 16"
-                    >
-                      <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" />
-                    </svg>
-                  </Button>
                 </CardFooter>
               </Card>
             );
@@ -666,7 +771,6 @@ export default function () {
           </Link>
         ) : null}
       </VStack>
-      ;
     </Container>
   );
 }