Add component for personal event cancelation

oxybot · Aug 11, 2023 · 36c26f0 · 36c26f0
1 parent 029feb2
commit 36c26f0
Showing 1 changed file with 78 additions and 18 deletions.
diff --git a/front/src/My/MyEventView.js b/front/src/My/MyEventView.js
@@ -1,11 +1,16 @@
 import dayjs from "dayjs";
-import { useLoaderData, useParams } from "react-router-dom";
-import { useApiFetch, useDefinition } from "../api";
+import { useLoaderData, useParams, useRevalidator } from "react-router-dom";
+import { apiFetch, useApiFetch, useDefinition } from "../api";
 import EntityDetail from "../Generic/EntityDetail";
 import EntityList from "../Generic/EntityList";
 import PageView from "../Generic/PageView";
 import Sections from "../Generic/Sections";
 import Section from "../Generic/Section";
+import { useDispatch } from "react-redux";
+import { addError } from "../Alerts/slice";
+import { disconnect } from "../Authentication";
+import { EventExtraMenu } from "../Events/components";
+import Modal from "../Generic/Modal";
 
 function EventViewDetail() {
   const definition = useDefinition("EventForView");
@@ -28,26 +33,81 @@ function StatusList({ eventId }) {
   );
 }
 
+export function EventModals({ entity, next, onStatusChange }) {
+  if (next.length === 0) {
+    return null;
+  }
+
+  return next.map((status, index) => {
+    switch (status.displayName) {
+      case "Canceled":
+        return (
+          <Modal
+            key={index}
+            id="modal-cancel"
+            title="Are you sure?"
+            text={`Do you really want to cancel this ${entity.category.displayName} request starting ${dayjs(
+              entity.startDate
+            ).format("DD MMM YYYY")}?`}
+            confirm="Yes"
+            cancel="No"
+            onConfirm={() => onStatusChange(status)}
+          />
+        );
+      case "Approved":
+      case "Rejected":
+      default:
+        return null;
+    }
+  });
+}
+
 export function MyEventView({ backTo = null, full = false }) {
+  const revalidator = useRevalidator();
+  const dispatch = useDispatch();
   const { eventId } = useParams();
   const entity = useLoaderData();
+  const [, next] = useApiFetch(["My", "Events", eventId, "Statuses/Next"], { method: "GET" }, []);
+
+  function handleStatusChange(newStatus) {
+    apiFetch(["my", "events", eventId, "statuses"], {
+      method: "POST",
+      body: JSON.stringify({ from: entity.currentStatus.identifier, to: newStatus.identifier }),
+    })
+      .then(() => {
+        entity.currentStatus = newStatus;
+        revalidator.revalidate();
+      })
+      .catch((err) => {
+        if (err !== null && err.message === "401") {
+          dispatch(disconnect());
+        } else {
+          console.error(err);
+          dispatch(addError("Can't send this request", err.from));
+        }
+      });
+  }
 
   return (
-    <PageView
-      backTo={backTo}
-      full={full}
-      entity={entity}
-      title={dayjs(entity.startDate).format("DD MMM YYYY")}
-      editRole="noedit"
-    >
-      <Sections>
-        <Section code="detail" element={<EventViewDetail />}>
-          Detail
-        </Section>
-        <Section code="statuses" element={<StatusList eventId={eventId} />}>
-          Statuses
-        </Section>
-      </Sections>
-    </PageView>
+    <>
+      <PageView
+        backTo={backTo}
+        full={full}
+        entity={entity}
+        title={dayjs(entity.startDate).format("DD MMM YYYY")}
+        editRole="noedit"
+        extraMenu={<EventExtraMenu next={next} onStatusChange={handleStatusChange} />}
+      >
+        <Sections>
+          <Section code="detail" element={<EventViewDetail />}>
+            Detail
+          </Section>
+          <Section code="statuses" element={<StatusList eventId={eventId} />}>
+            Statuses
+          </Section>
+        </Sections>
+      </PageView>
+      <EventModals next={next} entity={entity} onStatusChange={handleStatusChange} />
+    </>
   );
 }