Fix employee list component, project list component, project list container and project row component

Author: Antonio Contreras LEMONCODE

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

@@ -24,7 +24,7 @@ export const EmployeeListComponent: React.FunctionComponent<Props> = ({
     'name',
   ]);
 
-  const renderContent = ({ itemName }) => {
+  const contentRender = ({ itemName }) => {
     return (
       <>
         ¿Seguro que quiere borrar a <strong>{itemName}</strong>?
@@ -46,7 +46,7 @@ export const EmployeeListComponent: React.FunctionComponent<Props> = ({
         searchPlaceholder: 'Buscar empleado',
         createButton: 'Nuevo empleado',
         deleteTitle: 'Eliminar Empleado',
-        deleteContent: props => renderContent(props),
+        deleteContent: props => contentRender(props),
         closeButton: 'Cancelar',
         acceptButton: 'Aceptar',
       }}

src/pods/project-list/components/project-row.component.tsx

@@ -9,6 +9,7 @@ import IconButton from '@material-ui/core/IconButton';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { Project } from '../project-list.vm';
+import { Lookup } from 'common/models';
 
 type Props = RowRendererProps<Project>;
 
@@ -17,6 +18,10 @@ export const ProjectRowComponent: React.FunctionComponent<Props> = ({
   onEdit,
   onDelete,
 }) => {
+  const projectToDeleted: Lookup = {
+    id: row.id,
+    name: row.projectName,
+  };
   return (
     <RowComponent>
       <CellComponent>
@@ -30,7 +35,7 @@ export const ProjectRowComponent: React.FunctionComponent<Props> = ({
         <IconButton onClick={() => onEdit(row.id)}>
           <EditIcon />
         </IconButton>
-        <IconButton onClick={() => onDelete(row)}>
+        <IconButton onClick={() => onDelete(projectToDeleted)}>
           <DeleteIcon />
         </IconButton>
       </CellComponent>

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

@@ -11,16 +11,27 @@ interface Props {
   projectList: Project[];
   onCreate: () => void;
   onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
 }
 
 export const ProjectListComponent: React.FunctionComponent<Props> = ({
   projectList,
   onCreate,
   onEdit,
+  onDelete,
 }) => {
   const { filteredList, onSearch, search } = useSearchBar(projectList, [
     'projectName',
   ]);
+
+  const contentRender = ({ itemName }) => {
+    return (
+      <>
+        ¿Seguro que quiere borrar a <strong>{itemName}</strong>?
+      </>
+    );
+  };
+
   return (
     <TableContainer
       columns={[
@@ -36,9 +47,14 @@ export const ProjectListComponent: React.FunctionComponent<Props> = ({
       )}
       onCreate={onCreate}
       onEdit={onEdit}
+      onDelete={onDelete}
       labels={{
         searchPlaceholder: 'Buscar proyecto',
         createButton: 'Nuevo proyecto',
+        deleteTitle: 'Eliminar Proyecto',
+        deleteContent: props => contentRender(props),
+        closeButton: 'Cancelar',
+        acceptButton: 'Aceptar',
       }}
       enableSearch={true}
       search={search}

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

@@ -33,6 +33,16 @@ export const ProjectListContainer: React.FunctionComponent = () => {
     history.push(routes.editProject(id));
   };
 
+  const handleDelete = async (id: string) => {
+    const errorMessage = 'Error al eliminar un proyecto';
+    try {
+      const isDeleted = await trackPromise(deleteProject(id));
+      isDeleted ? onLoadProjectList() : showMessage(errorMessage, 'error');
+    } catch (error) {
+      error && showMessage(errorMessage, 'error');
+    }
+  };
+
   React.useEffect(() => {
     onLoadProjectList();
   }, []);
@@ -42,6 +52,7 @@ export const ProjectListContainer: React.FunctionComponent = () => {
       projectList={projectes}
       onCreate={handleCreate}
       onEdit={handleEdit}
+      onDelete={handleDelete}
     />
   );
 };