Create onCancel and onSave function

Author: Antonio Contreras LEMONCODE

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

@@ -2,10 +2,21 @@ import React from 'react';
 import { Formik, Form } from 'formik';
 import { TextFieldComponent, CheckboxComponent } from 'common/components';
 import { CommandFooterComponent } from '../../../common-app/command-footer';
+import { Project } from '../project.vm';
 
-export const DataComponent: React.FunctionComponent = () => {
+interface Props {
+  project: Project;
+  onSave: (project: Project) => void;
+  onCancel: () => void;
+}
+
+export const DataComponent: React.FunctionComponent<Props> = ({
+  project,
+  onSave,
+  onCancel,
+}) => {
   return (
-    <Formik initialValues={{}} enableReinitialize={true} onSubmit={console.log}>
+    <Formik initialValues={project} enableReinitialize={true} onSubmit={onSave}>
       {() => (
         <Form>
           <TextFieldComponent
@@ -19,6 +30,7 @@ export const DataComponent: React.FunctionComponent = () => {
           <TextFieldComponent label="Id Externo" name="externalId" />
           <TextFieldComponent label="Comentarios" name="comments" multiline />
           <CheckboxComponent label="Activo" name="isActive" color="primary" />
+          <CommandFooterComponent onCancel={onCancel} />
         </Form>
       )}
     </Formik>

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

@@ -1,5 +1,14 @@
 import React from 'react';
+import { EmployeeSummary } from '../project.vm';
 
-export const EmployeeComponent: React.FunctionComponent = () => {
+interface Props {
+  employeeSummaryList: EmployeeSummary[];
+  onCancel: () => void;
+}
+
+export const EmployeeComponent: React.FunctionComponent<Props> = ({
+  employeeSummaryList,
+  onCancel,
+}) => {
   return <h1>Hello Employee Component</h1>;
 };

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

@@ -4,7 +4,13 @@ import { SelectComponent } from 'common/components';
 import { monthList } from 'common/constants';
 import { CommandFooterComponent } from 'common-app/command-footer';
 
-export const ReportComponent: React.FunctionComponent = () => {
+interface Props {
+  onCancel: () => void;
+}
+
+export const ReportComponent: React.FunctionComponent<Props> = ({
+  onCancel,
+}) => {
   return (
     <Formik initialValues={{}} enableReinitialize={true} onSubmit={console.log}>
       {() => (
@@ -27,7 +33,7 @@ export const ReportComponent: React.FunctionComponent = () => {
             disabled
           />
           <CommandFooterComponent
-            onCancel={console.log}
+            onCancel={onCancel}
             labels={{ saveButton: 'Generar', cancelButton: 'Cancelar' }}
           />
         </Form>

src/pods/project/project.component.tsx

@@ -10,13 +10,20 @@ import {
   EmployeeComponent,
   ReportComponent,
 } from './components';
+import { Project } from './project.vm';
 
 interface Props {
   isEditMode: boolean;
+  project: Project;
+  onSave: (project: Project) => void;
+  onCancel: () => void;
 }
 
 export const ProjectComponent: React.FunctionComponent<Props> = ({
   isEditMode,
+  project,
+  onSave,
+  onCancel,
 }) => {
   const [tab, setTab] = React.useState(0);
   return (
@@ -29,13 +36,16 @@ export const ProjectComponent: React.FunctionComponent<Props> = ({
         </TabListComponent>
       </AppBar>
       <TabPanelComponent value={tab} index={0}>
-        <DataComponent />
+        <DataComponent project={project} onCancel={onCancel} onSave={onSave} />
       </TabPanelComponent>
       <TabPanelComponent value={tab} index={1}>
-        <EmployeeComponent />
+        <EmployeeComponent
+          employeeSummaryList={project.employees}
+          onCancel={onCancel}
+        />
       </TabPanelComponent>
       <TabPanelComponent value={tab} index={2}>
-        <ReportComponent />
+        <ReportComponent onCancel={onCancel} />
       </TabPanelComponent>
     </>
   );

src/pods/project/project.container.tsx

@@ -25,6 +25,14 @@ export const ProjectContainer: React.FunctionComponent = () => {
     }
   };
 
+  const handleSave = (Project: Project) => {
+    console.log('Guardado');
+  };
+
+  const handleCancel = () => {
+    history.back();
+  };
+
   React.useEffect(() => {
     const isEditMode = isEditModeHelper(id);
     setIsEditMode(isEditMode);
@@ -33,5 +41,12 @@ export const ProjectContainer: React.FunctionComponent = () => {
     }
   }, []);
 
-  return <ProjectComponent isEditMode={isEditMode} />;
+  return (
+    <ProjectComponent
+      isEditMode={isEditMode}
+      project={project}
+      onSave={handleSave}
+      onCancel={handleCancel}
+    />
+  );
 };

src/pods/project/project.mapper.ts

@@ -4,13 +4,13 @@ import * as viewModel from './project.vm';
 
 const mapEmployeeSummaryFromApiToVm = (
   employeeSummary: apiModel.EmployeeSummary
-): viewModel.ProloyeeSummary => ({
+): viewModel.EmployeeSummary => ({
   ...employeeSummary,
 });
 
 const mapEmployeeSummaryListFromApiToVm = (
   employeeSummary: apiModel.EmployeeSummary[]
-): viewModel.ProloyeeSummary[] =>
+): viewModel.EmployeeSummary[] =>
   mapToCollection(employeeSummary, es => mapEmployeeSummaryFromApiToVm(es));
 
 export const mapProjectFromApiToVm = (

src/pods/project/project.vm.ts

@@ -4,10 +4,10 @@ export interface Project {
   externalId?: string;
   comments?: string;
   isActive: boolean;
-  employees: ProloyeeSummary[];
+  employees: EmployeeSummary[];
 }
 
-export interface ProloyeeSummary {
+export interface EmployeeSummary {
   id: string;
   isAssigned?: boolean;
   employeeName: string;