upd

client/src/components/Timeline.tsx

@@ -6,6 +6,9 @@ import { addMinutes, differenceInMinutes, format, startOfDay } from "date-fns";
 import Button from "./Button";
 import IScheduledSession from "../types/IScheduledSession";
 import useStore from "../stores/useStore";
+import CloseIcon from "./icons/CloseIcon";
+import api from "../utils/api";
+import toast from "react-hot-toast";
 
 interface Props {
   timelineEvents: IScheduledSession[];
@@ -91,6 +94,23 @@ function Timeline({
     onChangeDraftMode(true);
   }
 
+  async function handleClickRemove(eventId: string) {
+    try {
+      const result: { status: string; message: string } = await api
+        .delete(`scheduledSessions/${eventId}`)
+        .json();
+
+      if (result.status === "error") {
+        toast.error(result.message);
+        return;
+      }
+
+      toast.success("Сеанс успешно удален!");
+    } catch (error) {
+      toast.error("Что-то пошло не так");
+    }
+  }
+
   // useEffect(() => {
   //   setTimelineEvents(
   //     timelineEvents.filter((event: IEvent) => event.slot === slot)
@@ -170,7 +190,7 @@ function Timeline({
             }px`,
           }}
         >
-          <div className="flex flex-col justify-between h-full">
+          <div className="relative flex flex-col justify-between h-full">
             <div className="space-y-1">
               <p>
                 {format(new Date(event.startAt), "HH:mm")} -{" "}
@@ -185,6 +205,13 @@ function Timeline({
             >
               <Button className="">Начать</Button>
             </a>
+            <Button
+              variant="tertiary"
+              icon={<CloseIcon className="" />}
+              onlyIcon
+              onClick={() => handleClickRemove(event.id)}
+              className="absolute -top-2 -right-2"
+            />
           </div>
         </div>
       ))}