Create employee list and project list components

Author: Antonio Contreras LEMONCODE

src/core/router/router.component.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 import { HashRouter, Switch, Route } from 'react-router-dom';
 import { AuthRouterComponent } from 'common-app/auth';
 import { routes } from './routes';
-import { LoginScene, SubmoduleListScene } from 'scenes';
+import {
+  LoginScene,
+  SubmoduleListScene,
+  ProjectListScene,
+  EmployeeListScene,
+} from 'scenes';
 
 export const RouterComponent: React.FunctionComponent = () => {
   return (
@@ -18,6 +23,16 @@ export const RouterComponent: React.FunctionComponent = () => {
           path={routes.submoduleList}
           component={SubmoduleListScene}
         />
+        <Route
+          exact={true}
+          path={routes.projects}
+          component={ProjectListScene}
+        />
+        <Route
+          exact={true}
+          path={routes.employees}
+          component={EmployeeListScene}
+        />
       </Switch>
     </HashRouter>
   );

src/core/router/routes.ts

@@ -1,7 +1,6 @@
 interface BaseRoutes {
   root: string;
   login: string;
-  time: string;
   submoduleList: string;
   projects: string;
   editProject: string;
@@ -12,12 +11,11 @@ interface BaseRoutes {
 const baseRoutes: BaseRoutes = {
   root: '/',
   login: '/login',
-  time: '/time',
   submoduleList: '/submodule-list',
-  projects: './projects',
-  editProject: './projects/:id',
-  employees: './employees',
-  editEmployee: './employees/:id',
+  projects: '/projects',
+  editProject: '/projects/:id',
+  employees: '/employees',
+  editEmployee: '/employees/:id',
 };
 
 type Routes = Omit<BaseRoutes, 'editProject' | 'editEmployee'>;

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

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

src/pods/employee-list/index.ts

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

src/pods/login/login.container.tsx

@@ -21,7 +21,7 @@ export const LoginContainer: React.FunctionComponent = () => {
       const userSession = mapLoginResponseToUserSession();
       userSession.userName = 'Admin';
       setUserSession(userSession);
-      history.push(routes.time);
+      history.push(routes.submoduleList);
     } else {
       showMessage(literals.messages.errors.invalidLogin, 'error');
     }

src/pods/project-list/index.ts

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

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

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

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

@@ -1,5 +1,33 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { routes } from 'core/router';
 
-export const SumoduleListComponent: React.FC = () => {
-  return <h1>Hello Submodule List</h1>;
+export const SumoduleListComponent: React.FunctionComponent = () => {
+  const history = useHistory();
+  const goToProjectList = (
+    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    history.push({
+      pathname: routes.projects,
+    });
+  };
+
+  const goToEmployeeList = (
+    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    history.push({
+      pathname: routes.employees,
+    });
+  };
+
+  return (
+    // Pending to use dashboard component
+    <>
+      <h1>Hello Submodule List</h1>
+      <p onClick={goToProjectList}>Go to Project list page</p>
+      <p onClick={goToEmployeeList}>Go to Employee list page</p>
+    </>
+  );
 };

src/scenes/employee-list.scene.tsx

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

src/scenes/index.ts

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