Create project list component, project list container, project list mappers, project row component and fix others components

Author: Antonio Contreras LEMONCODE

src/pods/project-list/components/index.ts

@@ -0,0 +1 @@
+export * from './project-row.component';

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  RowRendererProps,
+  RowComponent,
+  CellComponent,
+} from 'common/components';
+import Checkbox from '@material-ui/core/Checkbox';
+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';
+
+type Props = RowRendererProps<Project>;
+
+export const ProjectRowComponent: React.FunctionComponent<Props> = ({
+  row,
+  onEdit,
+  onDelete,
+}) => {
+  return (
+    <RowComponent>
+      <CellComponent>
+        <Checkbox checked={row.active} disabled />
+      </CellComponent>
+      <CellComponent>{row.code}</CellComponent>
+      <CellComponent>{row.projectName}</CellComponent>
+      <CellComponent>{row.lastDateIncurred}</CellComponent>
+      <CellComponent>
+        {row.creationDate}
+        <IconButton onClick={() => onEdit(row.id)}>
+          <EditIcon />
+        </IconButton>
+        <IconButton onClick={() => onDelete(row)}>
+          <DeleteIcon />
+        </IconButton>
+      </CellComponent>
+    </RowComponent>
+  );
+};

src/pods/project-list/index.ts

@@ -1 +1 @@
-export * from './project-list.component';
+export * from './project-list.container';

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

@@ -1,21 +1,44 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { routes } from 'core/router';
+import {
+  TableContainer,
+  RowRendererProps,
+  useSearchBar,
+} from 'common/components';
+import { Project } from './project-list.vm';
+import { ProjectRowComponent } from './components';
 
-export const ProjectListComponent: React.FunctionComponent = () => {
-  const history = useHistory();
-  const goToProject = (
-    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>
-  ) => {
-    event.preventDefault();
-    history.push({
-      pathname: routes.editProject('1'),
-    });
-  };
+interface Props {
+  projectList: Project[];
+}
+
+export const ProjectListComponent: React.FunctionComponent<Props> = ({
+  projectList,
+}) => {
+  const { filteredList, onSearch, search } = useSearchBar(projectList, [
+    'projectName',
+  ]);
   return (
-    <>
-      <h1>Hello Project list component</h1>
-      <p onClick={goToProject}>Go to edit project component</p>
-    </>
+    <TableContainer
+      columns={[
+        'Activo',
+        'Código',
+        'Proyecto',
+        'Fecha Ultimo incurrido',
+        'Fecha creación',
+      ]}
+      rows={filteredList}
+      rowRenderer={(rowProps: RowRendererProps<Project>) => (
+        <ProjectRowComponent {...rowProps} />
+      )}
+      labels={{
+        searchPlaceholder: 'Buscar proyecto',
+        createButton: 'Nuevo proyecto',
+      }}
+      enableSearch={true}
+      search={search}
+      onSearch={onSearch}
+      enablePagination={true}
+      pageSize={5}
+    />
   );
 };

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ProjectListComponent } from './project-list.component';
+import { getProjectList, deleteProject } from './api';
+import { Project } from './project-list.vm';
+import { useSnackbarContext } from 'common/components';
+import { trackPromise } from 'react-promise-tracker';
+import { mapProjectLIstFromApiToVm } from './project-list.mappers';
+import { routes } from 'core/router';
+import { useHistory } from 'react-router-dom';
+
+export const ProjectListContainer: React.FunctionComponent = () => {
+  const [projectes, setProjects] = React.useState<Project[]>([]);
+  const { showMessage } = useSnackbarContext();
+  const history = useHistory();
+
+  const onLoadProjectList = async () => {
+    try {
+      const apiProjectList = await trackPromise(getProjectList());
+      const viewModelProjectList = mapProjectLIstFromApiToVm(apiProjectList);
+      setProjects(viewModelProjectList);
+    } catch (error) {
+      error &&
+        showMessage('Ha ocurrido un error al cargar los proyectos', 'error');
+    }
+  };
+
+  React.useEffect(() => {
+    onLoadProjectList();
+  }, []);
+
+  return <ProjectListComponent projectList={projectes} />;
+};

src/pods/project-list/project-list.mappers.ts

@@ -0,0 +1,14 @@
+import { mapToCollection } from 'common/mappers';
+import * as apiModel from './api/project-list.api-model';
+import * as viewModel from './project-list.vm';
+
+const mapProjectFromApiToVm = (
+  project: apiModel.Project
+): viewModel.Project => ({
+  ...project,
+});
+
+export const mapProjectLIstFromApiToVm = (
+  projectList: apiModel.Project[]
+): viewModel.Project[] =>
+  mapToCollection(projectList, p => mapProjectFromApiToVm(p));

src/pods/project-list/project-list.vm.ts

@@ -0,0 +1,8 @@
+export interface Project {
+  id: string;
+  active: boolean;
+  code: string;
+  projectName: string;
+  lastDateIncurred: string;
+  creationDate: string;
+}

src/scenes/project-list.scene.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { AppLayout } from 'layouts';
-import { ProjectListComponent } from 'pods/project-list';
+import { ProjectListContainer } from 'pods/project-list';
 
 export const ProjectListScene: React.FunctionComponent = () => {
   return (
     <AppLayout>
-      <ProjectListComponent />
+      <ProjectListContainer />
     </AppLayout>
   );
 };