Merge branch 'admindelete' into 'master'

Added functionality for admin delete post, jobad, signupform

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!49

src/api/feedApi.ts

@@ -62,6 +62,20 @@ class FeedApi {
       throw err;
     }
   }
+
+  static async deletePost(id: number) {
+    try {
+      const resp = await axios.delete(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
 }
 
 export default FeedApi;

src/api/jobAdApi.ts

@@ -72,6 +72,20 @@ class JobAdApi {
       throw err;
     }
   }
+
+  static async deleteJobAd(id: number) {
+    try {
+      const resp = await axios.delete(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
 }
 
 export default JobAdApi;

src/pages/admin/events/index.tsx

@@ -14,6 +14,10 @@ const URL = "/admin/events";
 
 const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
   background-color: ${(p) => p.$colorOverride};
+  border-radius: 8px;
+  color: white;
+  font-size: 13px;
+  font-weight: bold;
 `;
 
 const confirmDelete = async (event: Event) => {

src/pages/admin/feed/index.tsx

@@ -1,14 +1,37 @@
 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 Post from "@models/Feed";
+import PostApi from "@api/feedApi";
 import useFetchFeed from "@hooks/useFetchFeed";
 
 const URL = "/admin/feed";
 
+const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
+  background-color: ${(p) => p.$colorOverride};
+  border-radius: 8px;
+  color: white;
+  font-size: 13px;
+  font-weight: bold;
+`;
+
+const confirmDelete = async (post: Post) => {
+  if (window.confirm(`Delete: ${post.id}: ${post.title_fi}/${post.title_en}; Are you sure?`) === true) {
+    try {
+      await PostApi.deletePost(post.id);
+      toast.success("Post removed successfully 😎");
+      window.location.reload(); // TODO: Fetch/update post list, so user sees the signup in the list
+    } catch (err) {
+      toast.error("Uh oh! Something went wrong! Try again later. 😟");
+    }
+  }
+};
+
 const renderData = (feed: Post[]) => {
   if (!feed || feed.length === 0) {
     return <div>No posts.</div>;
@@ -29,6 +52,11 @@ const renderData = (feed: Post[]) => {
             <td><Link to={`${URL}/${post.id}`}>{post.title_fi}</Link></td>
             <td>{post.description_fi}</td>
             <td>{formatRelative(new Date(post.publish_time), new Date())}</td>
+            <td>
+              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(post)}>
+                Delete
+              </StyledButton>
+            </td>
           </tr>
         ))}
       </tbody>

src/pages/admin/jobads/index.tsx

@@ -1,14 +1,37 @@
 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 JobAd from "@models/JobAd";
 import useFetchJobAds from "@hooks/useFetchJobAds";
+import JobAdApi from "@api/jobAdApi";
 
 const URL = "/admin/jobads";
 
+const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
+  background-color: ${(p) => p.$colorOverride};
+  border-radius: 8px;
+  color: white;
+  font-size: 13px;
+  font-weight: bold;
+`;
+
+const confirmDelete = async (jobad: JobAd) => {
+  if (window.confirm(`Delete: ${jobad.id}: ${jobad.title_fi}/${jobad.title_en}; Are you sure?`) === true) {
+    try {
+      await JobAdApi.deleteJobAd(jobad.id);
+      toast.success("Signup 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 = (jobAds: JobAd[]) => {
   if (!jobAds || jobAds.length === 0) {
     return <div>No advertisements.</div>;
@@ -33,6 +56,11 @@ const renderData = (jobAds: JobAd[]) => {
                 ? formatRelative(new Date(ad.autohide_at), new Date())
                 : "Disabled"}
             </td>
+            <td>
+              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(ad)}>
+                Delete
+              </StyledButton>
+            </td>
           </tr>
         ))}
       </tbody>

src/pages/admin/signups/index.tsx

@@ -1,14 +1,36 @@
 import React, { useEffect, useState } 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 { SignupForm } from "@models/Signup";
 import SignupApi from "@api/signupApi";
 
 const URL = "/admin/signups";
 
+const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
+  background-color: ${(p) => p.$colorOverride};
+  border-radius: 8px;
+  color: white;
+  font-size: 13px;
+  font-weight: bold;
+`;
+
+const confirmDelete = async (signup: SignupForm) => {
+  if (window.confirm(`Delete: ${signup.id}: ${signup.title_fi}/${signup.title_en}; Are you sure?`) === true) {
+    try {
+      await SignupApi.deleteForm(signup.id);
+      toast.success("Signup 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 = (signupForms: SignupForm[]) => {
   if (!signupForms || signupForms.length === 0) {
     return <div>No signup forms.</div>;
@@ -33,6 +55,11 @@ const renderData = (signupForms: SignupForm[]) => {
             <td>{formatRelative(new Date(signupForm.end_time), new Date())}</td>
             <td><Link to={`${URL}/${signupForm.id}/list`}>View</Link></td>
             <td><Link to={`${URL}/${signupForm.id}/email`}>Send</Link></td>
+            <td>
+              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(signupForm)}>
+                Delete
+              </StyledButton>
+            </td>
           </tr>
         ))}
       </tbody>