dmx-cli/template/page/admin/containers/app/index.jsx

scaffold for create component, toolkit, page and so on

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Menu } from 'antd';
import classNames from 'classnames/bind';
import { actions } from '../../actions';
import styles from './style.mod.less';
import CompLayout from 'comp-layout';
import Header from 'comp-header';
import Footer from 'comp-footer';
import Sidebar from 'comp-sidebar';
import Content from '../../components/content';
import { logoutPath, modifyPwdPath } from 'app/util/config';

const cx = classNames.bind(styles);
const { Item } = Menu;

class App extends Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    const { loading, user, sidebar } = this.props;
    const { entries, openKeys, selectedKeys } = sidebar;
    const { avatar, name } = user;

    return (
      <CompLayout
        Header={
          <Header
            avatarUrl={avatar}
            userName={name}
            operateMenu={[
              modifyPwdPath ? <Item key="modify">
                <a href={modifyPwdPath}>修改密码</a>
              </Item> : null,
              logoutPath ? <Item key="logout">
                <a href={logoutPath}>退出登录</a>
              </Item> : null,
            ]}
          />
        }
        Content={<Content loading={loading} />}
        Sidebar={
          <Sidebar
            logoUrl="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            logoStyle={{
              margin: '0',
              padding: '16px',
              height: '64px',
              backgroundColor: '#fff',
            }}
            dataSource={entries}
            openKeys={openKeys}
            selectedKeys={selectedKeys}
          />
        }
        Footer={<Footer><p>Copyright© 2017-{new Date().getFullYear()}, All Rights Reserved. Power By Damixia</p></Footer>}
      />
    );
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: () => {
      dispatch(actions.fetchData());
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);