Refactor components

Author: Antonio Contreras LEMONCODE

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

@@ -1,3 +1,12 @@
+export interface Employee {
+  id: string;
+  name: string;
+  email: string;
+  isActive: boolean;
+  temporalKey: string;
+  projects: ProjectSummary[];
+}
+
 export interface ProjectSummary {
   id: string;
   isAssigned: boolean;

src/pods/employee/api/employee.api.ts

@@ -1,8 +1,6 @@
-import { ProjectSummary } from './employee.api-model';
-import { mockProjectSummaryList } from './employee.mock-data';
+import { Employee } from './employee.api-model';
+import { mockEmployee } from './employee.mock-data';
 
-const projectList = [...mockProjectSummaryList];
-
-export const getProjectSummary = async (): Promise<ProjectSummary[]> => {
-  return projectList;
+export const getEmployeeById = async (id: string): Promise<Employee> => {
+  return mockEmployee;
 };

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

@@ -1,6 +1,6 @@
-import { ProjectSummary } from './employee.api-model';
+import { Employee, ProjectSummary } from './employee.api-model';
 
-export const mockProjectSummaryList: ProjectSummary[] = [
+const mockProjectSummaryList: ProjectSummary[] = [
   {
     id: '1',
     isAssigned: true,
@@ -22,3 +22,12 @@ export const mockProjectSummaryList: ProjectSummary[] = [
     employeeName: 'Baja',
   },
 ];
+
+export const mockEmployee: Employee = {
+  id: '1',
+  name: 'Prueba Nombre',
+  email: 'prueba@email.com',
+  isActive: true,
+  temporalKey: 'clave',
+  projects: mockProjectSummaryList,
+};

src/pods/employee/components/data.component.tsx

@@ -4,60 +4,71 @@ import { TextFieldComponent, CheckboxComponent } from 'common/components';
 import { CommandFooterComponent } from '../../../common-app/command-footer';
 import * as classes from './data.styles';
 import { cx } from 'emotion';
+import { Employee } from '../employee.vm';
 
 interface Props {
+  employee: Employee;
   className?: string;
+  onSave: (employee: Employee) => void;
   isEditMode: boolean;
   onCancel: () => void;
 }
 
 export const DataComponent: React.FunctionComponent<Props> = ({
+  employee,
   className,
+  onSave,
   isEditMode,
   onCancel,
 }) => {
-  console.log(isEditMode);
+  console.log(employee);
   return (
     <Formik
-      initialValues={{}}
+      initialValues={employee}
       enableReinitialize={true}
-      onSubmit={console.log}
-      validate={Promise.resolve}
+      onSubmit={onSave}
     >
-      {({ values }) => (
+      {() => (
         <Form className={cx(classes.form({ isEditMode }), className)}>
           <TextFieldComponent
             label="Id"
             name="id"
             className={classes.id}
-            disabled
+            InputProps={{
+              readOnly: true,
+            }}
+            value={employee.id}
           />
           {!isEditMode && (
             <TextFieldComponent
               label="Clave Temporal"
               name="temporalKey"
               className={classes.temporalKey}
               disabled
+              value={employee.temporalKey}
             />
           )}
           <TextFieldComponent
             label="Nombre"
             name="name"
             className={classes.name}
             disabled
+            value={employee.name}
           />
           <TextFieldComponent
             label="Email"
             name="email"
             className={classes.email}
             disabled
+            value={employee.email}
           />
           <CheckboxComponent
-            name="active"
+            name="isActive"
             label="Activo"
             color="primary"
             className={classes.isActive}
             disabled
+            value={employee.isActive}
           />
           <CommandFooterComponent
             onCancel={onCancel}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import Button from '@material-ui/core/Button';
 import { Formik, Form } from 'formik';
 import { SelectComponent } from 'common/components';
 import * as classes from './report.styles';
@@ -9,18 +8,19 @@ import { cx } from 'emotion';
 interface Props {
   className?: string;
   onCancel: () => void;
+  onGenerateExcel: () => void;
 }
 
 export const ReportComponent: React.FunctionComponent<Props> = ({
   className,
   onCancel,
+  onGenerateExcel,
 }) => {
   return (
     <Formik
       initialValues={{}}
       enableReinitialize={true}
-      onSubmit={console.log}
-      validate={Promise.resolve}
+      onSubmit={onGenerateExcel}
     >
       {({ values }) => (
         <Form className={cx(classes.form, className)}>

src/pods/employee/employee.component.tsx

@@ -5,44 +5,54 @@ import {
   TabPanelComponent,
 } from 'common/components';
 import { DataComponent, ProjectComponent, ReportComponent } from './components';
-import { ProjectSummary } from './employee.vm';
+import { Employee } from './employee.vm';
 import * as classes from './employee.styles';
 
 interface Props {
-  projectSummaryList: ProjectSummary[];
+  employee: Employee;
   isEditMode: boolean;
+  onSave: (employee: Employee) => void;
   onCancel: () => void;
+  onGenerateExcel: () => void;
 }
 
 export const EmployeeComponent: React.FunctionComponent<Props> = ({
-  projectSummaryList,
+  employee,
   isEditMode,
+  onSave,
   onCancel,
+  onGenerateExcel,
 }) => {
   const [tab, setTab] = React.useState(0);
   return (
     <>
       <TabListComponent value={tab} onChange={setTab}>
         <TabComponent label="Datos" />
-        <TabComponent label="Proyectos" />
-        <TabComponent label="Informes" />
+        <TabComponent label="Proyectos" disabled={!isEditMode} />
+        <TabComponent label="Informes" disabled={!isEditMode} />
       </TabListComponent>
       <TabPanelComponent value={tab} index={0}>
         <DataComponent
+          employee={employee}
           className={classes.root}
+          onSave={onSave}
           isEditMode={isEditMode}
           onCancel={onCancel}
         />
       </TabPanelComponent>
       <TabPanelComponent value={tab} index={1}>
         <ProjectComponent
-          projectSummaryList={projectSummaryList}
+          projectSummaryList={employee.projects}
           className={classes.root}
           onCancel={onCancel}
         />
       </TabPanelComponent>
       <TabPanelComponent value={tab} index={2}>
-        <ReportComponent className={classes.root} onCancel={onCancel} />
+        <ReportComponent
+          className={classes.root}
+          onGenerateExcel={onGenerateExcel}
+          onCancel={onCancel}
+        />
       </TabPanelComponent>
     </>
   );

src/pods/employee/employee.container.tsx

@@ -1,46 +1,60 @@
 import React from 'react';
 import { EmployeeComponent } from './employee.component';
-import { ProjectSummary } from './employee.vm';
+import { Employee, createEmptyEmployee } from './employee.vm';
 import { useSnackbarContext } from 'common/components';
 import { trackPromise } from 'react-promise-tracker';
-import { getProjectSummary } from './api';
-import { mapProjectSummaryListFromApiToVm } from './employee.mappers';
+import { getEmployeeById } from './api';
+import { mapEmployeeFromApiToVm } from './employee.mappers';
 import { useParams } from 'react-router-dom';
 import { isEditModeHelper } from 'common/helpers';
 
 export const EmployeeContainer: React.FunctionComponent = () => {
   const { id } = useParams();
-  const [projectSummaryList, setProjectSummaryList] = React.useState<
-    ProjectSummary[]
-  >([]);
+  const [employee, setEmployee] = React.useState<Employee>(
+    createEmptyEmployee()
+  );
+  const [isEditMode, setIsEditMode] = React.useState<boolean>(false);
   const { showMessage } = useSnackbarContext();
 
   const onLoadProjectSummary = async () => {
     try {
-      const apiEmployeeSummary = await trackPromise(getProjectSummary());
-      const viewModelEmployeeSummary = mapProjectSummaryListFromApiToVm(
-        apiEmployeeSummary
-      );
-      setProjectSummaryList(viewModelEmployeeSummary);
+      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');
     }
   };
 
+  const handleSave = (employee: Employee) => {
+    console.log('Guardado');
+  };
+
   const handleCancel = () => {
     history.back();
   };
 
+  const handleGenerateExcel = () => {
+    // Pending to create real implementation
+    console.log('Excel creado');
+  };
+
   React.useEffect(() => {
-    onLoadProjectSummary();
+    const isEditMode = isEditModeHelper(id);
+    setIsEditMode(isEditMode);
+    if (isEditMode) {
+      onLoadProjectSummary();
+    }
   }, []);
 
   return (
     <EmployeeComponent
-      projectSummaryList={projectSummaryList}
-      isEditMode={isEditModeHelper(id)}
+      employee={employee}
+      isEditMode={isEditMode}
+      onSave={handleSave}
       onCancel={handleCancel}
+      onGenerateExcel={handleGenerateExcel}
     />
   );
 };

src/pods/employee/employee.mappers.ts

@@ -8,7 +8,18 @@ const mapProjectSummaryFromApiToVm = (
   ...projectSummary,
 });
 
-export const mapProjectSummaryListFromApiToVm = (
+const mapProjectSummaryListFromApiToVm = (
   projectSummary: apiModel.ProjectSummary[]
 ): viewModel.ProjectSummary[] =>
   mapToCollection(projectSummary, ps => mapProjectSummaryFromApiToVm(ps));
+
+export const mapEmployeeFromApiToVm = (
+  employee: apiModel.Employee
+): viewModel.Employee => {
+  return Boolean(employee)
+    ? {
+        ...employee,
+        projects: mapProjectSummaryListFromApiToVm(employee.projects),
+      }
+    : viewModel.createEmptyEmployee();
+};

src/pods/employee/employee.vm.ts

@@ -1,5 +1,23 @@
+export interface Employee {
+  id: string;
+  name: string;
+  email: string;
+  isActive: boolean;
+  temporalKey: string;
+  projects: ProjectSummary[];
+}
+
 export interface ProjectSummary {
   id: string;
   isAssigned: boolean;
   employeeName: string;
 }
+
+export const createEmptyEmployee = (): Employee => ({
+  id: '',
+  name: '',
+  email: '',
+  isActive: false,
+  temporalKey: '',
+  projects: [],
+});