From 4b472781161f1837b13b004f12b155886ce086d6 Mon Sep 17 00:00:00 2001
From: Eric Cheng <eric@concept-eng.co.nz>
Date: Wed, 9 Sep 2020 10:43:07 +1200
Subject: [PATCH] added appPath object to store application path fixing issue
 #8: user menu profile link not working

---
 src/app-navigation.js                   |  8 +++++---
 src/app-routes.js                       | 12 +++++++++---
 src/components/user-panel/user-panel.js |  8 ++++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/app-navigation.js b/src/app-navigation.js
index 989a647..19557ce 100644
--- a/src/app-navigation.js
+++ b/src/app-navigation.js
@@ -1,7 +1,9 @@
+import { appPath } from "./app-routes";
+
 export const navigation = [
   {
     text: 'Home',
-    path: '/home',
+    path: appPath.home,
     icon: 'home'
   },
   {
@@ -10,11 +12,11 @@ export const navigation = [
     items: [
       {
         text: 'Profile',
-        path: '/profile'
+        path: appPath.profile
       },
       {
         text: 'Tasks',
-        path: '/tasks'
+        path: appPath.tasks
       }
     ]
   }
diff --git a/src/app-routes.js b/src/app-routes.js
index bca0bc0..bed90a0 100644
--- a/src/app-routes.js
+++ b/src/app-routes.js
@@ -1,17 +1,23 @@
 import { withNavigationWatcher } from './contexts/navigation';
 import { HomePage, TasksPage, ProfilePage } from './pages';
 
+export const appPath = {
+  tasks: '/tasks',
+  profile: '/profile',
+  home: '/home,'
+}
+
 const routes = [
   {
-    path: '/tasks',
+    path: appPath.tasks,
     component: TasksPage
   },
   {
-    path: '/profile',
+    path: appPath.profile,
     component: ProfilePage
   },
   {
-    path: '/home',
+    path: appPath.home,
     component: HomePage
   }
 ];
diff --git a/src/components/user-panel/user-panel.js b/src/components/user-panel/user-panel.js
index 4959cdf..03d76a0 100644
--- a/src/components/user-panel/user-panel.js
+++ b/src/components/user-panel/user-panel.js
@@ -3,21 +3,25 @@ import ContextMenu, { Position } from 'devextreme-react/context-menu';
 import List from 'devextreme-react/list';
 import { useAuth } from '../../contexts/auth';
 import './user-panel.scss';
+import { useHistory } from 'react-router-dom';
+import { appPath } from '../../app-routes';
 
 export default function ({ menuMode }) {
   const { user, signOut } = useAuth();
+  const history = useHistory();
 
   const menuItems = useMemo(() => ([
     {
       text: 'Profile',
-      icon: 'user'
+      icon: 'user',
+      onClick: () => history.push(appPath.profile)
     },
     {
       text: 'Logout',
       icon: 'runner',
       onClick: signOut
     }
-  ]), [signOut]);
+  ]), [signOut, history]);
 
   return (
     <div className={'user-panel'}>