Create project and employee components and scenes

Author: Antonio Contreras LEMONCODE

src/core/router/router.component.tsx

@@ -7,6 +7,8 @@ import {
   SubmoduleListScene,
   ProjectListScene,
   EmployeeListScene,
+  ProjectScene,
+  EmployeeScene,
 } from 'scenes';
 
 export const RouterComponent: React.FunctionComponent = () => {
@@ -33,6 +35,16 @@ export const RouterComponent: React.FunctionComponent = () => {
           path={routes.employees}
           component={EmployeeListScene}
         />
+        <Route
+          exact={true}
+          path={routes.editProject()}
+          component={ProjectScene}
+        />
+        <Route
+          exact={true}
+          path={routes.editEmployee()}
+          component={EmployeeScene}
+        />
       </Switch>
     </HashRouter>
   );

src/core/router/routes.ts

@@ -1,3 +1,5 @@
+import { generatePath } from 'react-router-dom';
+
 interface BaseRoutes {
   root: string;
   login: string;
@@ -18,8 +20,17 @@ const baseRoutes: BaseRoutes = {
   editEmployee: '/employees/:id',
 };
 
-type Routes = Omit<BaseRoutes, 'editProject' | 'editEmployee'>;
+interface Routes extends Omit<BaseRoutes, 'editProject' | 'editEmployee'> {
+  editProject: (id?: string) => string;
+  editEmployee: (id?: string) => string;
+}
 
 export const routes: Routes = {
   ...baseRoutes,
+  editProject: id =>
+    id ? generatePath(baseRoutes.editProject, { id }) : baseRoutes.editProject,
+  editEmployee: id =>
+    id
+      ? generatePath(baseRoutes.editEmployee, { id })
+      : baseRoutes.editEmployee,
 };

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

@@ -1,5 +1,21 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { routes } from 'core/router';
 
 export const EmployeeListComponent: React.FunctionComponent = () => {
-  return <h1>Hello Employee list component</h1>;
+  const history = useHistory();
+  const goToEmployee = (
+    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    history.push({
+      pathname: routes.editEmployee('1'),
+    });
+  };
+  return (
+    <>
+      <h1>Hello Employee list component</h1>
+      <p onClick={goToEmployee}>Go to edit employee page</p>
+    </>
+  );
 };

src/pods/employee/employee.component.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const EmployeeComponent: React.FunctionComponent = () => {
+  return <h1>Hello Edit employee component</h1>;
+};

src/pods/employee/index.ts

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

src/pods/project/index.ts

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

src/pods/project/project.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { routes } from 'core/router';
+
+export const ProjectComponent: React.FunctionComponent = () => {
+  const history = useHistory();
+  const goToProject = (
+    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    history.push({
+      pathname: routes.editProject('1'),
+    });
+  };
+  return (
+    <>
+      <h1>Hello Edit project component</h1>
+      <p onClick={goToProject}>Go to edit project component</p>
+    </>
+  );
+};

src/scenes/employee.scene.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AppLayout } from 'layouts';
+import { EmployeeComponent } from 'pods/employee';
+
+export const EmployeeScene: React.FunctionComponent = () => {
+  return (
+    <AppLayout>
+      <EmployeeComponent />
+    </AppLayout>
+  );
+};

src/scenes/index.ts

@@ -2,3 +2,5 @@ export * from './login.scene';
 export * from './submodule-list.scene';
 export * from './project-list.scene';
 export * from './employee-list.scene';
+export * from './project.scene';
+export * from './employee.scene';

src/scenes/project.scene.tsx

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