-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
61 lines (51 loc) · 1.62 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { Component } from 'react';
import { Layout } from 'antd';
import { connect } from 'react-redux';
import * as storage from 'services/localStorage';
import Hero from 'Hero/Main';
import AppBody from './components/UI/Body';
import AppHeader from './components/UI/Header';
import AppFooter from './components/UI/Footer';
import './index.less';
const { Content, Header, Sider } = Layout;
class App extends Component {
componentWillReceiveProps(nextProps) {
if (nextProps.hero) {
let heroes = [];
nextProps.player.heroes.forEach(char => {
const character = char.id === nextProps.hero.id ? nextProps.hero : char;
heroes.push(character);
});
nextProps.player.heroes = heroes;
storage.set('player', nextProps.player);
}
}
render() {
const { player, hero } = this.props;
const hasActiveHero = player && player.activeHeroId;
const battleWrapper = player && player.battle ? 'battleWrapper' : '';
return (
<Layout className={battleWrapper}>
<Header className="header">
<AppHeader showMainMenu={hasActiveHero} />
</Header>
<Content className="appContent">
<Layout className="appLayout whiteBg">
{hasActiveHero ? (
<Sider width={200} className="whiteBg leftPanel">
<Hero />
</Sider>
) : null}
<AppBody hero={hero} player={player} />
</Layout>
</Content>
<AppFooter />
</Layout>
);
}
}
const mapStateToProps = ({ hero, player }) => ({
hero,
player
});
export default connect(mapStateToProps)(App);