component.header.js

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

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

    this.state = {};
  }

  componentDidMount() {
    this.judgeLogin();
    this.getCategoryList();

    Utility.NotifyUpdate.subscribe((item) => {
      this.update();
    });

    Utility.NotifyLogout.subscribe((args) => {
      this.logout()
      const { isLogin } = args || {};
      if (isLogin) {
        this.props.history.push('/login');
      }
    })
  }

  judgeLogin() {
    const { user } = this.props;
    const { info } = user || {};
    const { id } = info || {};
    if (id) {
      console.log('user info exists');
      return;
    }
    const { id: user_id } = Utility.UserInfo || {};
    if (!user_id) {
      return;
    }
    console.log(Utility.UserInfo);
    this.props.userUpdate(Utility.UserInfo);
    console.log('user info exists');
    this.update();
  }

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

  // get category list
  async getCategoryList() {
    await this.props.categoryList();
    this.update();
  }

  searchCategory(keyword) {
    if (keyword) {
      this.props.history.push('/?keyword=' + keyword);
    } else {
      this.props.history.push('/');
    }
    this.props.bookSearchKeyword(keyword, 1, 20);
  }

  logout() {
    this.props.userUpdate(null);
    Utility.UserInfo = null;
    Utility.Token = null;
    this.update();
    this.props.history.push('/');
  }

  buildCategoryHtml() {
    const { category } = this.props;
    if (!Utility.IsArray(category.list)) {
      return '';
    }

    const result = category.list.map((item) => {
      return (
        <div key={item.id} className={`${styles.col0} ${styles.categoryName}`} onClick={() => this.searchCategory(item.name)}>
          {item.name}
        </div>
      );
    });
    return result;
  }

  buildMyHtml() {
    const { username, email } = this.props.user.info;
    return (
      <div className={styles.col0 + ' ' + styles.row}>
        <div className={styles.col0 + ' ' + styles.username} onClick={() => this.props.history.push('/my/home')}>
      Welcome <span> {username || email}</span>
        </div>
        <div className={styles.col0 + ' ' + styles.categoryName} onClick={this.logout.bind(this)} >
          Logout
        </div>
      </div>
    );
  }

  render() {
    const { id } = this.props.user.info || {};

    return (
      <div className={styles.header}>
        <div className={styles.logo}>
          {`welcome to borrow platform`.toUpperCase()}
        </div>
        <div className={`${styles.row} ${styles.alignCenter} ${styles.nav}`}>
          <div className={`${styles.col} ${styles.row}`}>
            <div className={`${styles.col0} ${styles.categoryName}`} onClick={() => this.searchCategory('')}>
              All
            </div>
            {this.buildCategoryHtml()}
          </div>
          {!id ? (
            <div className={styles.row + ' ' + styles.alignCenter}>
              <div className={styles.col0 + ' ' + styles.categoryName}>
                <Link to="/login">Login</Link>
              </div>
              <div className={styles.col0 + ' ' + styles.categoryName}>
                <Link to="/signup">Sign Up</Link>
              </div>
            </div>
          ) : (
              this.buildMyHtml()
            )}
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { state: state, ...state };
};

export default connect(mapStateToProps, { userUpdate, categoryList, bookSearchKeyword })(Header);