feat: add deleting form functionality

src/shared/containers/Forms/FormTabs/ContractForms/ContractForms.tsx

@@ -1,15 +1,29 @@
-import React, { memo, useEffect, useCallback } from 'react';
+import React, { memo, useEffect, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { areEqual } from 'Utils/equalityChecks';
-import { contractFormsSelector, fetchingContractFormsSelector, companyIdSelector } from 'Containers/Forms/selectors';
+import {
+  contractFormsSelector,
+  fetchingContractFormsSelector,
+  companyIdSelector,
+  deletingContractFormSelector,
+  contractFormDeletedSelector,
+} from 'Containers/Forms/selectors';
 import { ContractForms } from 'Components/Forms';
-import { listCompanyContractForms } from 'Containers/Forms/actions';
+import { DeleteFormModal, DeleteToast } from 'Components/Forms/FormTabs';
+import { listCompanyContractForms, deleteContractForm, setDeletedFormId } from '../../actions';
 
 const ContractFormsContainer = () => {
   const dispatch = useDispatch();
   const contractForms = useSelector(contractFormsSelector, areEqual);
   const fetching = useSelector(fetchingContractFormsSelector, areEqual);
   const companyId = useSelector(companyIdSelector, areEqual);
+  const deleting = useSelector(deletingContractFormSelector, areEqual);
+  const deletedId = useSelector(contractFormDeletedSelector, areEqual);
+  const [deleteModal, setDeleteModal] = useState({
+    isOpen: false,
+    id: null,
+  });
+  const [showDeletedToast, setShowDeletedToast] = useState(false);
 
   const getContractForms = useCallback(() => {
     if (companyId) {
@@ -17,18 +31,70 @@ const ContractFormsContainer = () => {
     }
   }, [dispatch, companyId]);
 
+  const deleteButtonClick = useCallback((id: number) => {
+    setDeleteModal({
+      isOpen: true,
+      id,
+    });
+  }, []);
+
+  const handleDelete = useCallback(
+    (id: number) => {
+      dispatch(deleteContractForm(id));
+      setDeleteModal({
+        isOpen: false,
+        id: null,
+      });
+    },
+    [dispatch]
+  );
+
+  const closeToast = useCallback((e: any) => {
+    e.preventDefault();
+    setShowDeletedToast(false);
+  }, []);
+
+  useEffect(() => {
+    if (deletedId) {
+      dispatch(listCompanyContractForms(companyId));
+
+      setShowDeletedToast(true);
+
+      setTimeout(() => setShowDeletedToast(false), 1500);
+
+      dispatch(setDeletedFormId(null));
+    }
+  }, [deletedId]);
+
   useEffect(() => {
     getContractForms();
   }, [getContractForms]);
 
   return (
-    <ContractForms
-      forms={contractForms}
-      fetching={fetching}
-      onAdd={console.log}
-      onDelete={console.log}
-      onClickRow={console.log}
-    />
+    <>
+      <ContractForms
+        forms={contractForms}
+        fetching={fetching}
+        onAdd={() => {}}
+        onDelete={deleteButtonClick}
+        onClickRow={() => {}}
+        // deleting={deleting}
+        // deletedId={deletedId}
+      />
+
+      <DeleteFormModal
+        id={deleteModal.id as number}
+        isOpen={deleteModal.isOpen}
+        modalCloseClick={() =>
+          setDeleteModal({
+            isOpen: false,
+            id: null,
+          })
+        }
+        onDelete={handleDelete}
+      />
+      {deletedId && <DeleteToast isDisplayed={showDeletedToast} closeToast={closeToast} message="Form Deleted" />}
+    </>
   );
 };
 

src/shared/containers/Forms/actions.ts

@@ -4,10 +4,14 @@ import { FormTemplateResponse } from 'Containers/Forms/Models';
 
 export const CONTRACT_FORMS = 'CONTRACT_FORMS';
 export const FETCHING_CONTRACT_FORMS = 'FETCHING_CONTRACT_FORMS';
+export const DELETING_CONTRACT_FORM = 'DELETING_CONTRACT_FORM';
+export const CONTRACT_FORM_DELETED = 'CONTRACT_FORM_DELETED';
 
 interface FormsActionTypes {
   CONTRACT_FORMS: FormTemplateResponse;
   FETCHING_CONTRACT_FORMS: boolean;
+  DELETING_CONTRACT_FORM: boolean;
+  CONTRACT_FORM_DELETED: number;
 }
 
 interface MessageAction {
@@ -31,3 +35,19 @@ export const listCompanyContractForms = (companyId: number) => async (dispatch:
     payload: response,
   });
 };
+
+// Thunk to delete a contract form by id
+export const deleteContractForm = (contractFormId: number) => async (dispatch: any) => {
+  dispatch({ type: DELETING_CONTRACT_FORM, payload: true });
+  try {
+    await handleApiRequest(dispatch, Api.delete(`/contract-forms/${contractFormId}`), '', DELETING_CONTRACT_FORM);
+    dispatch({ type: CONTRACT_FORM_DELETED, payload: contractFormId });
+  } catch (error) {
+    // handle error if needed
+    dispatch({ type: DELETING_CONTRACT_FORM, payload: false });
+  }
+};
+
+export const setDeletedFormId = (value: number | null) => async (dispatch: any) => {
+  dispatch({ type: CONTRACT_FORM_DELETED, payload: value });
+};

src/shared/containers/Forms/reducer.ts

@@ -1,8 +1,16 @@
-import { CONTRACT_FORMS, FETCHING_CONTRACT_FORMS, SetFormsActionTypes } from './actions';
+import {
+  CONTRACT_FORMS,
+  FETCHING_CONTRACT_FORMS,
+  SetFormsActionTypes,
+  DELETING_CONTRACT_FORM,
+  CONTRACT_FORM_DELETED,
+} from './actions';
 
 const initialState = {
   data: [],
   fetchingContractForms: false,
+  deletingContractForm: false,
+  contractFormDeleted: null,
 };
 
 export const formsReducer = (state = initialState, action: SetFormsActionTypes) => {
@@ -19,6 +27,18 @@ export const formsReducer = (state = initialState, action: SetFormsActionTypes)
         fetchingContractForms: action.payload,
       };
     }
+    case DELETING_CONTRACT_FORM: {
+      return {
+        ...state,
+        deletingContractForm: action.payload,
+      };
+    }
+    case CONTRACT_FORM_DELETED: {
+      return {
+        ...state,
+        contractFormDeleted: action.payload,
+      };
+    }
     default:
       return state;
   }

src/shared/containers/Forms/selectors.ts

@@ -2,3 +2,5 @@
 export const contractFormsSelector = ({ forms }: any) => forms?.data || [];
 export const fetchingContractFormsSelector = ({ forms }: any) => forms?.fetchingContractForms || false;
 export { firstCompanyIdSelector as companyIdSelector } from '../Projects/selectors';
+export const deletingContractFormSelector = ({ forms }: any) => forms?.deletingContractForm || false;
+export const contractFormDeletedSelector = ({ forms }: any) => forms?.contractFormDeleted || null;