import { AppBar, Dialog, DialogContent, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, IconButton, Toolbar, Tooltip, Typography, } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { closeDialog } from 'actions/display'; import { CHARACTERS, DIALOG_MY_GAME, PROFICIENCIES, RESIDENCE, SERVER, } from 'constants/display'; import React, { Component } from 'react'; import { bool, func, string, } from 'react-proptypes'; import { connect } from 'react-redux'; import Proficiencies from './Proficiencies'; import Residence from './Residence'; import Server from './Server'; const initialState = { [CHARACTERS]: false, [RESIDENCE]: false, [PROFICIENCIES]: false, [SERVER]: false, }; class MyGame extends Component { static propTypes = { mobile: bool, open: bool, onClose: func.isRequired, dialogFunc: string, }; static defaultProps = { mobile: false, open: false, }; state = { ...initialState }; componentDidUpdate(prevProps) { const { dialogFunc, open } = this.props; if (!prevProps.open && open) { const state = { ...initialState }; if (dialogFunc !== null) { state[dialogFunc] = true; } this.setState(state); } } handleChange = (section) => () => { this.setState({ [section]: !this.state[section] }); }; render() { const { mobile, open, onClose } = this.props; return ( <Dialog open={open} onClose={onClose} fullScreen={mobile} maxWidth="lg" > <AppBar position="static"> <Toolbar variant="dense"> <Typography variant="h6" className="title-text">My ArcheAge</Typography> <Tooltip title="Close"> <IconButton onClick={onClose} color="inherit"> <CloseIcon /> </IconButton> </Tooltip> </Toolbar> </AppBar> <DialogContent className="my-game-wrapper"> <ExpansionPanel expanded={this.state[SERVER]} onChange={this.handleChange(SERVER)}> <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> <Typography>Server</Typography> </ExpansionPanelSummary> <ExpansionPanelDetails> <Server /> </ExpansionPanelDetails> </ExpansionPanel> {/* <ExpansionPanel expanded={this.state[CHARACTERS]} onChange={this.handleChange(CHARACTERS)}> <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> <Typography>My Characters</Typography> </ExpansionPanelSummary> <ExpansionPanelDetails> </ExpansionPanelDetails> </ExpansionPanel> */} <ExpansionPanel expanded={this.state[RESIDENCE]} onChange={this.handleChange(RESIDENCE)}> <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> <Typography>Residence</Typography> </ExpansionPanelSummary> <ExpansionPanelDetails> <Residence /> </ExpansionPanelDetails> </ExpansionPanel> <ExpansionPanel expanded={this.state[PROFICIENCIES]} onChange={this.handleChange(PROFICIENCIES)}> <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> <Typography>Proficiencies</Typography> </ExpansionPanelSummary> <ExpansionPanelDetails> <Proficiencies /> </ExpansionPanelDetails> </ExpansionPanel> </DialogContent> </Dialog> ); } } const mapStateToProps = ({ gameData: { vocations }, proficiencies, display: { mobile, dialog, dialogFunc } }) => ({ vocations, proficiencies, mobile, open: dialog === DIALOG_MY_GAME, dialogFunc, }); const mapDispatchToProps = { onClose: closeDialog, }; export default connect(mapStateToProps, mapDispatchToProps)(MyGame);