Refactor components

Author: Antonio Contreras LEMONCODE

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

@@ -1,5 +1,26 @@
 import React from 'react';
+import { Formik, Form } from 'formik';
+import { TextFieldComponent, CheckboxComponent } from 'common/components';
+import { CommandFooterComponent } from '../../../common-app/command-footer';
 
 export const DataComponent: React.FunctionComponent = () => {
-  return <h1>Hello Data Component</h1>;
+  return (
+    <Formik initialValues={{}} enableReinitialize={true} onSubmit={console.log}>
+      {() => (
+        <Form>
+          <TextFieldComponent
+            label="Id"
+            name="id"
+            InputProps={{
+              readOnly: true,
+            }}
+          />
+          <TextFieldComponent label="Nombre" name="name" />
+          <TextFieldComponent label="Id Externo" name="externalId" />
+          <TextFieldComponent label="Comentarios" name="comments" multiline />
+          <CheckboxComponent label="Activo" name="isActive" color="primary" />
+        </Form>
+      )}
+    </Formik>
+  );
 };

src/pods/project/project.component.tsx

@@ -11,15 +11,21 @@ import {
   ReportComponent,
 } from './components';
 
-export const ProjectComponent: React.FunctionComponent = () => {
+interface Props {
+  isEditMode: boolean;
+}
+
+export const ProjectComponent: React.FunctionComponent<Props> = ({
+  isEditMode,
+}) => {
   const [tab, setTab] = React.useState(0);
   return (
     <>
       <AppBar position="static">
         <TabListComponent value={tab} onChange={setTab}>
           <TabComponent label="Datos" />
-          <TabComponent label="Empleados" />
-          <TabComponent label="Informes" />
+          <TabComponent label="Empleados" disabled={isEditMode} />
+          <TabComponent label="Informes" disabled={isEditMode} />
         </TabListComponent>
       </AppBar>
       <TabPanelComponent value={tab} index={0}>

src/pods/project/project.container.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { ProjectComponent } from './project.component';
+import { useParams } from 'react-router-dom';
 
 export const ProjectContainer: React.FunctionComponent = () => {
-  return <ProjectComponent />;
+  const { id } = useParams();
+  const [isEditMode, setIsEditMode] = React.useState<boolean>(false);
+
+  return <ProjectComponent isEditMode={isEditMode} />;
 };