Skip to content

Commit e3c9b45

Browse files
antonioalonziantonioalonzi
committed
moderise more react code
1 parent 05dd611 commit e3c9b45

5 files changed

Lines changed: 181 additions & 247 deletions

File tree

‎src/main/js/admin/Decks/DecksSelector.js‎

Lines changed: 35 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,48 @@
1-
import React, {Component} from 'react'
2-
import {connect} from 'react-redux'
3-
import {bindActionCreators} from 'redux'
1+
import React from 'react'
2+
import {useDispatch, useSelector} from 'react-redux'
43
import AbstractDeckForm from 'admin/Decks/AbstractDeckForm'
54
import DecksSelectorUtils from 'admin/Decks/DecksSelectorUtils'
65
import PreConstructedDeckForm from 'admin/Decks/pre-constructed/PreConstructedDeckForm'
76
import CustomDeckForm from 'admin/Decks/custom/CustomForm'
87
import RandomDeckForm from 'admin/Decks/random/RandomDeckForm'
98

10-
class DecksSelector extends Component {
11-
constructor(props) {
12-
super(props)
13-
}
9+
export default function({ goToGame }) {
10+
const dispatch = useDispatch()
1411

15-
getTabHeaderClassName(headerName) {
16-
let className = 'tab-header'
12+
const deckType = useSelector(state => DecksSelectorUtils.getDeckType(state))
1713

18-
if (this.props.deckType === headerName) {
19-
className += ' selected'
20-
}
14+
const changeDeckType = (type) => dispatch({
15+
type: 'DECK_TYPE',
16+
value: type
17+
})
2118

22-
return className
23-
}
19+
const getTabHeaderClassName = (headerName) =>
20+
`tab-header ${deckType === headerName ? 'selected' : ''}`
2421

25-
render() {
26-
return (
27-
<section className='tab-container'>
28-
<div className='tab-list'>
29-
<div className={this.getTabHeaderClassName('random')} onClick={() => this.props.changeDeckType('random')}><h3>Random</h3></div>
30-
<div className={this.getTabHeaderClassName('pre-constructed')} onClick={() => this.props.changeDeckType('pre-constructed')}><h3>PreConstructed</h3></div>
31-
<div className={this.getTabHeaderClassName('custom')} onClick={() => this.props.changeDeckType('custom')}><h3>Custom</h3></div>
22+
return (
23+
<section className='tab-container'>
24+
<div className='tab-list'>
25+
<div className={getTabHeaderClassName('random')} onClick={() => changeDeckType('random')}>
26+
<h3>Random</h3>
3227
</div>
33-
<div className='tab-content'>
34-
{this.props.deckType === 'random' && <AbstractDeckForm goToGame={this.props.goToGame}><RandomDeckForm /></AbstractDeckForm>}
35-
{this.props.deckType === 'pre-constructed' && <AbstractDeckForm goToGame={this.props.goToGame}><PreConstructedDeckForm /></AbstractDeckForm>}
36-
{this.props.deckType === 'custom' && <AbstractDeckForm goToGame={this.props.goToGame}><CustomDeckForm /></AbstractDeckForm>}
28+
<div className={getTabHeaderClassName('pre-constructed')} onClick={() => changeDeckType('pre-constructed')}>
29+
<h3>PreConstructed</h3>
3730
</div>
38-
</section>
39-
)
40-
}
41-
}
42-
43-
const changeDeckType = (deckType) => {
44-
return {
45-
type: 'DECK_TYPE',
46-
value: deckType
47-
}
48-
}
49-
50-
const mapStateToProps = state => {
51-
return {
52-
deckType: DecksSelectorUtils.getDeckType(state)
53-
}
54-
}
55-
56-
const mapDispatchToProps = dispatch => {
57-
return {
58-
changeDeckType: bindActionCreators(changeDeckType, dispatch)
59-
}
31+
<div className={getTabHeaderClassName('custom')} onClick={() => changeDeckType('custom')}>
32+
<h3>Custom</h3>
33+
</div>
34+
</div>
35+
<div className='tab-content'>
36+
{deckType === 'random' && (
37+
<AbstractDeckForm goToGame={goToGame}><RandomDeckForm /></AbstractDeckForm>
38+
)}
39+
{deckType === 'pre-constructed' && (
40+
<AbstractDeckForm goToGame={goToGame}><PreConstructedDeckForm /></AbstractDeckForm>
41+
)}
42+
{deckType === 'custom' && (
43+
<AbstractDeckForm goToGame={goToGame}><CustomDeckForm /></AbstractDeckForm>
44+
)}
45+
</div>
46+
</section>
47+
)
6048
}
61-
62-
export default connect(mapStateToProps, mapDispatchToProps)(DecksSelector)

‎src/main/js/admin/Header/Header.js‎

Lines changed: 58 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,66 @@
1-
import React, {Component} from 'react'
2-
import {Link} from 'react-router-dom'
3-
import get from 'lodash/get'
4-
import {connect} from 'react-redux'
1+
import React from 'react'
2+
import { Link } from 'react-router-dom'
3+
import { useSelector } from 'react-redux'
54
import Logout from 'admin/Auth/Logout/Logout'
65
import AuthHelper from 'admin/Auth/AuthHelper'
6+
import { APP_BASE_PATH } from 'admin/AdminApp'
77
import './header.scss'
8-
import {APP_BASE_PATH} from 'admin/AdminApp'
98

10-
class Header extends Component {
11-
displayMenu() {
12-
if (this.props.isLoggedIn) {
13-
return (
14-
<div id='menu-bar'>
15-
<nav>
16-
<Link to="/ui">Home</Link>
17-
</nav>
18-
<nav>
19-
<Link to="/ui/decks">Decks</Link>
20-
</nav>
21-
<nav>
22-
<Link to="/ui/play">Play</Link>
23-
<ul className="dropdown">
24-
<li><Link to="/ui/play">Play</Link></li>
25-
<li><Link to="/ui/play/game-history">Game History</Link></li>
26-
<li><Link to="/ui/play/score-board">Score Board</Link></li>
27-
</ul>
28-
</nav>
29-
<nav>
30-
<Link to="/ui/profile">{this.props.profile.username}</Link>
31-
<ul className="dropdown">
32-
<li><Link to="/ui/profile">Profile</Link></li>
33-
{ this.props.isNonGuest && <li><Link to="/ui/auth/change-password">Change Password</Link></li> }
34-
<li><Logout/></li>
35-
</ul>
36-
</nav>
37-
</div>
38-
)
39-
} else {
40-
return (
41-
<div id='menu-bar'>
42-
<nav>
43-
<Link to="/ui">Home</Link>
44-
</nav>
45-
<nav>
46-
<Link to="/ui/auth/login">Login</Link>
47-
</nav>
48-
<nav>
49-
<Link to="/ui/auth/register">Register</Link>
50-
</nav>
51-
</div>
52-
)
53-
}
54-
}
55-
56-
render() {
57-
return (
58-
<header>
59-
<div id='logo'>
60-
<img src={APP_BASE_PATH + '/img/matag.png'} alt='matag-logo'/>
61-
<h1>{this.props.config.matagName}</h1>
62-
</div>
63-
{this.displayMenu()}
64-
</header>
65-
)
66-
}
67-
}
68-
69-
const mapStateToProps = state => {
70-
return {
9+
export default function Header() {
10+
const { isLoggedIn, isNonGuest, profile, config } = useSelector(state => ({
7111
isLoggedIn: AuthHelper.isLoggedIn(state),
7212
isNonGuest: AuthHelper.isNonGuest(state),
73-
profile: get(state, 'session.profile', {}),
74-
config: get(state, 'config', {})
75-
}
76-
}
13+
profile: state.session?.profile || {},
14+
config: state.config || {}
15+
}))
7716

78-
const mapDispatchToProps = () => {
79-
return {}
80-
}
17+
return (
18+
<header>
19+
<div id='logo'>
20+
<img src={`${APP_BASE_PATH}/img/matag.png`} alt='matag-logo' />
21+
<h1>{config.matagName}</h1>
22+
</div>
23+
24+
<div id='menu-bar'>
25+
<nav>
26+
<Link to="/ui">Home</Link>
27+
</nav>
8128

82-
export default connect(mapStateToProps, mapDispatchToProps)(Header)
29+
{isLoggedIn ? (
30+
<>
31+
<nav>
32+
<Link to="/ui/decks">Decks</Link>
33+
</nav>
34+
<nav>
35+
<Link to="/ui/play">Play</Link>
36+
<ul className="dropdown">
37+
<li><Link to="/ui/play">Play</Link></li>
38+
<li><Link to="/ui/play/game-history">Game History</Link></li>
39+
<li><Link to="/ui/play/score-board">Score Board</Link></li>
40+
</ul>
41+
</nav>
42+
<nav>
43+
<Link to="/ui/profile">{profile.username}</Link>
44+
<ul className="dropdown">
45+
<li><Link to="/ui/profile">Profile</Link></li>
46+
{isNonGuest && (
47+
<li><Link to="/ui/auth/change-password">Change Password</Link></li>
48+
)}
49+
<li><Logout /></li>
50+
</ul>
51+
</nav>
52+
</>
53+
) : (
54+
<>
55+
<nav>
56+
<Link to="/ui/auth/login">Login</Link>
57+
</nav>
58+
<nav>
59+
<Link to="/ui/auth/register">Register</Link>
60+
</nav>
61+
</>
62+
)}
63+
</div>
64+
</header>
65+
)
66+
}

‎src/main/js/admin/Home/Home.js‎

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,24 @@
1-
import React, {Component} from 'react'
2-
import {connect} from 'react-redux'
3-
import get from 'lodash/get'
1+
import React from 'react'
2+
import { useSelector } from 'react-redux'
43
import AuthHelper from 'admin/Auth/AuthHelper'
54
import Login from 'admin/Auth/Login/Login'
65
import Play from 'admin/Play/Play'
76
import Stats from './Stats/Stats'
87
import Intro from './Intro/Intro'
98
import './home.scss'
109

11-
class Home extends Component {
12-
displayMainAction() {
13-
if (this.props.isLoggedIn) {
14-
return <Play/>
15-
} else {
16-
return <Login />
17-
}
18-
}
19-
20-
render() {
21-
return (
22-
<section id='home'>
23-
<h2>Home</h2>
24-
<Intro config={this.props.config}/>
25-
<Stats/>
26-
{ this.displayMainAction() }
27-
</section>
28-
)
29-
}
30-
}
31-
32-
const mapStateToProps = state => {
33-
return {
10+
export default function Home() {
11+
const { isLoggedIn, config } = useSelector(state => ({
3412
isLoggedIn: AuthHelper.isLoggedIn(state),
35-
config: get(state, 'config', {})
36-
}
37-
}
13+
config: state.config || {}
14+
}))
3815

39-
const mapDispatchToProps = () => {
40-
return {}
16+
return (
17+
<section id='home'>
18+
<h2>Home</h2>
19+
<Intro config={config} />
20+
<Stats />
21+
{isLoggedIn ? <Play /> : <Login />}
22+
</section>
23+
)
4124
}
42-
43-
export default connect(mapStateToProps, mapDispatchToProps)(Home)

‎src/main/js/admin/Home/Intro/Intro.js‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
1-
import React, {Component} from 'react'
1+
import React from 'react'
22

3-
export default class Intro extends Component {
4-
getLinkToSupportEmail() {
5-
return 'mailto:' + this.props.config.matagSupportEmail
3+
export default function Intro({config}) {
4+
const getLinkToSupportEmail = () => {
5+
return 'mailto:' + config.matagSupportEmail
66
}
77

8-
render() {
9-
return (
10-
<section id='intro'>
11-
<p>
12-
Welcome to <strong>{this.props.config.matagName}</strong>, a web based version of <strong>Magic: The Gathering</strong> where you can play using just your browser.
13-
</p>
14-
<p>
15-
The game is open source and you can find the code, contribute or contact the creators at <a href='https://github.com/MatagTheGame/matag-the-game' target='_blank'>{this.props.config.matagName}</a> github.
16-
</p>
17-
<p>
18-
We are also available at:
19-
</p>
20-
<ul>
21-
<li><a href={this.getLinkToSupportEmail()}>{this.props.config.matagSupportEmail}</a></li>
22-
<li><a href="https://discord.com/channels/708016395308236824/708016395799101473" target='_blank'>{this.props.config.matagName} Discord Channel</a></li>
23-
</ul>
24-
<p>
25-
<u>Most probably you are the only one online</u>, you can play against yourself by opening two browser sessions (windows/tabs) at this address
26-
and logging in on the second tab with guest.<br />
27-
Or even better let someone know about this amazing website and play in here with them!
28-
</p>
29-
</section>
30-
)
31-
}
8+
return (
9+
<section id='intro'>
10+
<p>
11+
Welcome to <strong>{config.matagName}</strong>, a web based version of <strong>Magic: The Gathering</strong> where you can play using just your browser.
12+
</p>
13+
<p>
14+
The game is open source and you can find the code, contribute or contact the creators at <a href='https://github.com/MatagTheGame/matag-the-game' target='_blank'>{config.matagName}</a> github.
15+
</p>
16+
<p>
17+
We are also available at:
18+
</p>
19+
<ul>
20+
<li><a href={getLinkToSupportEmail()}>{config.matagSupportEmail}</a></li>
21+
<li><a href="https://discord.com/channels/708016395308236824/708016395799101473" target='_blank'>{config.matagName} Discord Channel</a></li>
22+
</ul>
23+
<p>
24+
<u>Most probably you are the only one online</u>, you can play against yourself by opening two browser sessions (windows/tabs) at this address
25+
and logging in on the second tab with guest.<br />
26+
Or even better let someone know about this amazing website and play in here with them!
27+
</p>
28+
</section>
29+
)
3230
}

0 commit comments

Comments
 (0)