Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import { render } from 'react-dom';
- import { connect } from 'react-redux'
- import { Switch, BrowserRouter, Route, Link } from 'react-router-dom';
- // antd
- import { Layout, Breadcrumb, Menu, Icon } from 'antd';
- const { Header, Content, Footer, Sider } = Layout;
- // Helpers
- import { Alert } from '../helpers/notifications';
- // Components
- import Home from '../components/Home';
- // import Header from '../components/Header';
- import NotFound from '../components/NotFound';
- import PostsEditor from '../components/Posts/PostsEditor';
- // Actions
- import { setRouteActiveFlag } from '../actions/ui.action'
- class Sidebar extends React.Component {
- componentDidMount () {
- const routes = {
- '/' : 1,
- '/posts' : 2,
- '/logout' : 3
- }
- this.props.detectActiveRoute(setRouteActiveFlag({
- routes:routes,
- path:window.location.pathname
- }))
- }
- render() {
- const { selectedRoute } = this.props;
- console.log(selectedRoute);
- return (
- <div>
- <Layout>
- <Sider
- style={{
- overflow: 'auto',
- height: '100vh',
- position: 'fixed',
- left: 0,
- }}
- breakpoint="lg"
- collapsedWidth="0"
- onBreakpoint={broken => {
- console.log(broken);
- }}
- onCollapse={(collapsed, type) => {
- console.log(collapsed, type);
- }}
- >
- <div className="logo" >
- Logo <br/><br/><br/>
- </div>
- <Menu theme="dark" mode="inline" style={{ lineHeight: '64px' }} defaultSelectedKeys={[selectedRoute.toString() || '1']}>
- <Menu.Item key="1">
- <Link to="/" style={{ color:'#fff' }}>
- <Icon type="user" />
- <span className="nav-text">Home</span>
- </Link>
- </Menu.Item>
- <Menu.Item key="2">
- <Link to="/posts" style={{ color:'#fff' }}>
- <Icon type="user" />
- <span className="nav-text">Posts</span>
- </Link>
- </Menu.Item>
- <Menu.Item key="3">
- <a href="/logout" style={{ color:'#fff' }}>
- <Icon type="user" />
- <span className="nav-text">Logout</span>
- </a>
- </Menu.Item>
- </Menu>
- </Sider>
- <Layout style={{ marginLeft: 200 }}>
- <Content style={{ margin: '24px 16px 0', overflow: 'initial'}}>
- <Breadcrumb style={{ margin: '0 0 20px 0' }}>
- <Breadcrumb.Item>Home</Breadcrumb.Item>
- <Breadcrumb.Item>List</Breadcrumb.Item>
- <Breadcrumb.Item>App</Breadcrumb.Item>
- </Breadcrumb>
- <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
- <Switch>
- <Route path="/" exact component={Home} />
- <Route path="/posts/:id?" component={PostsEditor} />
- <Route component={NotFound}/>
- </Switch>
- <Alert stack={ { limit: 3 } } />
- </div>
- </Content>
- <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
- </Layout>
- </Layout>
- </div>
- );
- }
- }
- const mapStateToProps = (state, ownProps) => {
- return {
- state: state,
- props: ownProps,
- selectedRoute:state.ui.selectedRoute || 1
- }
- }
- const mapDispatchToProps = (dispatch, ownProps) => {
- return {
- detectActiveRoute: (obj) => dispatch(obj)
- }
- }
- export default connect(
- mapStateToProps,
- mapDispatchToProps
- )(Sidebar)
- export const setRouteActiveFlag = (payload = 'global') => ({
- type: actions.SET_ROUTE_ACTIVE_FLAG,
- payload
- });
- import { handleActions } from 'redux-actions';
- import Immutable from 'seamless-immutable';
- import * as actions from '../consts/action-types';
- const initialState = Immutable({
- requests: {},
- selectedRoute:{}
- });
- export default handleActions({
- [actions.SET_ROUTE_ACTIVE_FLAG]: (state, action) => {
- if (action.payload.routes && action.payload.path && action.payload.routes[ action.payload.path ]) {
- return state.set('selectedRoute', action.payload.routes[ action.payload.path ])
- }else{
- return state.set('selectedRoute', 1)
- }
- }
- }, initialState);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement