From b87a0e6aac3b00a25c9501050fafe9540f8cc4af Mon Sep 17 00:00:00 2001
From: Toni L <toni.lyttinen@aalto.fi>
Date: Wed, 31 Mar 2021 02:33:11 +0300
Subject: [PATCH] added functionality for admin to remove an event

---
 src/pages/admin/events/index.tsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/pages/admin/events/index.tsx b/src/pages/admin/events/index.tsx
index e77d5d8..80f1081 100644
--- a/src/pages/admin/events/index.tsx
+++ b/src/pages/admin/events/index.tsx
@@ -1,14 +1,33 @@
 import React from "react";
 import { NextPage } from "next";
 import { formatRelative } from "date-fns";
+import { toast } from "react-toastify";
+import styled from "styled-components";
 import AdminListCommon from "@views/admin/AdminListCommon";
-import { Link } from "@components/index";
+import { Button, Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import Event from "@models/Event";
+import EventApi from "@api/eventApi";
 import useFetchEvents from "@hooks/useFetchEvents";
 
 const URL = "/admin/events";
 
+const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
+  background-color: ${(p) => p.$colorOverride};
+`;
+
+const confirmDelete = async (event: Event) => {
+  if (window.confirm(`Delete: ${event.id}: ${event.title_fi}/${event.title_en}; Are you sure?`) === true) {
+    try {
+      await EventApi.deleteEvent(event.id);
+      toast.success("Event removed successfully 😎");
+      window.location.reload(); // TODO: Fetch/update event list, so user sees the signup in the list
+    } catch (err) {
+      toast.error("Uh oh! Something went wrong! Try again later. 😟");
+    }
+  }
+};
+
 const renderData = (events: Event[]) => {
   if (!events || events.length === 0) {
     return <div>No events.</div>;
@@ -29,12 +48,18 @@ const renderData = (events: Event[]) => {
             <td><Link to={`${URL}/${event.id}`}>{event.title_fi}</Link></td>
             <td>{formatRelative(new Date(event.start_time), new Date())}</td>
             <td>{formatRelative(new Date(event.end_time), new Date())}</td>
+            <td>
+              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(event)}>
+                Delete
+              </StyledButton>
+            </td>
           </tr>
         ))}
       </tbody>
     </table>
   );
 };
+
 const AdminEventPage: NextPage = () => {
   const { data } = useFetchEvents({ options: { auth: true } });
   return (