component.mynav.js

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { userUpdate, categoryList, Utility } from '../actions';
import styles from './component.module.scss';

class MyNav extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }
  componentDidUpdate(props, state) {
    this.judgeIsLogin();
  }

  componentDidMount() {
    this.judgeIsLogin();

    Utility.NotifyLogout.subscribe(() => {
      this.judgeIsLogin();
    })
  }

  judgeIsLogin() {
    const { id } = this.props.user.info || {};
    if (!!id) {
      return;
    }
    this.props.history.push('/login');
  }

  update() {
    this.setState({ ts: new Date() });
  }

  render() {
    const { role } = this.props.user.info || {};
    // console.log('role:', role)
    return (
      <div className={styles.myNav}>
        <div className="row">
          <Link className={styles.aLink} to="/my/home">
            My Book List
          </Link>
          <Link className={styles.aLink} to="/book/release">
            Release
          </Link>
          <Link className={styles.aLink} to="/request/list">
            Request List
          </Link>
          <Link className={styles.aLink} to="/borrow/list">
            Borrow List
          </Link>
          {role === 2 && (
            <Link className={styles.aLink} to="/category">
              Category
            </Link>
          )}
        </div>
      </div>
    );
  }
}

export default connect((state) => ({ ...state }), { userUpdate, categoryList })(MyNav);