Client - add URL interceptors to simplify routes definition

SamR1 · Jan 31, 2020 · b862a77 · b862a77
1 parent 34614d5
commit b862a77
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 38 deletions.
diff --git a/fittrackee_client/src/components/App.jsx b/fittrackee_client/src/components/App.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 
 import './App.css'
 // import Admin from './Admin'
@@ -14,7 +14,6 @@ import Profile from './User/Profile'
 import ProfileEdit from './User/ProfileEdit'
 import Statistics from './Statistics'
 import UserForm from './User/UserForm'
-import { isLoggedIn } from '../utils'
 
 export default class App extends React.Component {
   constructor(props) {
@@ -27,50 +26,20 @@ export default class App extends React.Component {
       <div className="App">
         <NavBar />
         <Switch>
-          <Route
-            exact
-            path="/"
-            render={() =>
-              isLoggedIn() ? <Dashboard /> : <Redirect to="/login" />
-            }
-          />
+          <Route exact path="/" component={Dashboard} />
           <Route
             exact
             path="/register"
-            render={() =>
-              isLoggedIn() ? (
-                <Redirect to="/" />
-              ) : (
-                <UserForm formType={'register'} />
-              )
-            }
+            render={() => <UserForm formType={'register'} />}
           />
           <Route
             exact
             path="/login"
-            render={() =>
-              isLoggedIn() ? (
-                <Redirect to="/" />
-              ) : (
-                <UserForm formType={'login'} />
-              )
-            }
+            render={() => <UserForm formType={'login'} />}
           />
           <Route exact path="/logout" component={Logout} />
-          <Route
-            exact
-            path="/profile/edit"
-            render={() =>
-              isLoggedIn() ? <ProfileEdit /> : <UserForm formType={'login'} />
-            }
-          />
-          <Route
-            exact
-            path="/profile"
-            render={() =>
-              isLoggedIn() ? <Profile /> : <UserForm formType={'login'} />
-            }
-          />
+          <Route exact path="/profile/edit" component={ProfileEdit} />
+          <Route exact path="/profile" component={Profile} />
           <Route exact path="/activities/history" component={Activities} />
           <Route exact path="/activities/statistics" component={Statistics} />
           <Route path="/activities" component={Activity} />

diff --git a/fittrackee_client/src/index.js b/fittrackee_client/src/index.js
@@ -13,8 +13,9 @@ import Root from './components/Root'
 import registerServiceWorker from './registerServiceWorker'
 import createRootReducer from './reducers'
 import { loadProfile } from './actions/user'
+import { historyEnhancer } from './utils/history'
 
-export const history = createBrowserHistory()
+export const history = historyEnhancer(createBrowserHistory())
 
 history.listen(() => {
   window.scrollTo(0, 0)

diff --git a/fittrackee_client/src/utils/history.js b/fittrackee_client/src/utils/history.js
@@ -0,0 +1,26 @@
+const pathInterceptor = toPath => {
+  if (
+    !window.localStorage.authToken &&
+    !['/login', '/register'].includes(toPath.pathname)
+  ) {
+    toPath.pathname = '/login'
+  }
+  if (
+    window.localStorage.authToken &&
+    ['/login', '/register'].includes(toPath.pathname)
+  ) {
+    toPath.pathname = '/'
+  }
+  return toPath
+}
+
+export const historyEnhancer = originalHistory => {
+  originalHistory.location = pathInterceptor(originalHistory.location)
+  return {
+    ...originalHistory,
+    push: (path, ...args) =>
+      originalHistory.push(pathInterceptor(path), ...args),
+    replace: (path, ...args) =>
+      originalHistory.replace(pathInterceptor(path), ...args),
+  }
+}