Feature/create basic pods and new routes

src/core/router/router.component.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 import { HashRouter, Switch, Route } from 'react-router-dom';
 import { AuthRouterComponent } from 'common-app/auth';
 import { routes } from './routes';
-import { LoginScene, TimeScene } from 'scenes';
+import {
+  LoginScene,
+  SubmoduleListScene,
+  ProjectListScene,
+  EmployeeListScene,
+  ProjectScene,
+  EmployeeScene,
+} from 'scenes';
 
 export const RouterComponent: React.FunctionComponent = () => {
   return (
@@ -15,8 +22,28 @@ export const RouterComponent: React.FunctionComponent = () => {
         />
         <AuthRouterComponent
           exact={true}
-          path={routes.time}
-          component={TimeScene}
+          path={routes.submoduleList}
+          component={SubmoduleListScene}
+        />
+        <Route
+          exact={true}
+          path={routes.projects}
+          component={ProjectListScene}
+        />
+        <Route
+          exact={true}
+          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,17 +1,36 @@
+import { generatePath } from 'react-router-dom';
+
 interface BaseRoutes {
   root: string;
   login: string;
-  time: string;
+  submoduleList: string;
+  projects: string;
+  editProject: string;
+  employees: string;
+  editEmployee: string;
 }
 
 const baseRoutes: BaseRoutes = {
   root: '/',
   login: '/login',
-  time: '/time',
+  submoduleList: '/submodule-list',
+  projects: '/projects',
+  editProject: '/projects/:id',
+  employees: '/employees',
+  editEmployee: '/employees/:id',
 };
 
-type Routes = Omit<BaseRoutes, ''>;
+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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { routes } from 'core/router';
+
+export const EmployeeListComponent: React.FunctionComponent = () => {
+  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-list/index.ts

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

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

src/pods/project/index.ts

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

src/pods/project/project.component.tsx

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

src/pods/submodule-list/index.ts

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { routes } from 'core/router';
+
+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>
+    </>
+  );
+};