Update auth for header

Author: tduyng

README.md

@@ -22,10 +22,12 @@ To use this template
   ```
 - Start codinggs
 Demo deploy: [reactts-boilerplate.netlify.app](https://reactts-boilerplate.netlify.app/)
+
 Login
+```
 username: admin
 password: 123456
-
+```
 
 ## Project structure
 

package.json

@@ -17,7 +17,7 @@
     "@types/redux": "^3.6.31",
     "@types/redux-thunk": "^2.1.32",
     "@types/styled-components": "^5.1.4",
-    "antd": "^4.8.6",
+    "antd": "^4.9.2",
     "concurrently": "^5.3.0",
     "immer": "^8.0.0",
     "json-server": "^0.16.3",

src/App/App.reducer.ts

@@ -1,10 +1,12 @@
 import * as types from './App.constants';
-import { LOGIN_SUCCESS } from 'src/components/Auth/Auth.constants';
+import {
+  LOGIN_SUCCESS,
+  REGISTER_SUCCESS,
+} from 'src/components/Auth/Auth.constants';
 import produce from 'immer';
 
 const initialState = {
   isAuthenticated: false,
-  closeSideNav: false,
 };
 
 export const AppReducer = (state = initialState, action: { type: any }) =>
@@ -15,11 +17,9 @@ export const AppReducer = (state = initialState, action: { type: any }) =>
         draft.isAuthenticated = false;
         break;
       case LOGIN_SUCCESS:
+      case REGISTER_SUCCESS:
         draft.isAuthenticated = true;
         break;
-      case types.CLOSE_SIDE_NAV:
-        draft.closeSideNav = !state.closeSideNav;
-        break;
       default:
         return state;
     }

src/App/App.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { loadUser, logout } from 'src/components/Auth/Auth.thunks';
 import { Routes } from 'src/routes';
 
 function App() {

src/components/Auth/Auth.reducers.ts

@@ -15,7 +15,7 @@ const initialState = {
   user: userType,
 };
 
-export const loginReducer = (
+export const authReducer = (
   state = initialState,
   action: { type: any; payload: WritableDraft<IUser> },
 ) =>

src/components/Auth/Login.tsx

@@ -6,9 +6,9 @@ import { useHistory, Link } from 'react-router-dom';
 import { login } from './Auth.thunks';
 import { PATH } from 'src/constants/paths';
 
-const mapStateToProps = state => ({
-  loading: state.loading,
-  isAuthenticated: state.isAuthenticated,
+const mapStateToProps = (state: AppState) => ({
+  loading: state.auth.loading,
+  isAuthenticated: state.app.isAuthenticated,
 });
 const mapDispatchToProps = {
   login,
@@ -36,6 +36,7 @@ const _Login = (props: Props) => {
       }
     }
   };
+
   return (
     <div className="container">
       <div className="login-form-wrap">
@@ -86,13 +87,12 @@ const _Login = (props: Props) => {
               type="primary"
               htmlType="submit"
               className="login-form-button"
-              loading={loading}
             >
               Log in
             </Button>
             <div className="login-form-register-link-wrapper">
               Or{' '}
-              <Link to="/signup" className="login-form-register-link">
+              <Link to={PATH.REGISTER} className="login-form-register-link">
                 Register now!
               </Link>
             </div>

src/components/Auth/Register.tsx

@@ -6,9 +6,9 @@ import { useHistory, Link } from 'react-router-dom';
 import { register } from './Auth.thunks';
 import { PATH } from 'src/constants/paths';
 
-const mapStateToProps = state => ({
-  loading: state.loading,
-  isAuthenticated: state.isAuthenticated,
+const mapStateToProps = (state: AppState) => ({
+  loading: state.auth.loading,
+  isAuthenticated: state.app.isAuthenticated,
 });
 const mapDispatchToProps = {
   register,
@@ -33,6 +33,9 @@ const _Register = (props: Props) => {
       }
     }
   };
+  const onFinishFailed = errorInfo => {
+    console.log('Failed:', errorInfo);
+  };
   return (
     <div className="container">
       <div className="login-form-wrap">
@@ -48,6 +51,7 @@ const _Register = (props: Props) => {
           className="login-form"
           initialValues={{ remember: true }}
           onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
         >
           <Form.Item
             name="username"
@@ -89,7 +93,7 @@ const _Register = (props: Props) => {
             </Button>
             <div className="login-form-register-link-wrapper">
               Or{' '}
-              <Link to="/login" className="login-form-register-link">
+              <Link to={PATH.LOGIN} className="login-form-register-link">
                 Log in now!
               </Link>
             </div>

src/components/Header/RightMenu.tsx

@@ -1,23 +1,58 @@
 import React from 'react';
 import { Menu, Grid } from 'antd';
 import { NavLink } from 'react-router-dom';
+import { LoginOutlined } from '@ant-design/icons';
+import { logout } from 'src/components/Auth/Auth.thunks';
+import { connect, ConnectedProps } from 'react-redux';
+import { PATH } from 'src/constants/paths';
 
 const { useBreakpoint } = Grid;
 
-export const RightMenu = () => {
+const mapStateToProps = (state: AppState) => ({
+  loading: state.auth.loading,
+  isAuthenticated: state.app.isAuthenticated,
+});
+const mapDispatchToProps = {
+  logout,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+interface Props extends ConnectedProps<typeof connector> {}
+
+const _RightMenu = (props: Props) => {
+  const { loading, isAuthenticated, logout } = props;
   const { md } = useBreakpoint();
-  return (
+  const guestLinks = (
     <Menu mode={md ? 'horizontal' : 'inline'}>
       <Menu.Item key="menukey-login">
-        <NavLink className="navbar-item primary" to="/login">
+        <NavLink className="navbar-item primary" to={PATH.LOGIN}>
           Sign In
         </NavLink>
       </Menu.Item>
       <Menu.Item key="menukey-signup">
-        <NavLink className="navbar-item" to="/signup">
+        <NavLink className="navbar-item" to={PATH.REGISTER}>
           Register
         </NavLink>
       </Menu.Item>
     </Menu>
   );
+  const authLinks = (
+    <Menu mode={md ? 'horizontal' : 'inline'}>
+      <Menu.Item key="menukey-login">
+        <NavLink
+          className="navbar-item primary"
+          to={PATH.HOME}
+          onClick={logout}
+        >
+          <span>
+            <LoginOutlined /> Log Out
+          </span>
+        </NavLink>
+      </Menu.Item>
+    </Menu>
+  );
+  return <div>{!loading && isAuthenticated ? authLinks : guestLinks}</div>;
 };
+
+const RightMenu = connector(_RightMenu);
+export { RightMenu };

src/components/Home/GuestLinks.tsx

@@ -0,0 +1,32 @@
+import { Button } from 'antd';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const GuestLinks = () => {
+  return (
+    <div className="homepage">
+      <div className="home-overlay">
+        <div className="container homepage-inner">
+          <div className="home-content">
+            <h1>React Typescript Template</h1>
+            <p>Please login with account & password below.</p>
+            <p className="home-text-light">
+              Account:
+              <span> admin</span>
+            </p>
+            <p className="home-text-light">
+              Password: <span> 123456</span>
+            </p>
+            <div className="home-button-wrap">
+              <Button type="primary" size="large">
+                <Link to="/login" className="button-login-link">
+                  Go To Login Page
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Home/index.tsx

@@ -1,32 +1,24 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { GuestLinks } from './GuestLinks';
+import { connect, ConnectedProps } from 'react-redux';
 import { Button } from 'antd';
+import { Link } from 'react-router-dom';
+
+const mapStateToProps = (state: AppState) => ({
+  loading: state.auth.loading,
+  isAuthenticated: state.app.isAuthenticated,
+});
+const mapDispatchToProps = {};
 
-export const Home = () => {
+const connector = connect(mapStateToProps, mapDispatchToProps);
+interface Props extends ConnectedProps<typeof connector> {}
+
+const _Home = (props: Props) => {
+  const { loading, isAuthenticated } = props;
   return (
-    <div className="homepage">
-      <div className="home-overlay">
-        <div className="container homepage-inner">
-          <div className="home-content">
-            <h1>React Typescript Template</h1>
-            <p>Please login with account & password below.</p>
-            <p className="home-text-light">
-              Account:
-              <span> admin</span>
-            </p>
-            <p className="home-text-light">
-              Password: <span> 123456</span>
-            </p>
-            <div className="home-button-wrap">
-              <Button type="primary" size="large">
-                <Link to="/login" className="button-login-link">
-                  Go To Login Page
-                </Link>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <>{!loading && isAuthenticated ? <div>Hi there!</div> : <GuestLinks />}</>
   );
 };
+
+const Home = connector(_Home);
+export { Home };