Add endpoint for deletion

src/api/backend.ts

@@ -11,6 +11,7 @@ export enum APIPath {
   FEED = "/feed/:id",
   JOBADS = "/jobads/:id",
   SIGNUPS = "/signup/:id",
+  SIGNUPS_DELETE = "/signup/:id/delete",
   SIGNUPS_EDIT = "/signup/:id/edit",
   SIGNUP_FORMS = "/signupForm/:id",
   SIGNUP_FORMS_EMAIL = "/signupForm/:id/sendemail",

src/api/signupApi.ts

@@ -78,6 +78,15 @@ class SignupApi {
     }
   };
 
+  static userDeleteSignup = async (id: number, uuid: string): Promise<void> => {
+    try {
+      await deleteBackendAPI<{ message: "OK" }>({ path: APIPath.SIGNUPS_DELETE, urlParams: { id }, queryParams: { uuid } });
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  };
+
   static getForm = async (id: number, auth = false): Promise<SignupForm> => {
     try {
       return await getBackendAPI<SignupForm>({

src/components/Button.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import colors from "@theme/colors";
 
 interface ButtonProps {
-  onClick: () => void;
+  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
   buttonStyle: "hero" | "filled" | "filter" | "bordered";
   selected?: boolean;
 }

src/pages/signup/edit/[id]/[uuid].tsx

@@ -67,6 +67,16 @@ const EditSignUpPage: NextPage = () => {
     }
   };
 
+  const onDelete = async () => {
+    try {
+      await SignupApi.userDeleteSignup(Number(signupId), uuid);
+      toast.success("Sign-up deleted successfully 😎");
+    } catch (error) {
+      console.error(error);
+      toast.error("Uh oh! Deleting sign-up failed! 😟");
+    }
+  };
+
   return (
     <PageWrapper>
       <SignUpPageView
@@ -74,6 +84,7 @@ const EditSignUpPage: NextPage = () => {
         formData={formData}
         onChange={noop}
         onSubmit={onSubmit}
+        onDelete={onDelete}
       />
     </PageWrapper>
   );

src/views/SignUpPage/SignUpPageView.tsx

@@ -6,7 +6,7 @@ import {
 import { SignupForm } from "@models/Signup";
 import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
 import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
-import { TextSection, ChangeLanguageButton } from "@components/index";
+import { TextSection, ChangeLanguageButton, Button } from "@components/index";
 import colors from "@theme/colors";
 import FormWrapper from "@views/common/FormWrapper";
 import Loader from "@components/Loader";
@@ -23,6 +23,7 @@ interface SignUpPageViewProps {
   formData: any;
   onChange: (e: IChangeEvent<unknown>, es?: ErrorSchema) => unknown;
   onSubmit: (e: ISubmitEvent<unknown>) => unknown;
+  onDelete: () => void;
 }
 
 const StyledSection = styled(TextSection)`
@@ -59,6 +60,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
   formData,
   onChange,
   onSubmit,
+  onDelete,
 }) => {
   const { i18n, t } = useTranslation();
   const startDate = new Date(signUpForm?.start_time);
@@ -127,6 +129,14 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
     signups = renderList();
   }
 
+  const deleteButton = (
+    <Button
+      buttonStyle="filled"
+      onClick={onDelete}
+    >Delete
+    </Button>
+  );
+
   return (
     <>
       <LngButton />
@@ -137,6 +147,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
 
         <div>
           {form}
+          {deleteButton}
         </div>
         {signups}
       </StyledSection>