Refactor routes

Author: tduyng

src/routes/PrivateRoute.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  Route,
+  RouteProps,
+  Redirect,
+  RouteComponentProps,
+} from 'react-router-dom';
+import { connect } from 'react-redux';
+import { PATH } from 'src/constants/paths';
+
+interface ReduxProps {
+  isAuthenticated: boolean;
+}
+interface Props extends ReduxProps, RouteProps {
+  component: React.ComponentType<RouteComponentProps>;
+}
+
+const mapStateToProps = state => ({
+  isAuthenticated: state.auth.isAuthenticated,
+});
+
+const mapDispatchToProps = {};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+const _PrivateRoute = (props: Props) => {
+  const { isAuthenticated, component: Component, ...rest } = props;
+  return (
+    <Route
+      {...rest}
+      render={props => {
+        if (!isAuthenticated && !localStorage.getItem('user')) {
+          return <Redirect to={PATH.LOGIN} />;
+        }
+        return <Component {...props} />;
+      }}
+    />
+  );
+};
+
+export const PrivateRoute = connector(_PrivateRoute);

src/routes/index.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { PATH } from 'src/constants/paths';
 import { Loading } from 'src/components/Loading';
 import { Route, Switch } from 'react-router-dom';
+import { PrivateRoute } from './PrivateRoute';
 
 // ---> Static pages
 const HomePage = lazy(() => import('src/pages/HomePages/HomePage'));
@@ -46,11 +47,15 @@ export const Routes = () => {
           {/* Auth routes */}
           <Route exact path={PATH.LOGIN} component={LoginPage} />
           <Route exact path={PATH.REGISTER} component={RegisterPage} />
-          <Route exact path={PATH.PROFILE} component={ProfilePage} />
+          <PrivateRoute exact path={PATH.PROFILE} component={ProfilePage} />
 
           {/* Products routes */}
-          <Route exact path={PATH.PRODUCTS} component={ProductListPage} />
-          <Route
+          <PrivateRoute
+            exact
+            path={PATH.PRODUCTS}
+            component={ProductListPage}
+          />
+          <PrivateRoute
             exact
             path={PATH.PRODUCTS + '/:id'}
             component={ProductItemPage}