Create project mappers and refactor others components

Author: Antonio Contreras LEMONCODE

src/pods/employee/employee.container.tsx

@@ -16,14 +16,14 @@ export const EmployeeContainer: React.FunctionComponent = () => {
   const [isEditMode, setIsEditMode] = React.useState<boolean>(false);
   const { showMessage } = useSnackbarContext();
 
-  const onLoadProjectSummary = async () => {
+  const onLoadEmployee = async () => {
     try {
       const apiEmployee = await trackPromise(getEmployeeById(id));
       const viewModelEmployee = mapEmployeeFromApiToVm(apiEmployee);
       setEmployee(viewModelEmployee);
     } catch (error) {
       error &&
-        showMessage('Ha ocurrido un error al cargar los proyectos', 'error');
+        showMessage('Ha ocurrido un error al cargar el empleado', 'error');
     }
   };
 
@@ -44,7 +44,7 @@ export const EmployeeContainer: React.FunctionComponent = () => {
     const isEditMode = isEditModeHelper(id);
     setIsEditMode(isEditMode);
     if (isEditMode) {
-      onLoadProjectSummary();
+      onLoadEmployee();
     }
   }, []);
 

src/pods/project/api/index.ts

@@ -0,0 +1 @@
+export * from './employee.api';

src/pods/project/api/project.api-model.ts

@@ -4,7 +4,7 @@ export interface Project {
   externalId?: string;
   comments?: string;
   isActive: boolean;
-  emplyees: EmployeeSummary[];
+  employees: EmployeeSummary[];
 }
 
 export interface EmployeeSummary {

src/pods/project/api/project.mock-data.ts

@@ -29,5 +29,5 @@ export const mockProject: Project = {
   isActive: true,
   comments: 'Comentario',
   externalId: '1234',
-  emplyees: mockEmployeeSummaryList,
+  employees: mockEmployeeSummaryList,
 };

src/pods/project/components/report.component.tsx

@@ -1,5 +1,37 @@
 import React from 'react';
+import { Formik, Form } from 'formik';
+import { SelectComponent } from 'common/components';
+import { monthList } from 'common/constants';
+import { CommandFooterComponent } from 'common-app/command-footer';
 
 export const ReportComponent: React.FunctionComponent = () => {
-  return <h1>Hello Report Component</h1>;
+  return (
+    <Formik initialValues={{}} enableReinitialize={true} onSubmit={console.log}>
+      {() => (
+        <Form>
+          <SelectComponent
+            name="month"
+            label="Mes"
+            items={monthList}
+            disabled
+          />
+          <SelectComponent
+            name="year"
+            label="Año"
+            items={[
+              {
+                id: '2020',
+                name: '2020',
+              },
+            ]}
+            disabled
+          />
+          <CommandFooterComponent
+            onCancel={console.log}
+            labels={{ saveButton: 'Generar', cancelButton: 'Cancelar' }}
+          />
+        </Form>
+      )}
+    </Formik>
+  );
 };

src/pods/project/project.component.tsx

@@ -24,8 +24,8 @@ export const ProjectComponent: React.FunctionComponent<Props> = ({
       <AppBar position="static">
         <TabListComponent value={tab} onChange={setTab}>
           <TabComponent label="Datos" />
-          <TabComponent label="Empleados" disabled={isEditMode} />
-          <TabComponent label="Informes" disabled={isEditMode} />
+          <TabComponent label="Empleados" disabled={!isEditMode} />
+          <TabComponent label="Informes" disabled={!isEditMode} />
         </TabListComponent>
       </AppBar>
       <TabPanelComponent value={tab} index={0}>

src/pods/project/project.container.tsx

@@ -1,10 +1,37 @@
 import React from 'react';
 import { ProjectComponent } from './project.component';
 import { useParams } from 'react-router-dom';
+import { useSnackbarContext } from 'common/components';
+import { getProjectById } from './api';
+import { trackPromise } from 'react-promise-tracker';
+import { mapProjectFromApiToVm } from './project.mapper';
+import { Project, createEmptyProject } from './project.vm';
+import { isEditModeHelper } from 'common/helpers';
 
 export const ProjectContainer: React.FunctionComponent = () => {
   const { id } = useParams();
+  const [project, setProject] = React.useState<Project>(createEmptyProject());
   const [isEditMode, setIsEditMode] = React.useState<boolean>(false);
+  const { showMessage } = useSnackbarContext();
+
+  const onLoadProject = async () => {
+    try {
+      const apiProject = await trackPromise(getProjectById(id));
+      const viewModelProject = mapProjectFromApiToVm(apiProject);
+      setProject(viewModelProject);
+    } catch (error) {
+      error &&
+        showMessage('Ha ocurrido un error al cargar el proyecto', 'error');
+    }
+  };
+
+  React.useEffect(() => {
+    const isEditMode = isEditModeHelper(id);
+    setIsEditMode(isEditMode);
+    if (isEditMode) {
+      onLoadProject();
+    }
+  }, []);
 
   return <ProjectComponent isEditMode={isEditMode} />;
 };

src/pods/project/project.mapper.ts

@@ -0,0 +1,25 @@
+import { mapToCollection } from 'common/mappers';
+import * as apiModel from './api/project.api-model';
+import * as viewModel from './project.vm';
+
+const mapEmployeeSummaryFromApiToVm = (
+  employeeSummary: apiModel.EmployeeSummary
+): viewModel.ProloyeeSummary => ({
+  ...employeeSummary,
+});
+
+const mapEmployeeSummaryListFromApiToVm = (
+  employeeSummary: apiModel.EmployeeSummary[]
+): viewModel.ProloyeeSummary[] =>
+  mapToCollection(employeeSummary, es => mapEmployeeSummaryFromApiToVm(es));
+
+export const mapProjectFromApiToVm = (
+  project: apiModel.Project
+): viewModel.Project => {
+  return Boolean(project)
+    ? {
+        ...project,
+        employees: mapEmployeeSummaryListFromApiToVm(project.employees),
+      }
+    : viewModel.createEmptyProject();
+};

src/pods/project/project.vm.ts

@@ -4,7 +4,7 @@ export interface Project {
   externalId?: string;
   comments?: string;
   isActive: boolean;
-  emplyees: ProloyeeSummary[];
+  employees: ProloyeeSummary[];
 }
 
 export interface ProloyeeSummary {
@@ -19,5 +19,5 @@ export const createEmptyProject = (): Project => ({
   externalId: '',
   comments: '',
   isActive: false,
-  emplyees: [],
+  employees: [],
 });