Implement delete employee

Author: Antonio Contreras LEMONCODE

src/pods/employee-list/api/employee-list.api.ts

@@ -1,6 +1,13 @@
 import { Employee } from './employee-list.api-model';
 import { mockEmployeeList } from './employee-list.mock-data';
 
+let employeeList = [...mockEmployeeList];
+
 export const getEmployeeList = async (): Promise<Employee[]> => {
-  return mockEmployeeList;
+  return employeeList;
+};
+
+export const deleteEmployee = async (id: string): Promise<boolean> => {
+  employeeList = employeeList.filter(e => e.id !== id);
+  return true;
 };

src/pods/employee-list/employee-list.component.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { routes } from 'core/router';
 import {
   TableContainer,
   RowRendererProps,
@@ -12,16 +11,26 @@ interface Props {
   employeeList: Employee[];
   onCreate: () => void;
   onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
 }
 
 export const EmployeeListComponent: React.FunctionComponent<Props> = ({
   employeeList,
   onCreate,
   onEdit,
+  onDelete,
 }) => {
   const { filteredList, onSearch, search } = useSearchBar(employeeList, [
     'name',
   ]);
+
+  const renderContent = ({ itemName }) => {
+    return (
+      <div>
+        ¿Seguro que quiere borrar a <strong>{itemName}</strong>?
+      </div>
+    );
+  };
   return (
     <>
       <TableContainer
@@ -32,9 +41,14 @@ export const EmployeeListComponent: React.FunctionComponent<Props> = ({
         )}
         onCreate={onCreate}
         onEdit={onEdit}
+        onDelete={onDelete}
         labels={{
-          searchPlaceholder: 'Buscar empleados',
+          searchPlaceholder: 'Buscar empleado',
           createButton: 'Nuevo empleado',
+          deleteTitle: 'Eliminar Empleado',
+          deleteContent: props => renderContent(props),
+          closeButton: 'Cancelar',
+          acceptButton: 'Aceptar',
         }}
         enableSearch={true}
         search={search}

src/pods/employee-list/employee-list.container.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EmployeeListComponent } from './employee-list.component';
-import { getEmployeeList } from './api';
+import { getEmployeeList, deleteEmployee } from './api';
 import { Employee } from './employee-list.vm';
 import { useSnackbarContext } from 'common/components';
 import { trackPromise } from 'react-promise-tracker';
@@ -32,6 +32,16 @@ export const EmployeeListContainer: React.FunctionComponent = () => {
     history.push(routes.editEmployee(id));
   };
 
+  const handleDelete = async (id: string) => {
+    const errorMessage = 'Error al eliminar un empleado';
+    try {
+      const isDelete = await trackPromise(deleteEmployee(id));
+      isDelete ? onLoadEmployeeList() : showMessage(errorMessage, 'error');
+    } catch (error) {
+      error && showMessage(errorMessage, 'error');
+    }
+  };
+
   React.useEffect(() => {
     onLoadEmployeeList();
   }, []);
@@ -41,6 +51,7 @@ export const EmployeeListContainer: React.FunctionComponent = () => {
       employeeList={employees}
       onCreate={handleCreate}
       onEdit={handleEdit}
+      onDelete={handleDelete}
     />
   );
 };