Merge pull request #3 from Lemoncode/feature/Create_Dashboard

Create Dashboard

Author: brauliodiez

src/pods/submodule-list/index.ts

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

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

@@ -1,33 +1,11 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { routes } from 'core/router';
+import { DashboardComponent, DashboardItemProps } from 'common/components';
 
-export const SumoduleListComponent: React.FunctionComponent = () => {
-  const history = useHistory();
-  const goToProjectList = (
-    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>
-  ) => {
-    event.preventDefault();
-    history.push({
-      pathname: routes.projects,
-    });
-  };
+interface Props {
+  items: DashboardItemProps[];
+}
 
-  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>
-    </>
-  );
+export const SumoduleListComponent: React.FunctionComponent<Props> = props => {
+  const { items } = props;
+  return <DashboardComponent items={items} />;
 };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SumoduleListComponent } from './submodule-list.component';
+import { DashboardItemProps } from 'common/components';
+import { routes } from 'core/router';
+import AccountBalanceIcon from '@material-ui/icons/AccountBalance';
+import GroupIcon from '@material-ui/icons/Group';
+
+export const SubmoduleListContainer: React.FunctionComponent = () => {
+  const items: DashboardItemProps[] = React.useMemo(
+    (): DashboardItemProps[] => [
+      {
+        title: 'Proyectos',
+        linkTo: routes.projects,
+        icon: AccountBalanceIcon,
+      },
+      {
+        title: 'Empleados',
+        linkTo: routes.employees,
+        icon: GroupIcon,
+      },
+    ],
+    []
+  );
+
+  return <SumoduleListComponent items={items} />;
+};

src/scenes/submodule-list.scene.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { AppLayout } from 'layouts';
-import { SumoduleListComponent } from 'pods/submodule-list';
+import { SubmoduleListContainer } from 'pods/submodule-list';
 
 export const SubmoduleListScene: React.FC = () => {
   return (
     <AppLayout>
-      <SumoduleListComponent />
+      <SubmoduleListContainer />
     </AppLayout>
   );
 };