Fix components

Author: Antonio Contreras LEMONCODE

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

@@ -4,18 +4,16 @@ import {
   RowComponent,
   CellComponent,
 } from 'common/components';
-import { Employee } from '../employee-list.vm';
 import IconButton from '@material-ui/core/IconButton';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
+import { Employee } from '../employee-list.vm';
 
 type Props = RowRendererProps<Employee>;
 
-export const EmployeeRowComponent: React.FunctionComponent<Props> = ({
-  row,
-  onEdit,
-  onDelete,
-}) => {
+export const EmployeeRowComponent: React.FunctionComponent<Props> = props => {
+  const { row, onEdit, onDelete } = props;
+
   return (
     <RowComponent>
       <CellComponent>{row.active}</CellComponent>

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

@@ -14,48 +14,43 @@ interface Props {
   onDelete: (id: string) => void;
 }
 
-export const EmployeeListComponent: React.FunctionComponent<Props> = ({
-  employeeList,
-  onCreate,
-  onEdit,
-  onDelete,
-}) => {
+export const EmployeeListComponent: React.FunctionComponent<Props> = props => {
+  const { employeeList, onCreate, onEdit, onDelete } = props;
   const { filteredList, onSearch, search } = useSearchBar(employeeList, [
     'name',
   ]);
 
   const renderContent = ({ itemName }) => {
     return (
-      <div>
+      <>
         ¿Seguro que quiere borrar a <strong>{itemName}</strong>?
-      </div>
+      </>
     );
   };
+
   return (
-    <>
-      <TableContainer
-        columns={['Activo', 'Id', 'Nombre', 'Email', 'Fecha último incurrido']}
-        rows={filteredList}
-        rowRenderer={(rowProps: RowRendererProps<Employee>) => (
-          <EmployeeRowComponent {...rowProps} />
-        )}
-        onCreate={onCreate}
-        onEdit={onEdit}
-        onDelete={onDelete}
-        labels={{
-          searchPlaceholder: 'Buscar empleado',
-          createButton: 'Nuevo empleado',
-          deleteTitle: 'Eliminar Empleado',
-          deleteContent: props => renderContent(props),
-          closeButton: 'Cancelar',
-          acceptButton: 'Aceptar',
-        }}
-        enableSearch={true}
-        search={search}
-        onSearch={onSearch}
-        enablePagination={true}
-        pageSize={5}
-      />
-    </>
+    <TableContainer
+      columns={['Activo', 'Id', 'Nombre', 'Email', 'Fecha último incurrido']}
+      rows={filteredList}
+      rowRenderer={(rowProps: RowRendererProps<Employee>) => (
+        <EmployeeRowComponent {...rowProps} />
+      )}
+      onCreate={onCreate}
+      onEdit={onEdit}
+      onDelete={onDelete}
+      labels={{
+        searchPlaceholder: 'Buscar empleado',
+        createButton: 'Nuevo empleado',
+        deleteTitle: 'Eliminar Empleado',
+        deleteContent: props => renderContent(props),
+        closeButton: 'Cancelar',
+        acceptButton: 'Aceptar',
+      }}
+      enableSearch={true}
+      search={search}
+      onSearch={onSearch}
+      enablePagination={true}
+      pageSize={5}
+    />
   );
 };