I would like to rewrite my functional component of trainingdashboard to a class component to render my icon colors like it is done in resultsDashboard
New to react
help me please !
//results dashboard a functional component
import React from "react";
import PropTypes from "prop-types";
import { Button, Card, Grid } from '@material-ui/core';
import ListItem from "@material-ui/core/ListItem/index";
import { withStyles } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
const styles = {
card: {
border: "3px solid #d9d9d9",
borderRadius: 10,
backgroundColor: "#fff",
height: "100%",
boxShadow: "5px",
width: "100%",
flexDirection: "column",
alignItems: "center",
justify: "space-evenly",
display: "flex",
flex: "1",
flexWrap: "nowrap"
},
container: {
minWidth: '240px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
fontSize: '1em'
},
iconContainer: {
display: 'flex',
flexDireciton: 'column',
justifyContent: 'center'
},
buttonsListContainer: {
display: 'flex',
flexDirection: 'column'
},
// iPad Pro 12.9" Portrait
'@media only screen and (max-width:1024px) and (orientation:portrait)': {
buttonsListContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center'
},
iconContainer: {
display: 'none'
},
viewButtons: {
minWidth: '240px',
maxWidth: '325px'
}
},
//iPad Pro 10.5" Landscape
'@media only screen and (max-width:1112px) and (orientation:landscape)': {
container: {
fontSize: '0.7em'
}
},
// iPad Pro 10.5" Portrait
'@media only screen and (max-width:834px) and (orientation:portrait)': {
viewButtons: {
maxWidth: '395px'
}
},
//iPad-Mini Landscape
'@media only screen and (max-width:1024px) and (orientation:landscape)': {
container: {
fontSize: '0.9em'
}
},
// iPad-Mini Portrait
'@media only screen and (max-width:768px) and (orientation:portrait)': {
container: {
fontSize: '0.6em'
},
viewButtons: {
maxWidth: '240px'
}
},
// Minor Breakpoint - 920px width
'@media only screen and (max-width:920px) and (orientation:landscape)': {
buttonsListContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center'
},
iconContainer: {
display: 'none'
},
viewButtons: {
maxWidth: '250px'
}
},
// Mobile Landscape
'@media only screen and (max-width:600px)': {
container: {
fontSize: '0.8em'
},
viewButtons: {
maxWidth: '180px'
}
}
};
function TrainingDashboard(props) {
const {
classes,
ViewEnum,
view,
Icon,
buttonColor,
conceptsClick,
definitionsClick,
exampleClick,
demonstrationClick,
tryItClick,
knowledgeCheckClick
} = props;
const { container,
buttonsListContainer,
iconContainer,
viewButtons
} = classes;
return (
<div>
<Card className={classes.card}>
<Grid
container
padding={12}
spacing={0}
direction="column"
justify="center"
alignItems="center"
style={{marginRight: 20, marginLeft: 20}}
>
</Grid>
<div className={container}>
<ListItem className={iconContainer}>
<img src={Icon} width={"100px"} alt="frui8 icon" />
</ListItem>
<div className={buttonsListContainer}>
<ListItem className={viewButtons}>
<Button
size="large"
color={"primary"}
fullWidth={true}
variant={view === ViewEnum.CONCEPTS ? "contained" : "outlined"}
onClick={conceptsClick }
>
CONCEPTS
</Button>
</ListItem>
<ListItem className={viewButtons}>
<Button
size="large"
color={"primary"}
fullWidth={true}
variant={view === ViewEnum.DEFINITIONS ? "contained" : "outlined"}
onClick={definitionsClick }
>
DEFINITIONS
</Button>
</ListItem>
<ListItem className={viewButtons}>
<Button
size="large"
color={"primary"}
fullWidth={true}
variant={view === ViewEnum.EXAMPLE ? "contained" : "outlined"}
onClick={exampleClick}
disabled
>
EXAMPLE
</Button>
</ListItem>
<ListItem className={viewButtons}>
<Button
size="large"
color={"primary"}
fullWidth={true}
variant={view === ViewEnum.DEMONSTRATION ? "contained" : "outlined"}
onClick={demonstrationClick}
>
DEMONSTRATION
</Button>
</ListItem>
<ListItem className={viewButtons}>
<Button
size="large"
color={"primary"}
fullWidth={true}
variant={view === ViewEnum.TRYIT ? "contained" : "outlined"}
onClick={tryItClick}
disabled
>
TRY IT YOURSELF
</Button>
</ListItem>
<ListItem className={viewButtons}>
<Button
size="large"
color={"primary"}
fullWidth={true}
variant={view === ViewEnum.KNOWLEDGECHECK ? "contained" : "outlined"}
onClick={knowledgeCheckClick}
>
KNOWLEDGE CHECK
</Button>
</ListItem>
</div>
</div>
</Card>
</div>
);
}
TrainingDashboard.propTypes = {
classes: PropTypes.object.isRequired,
ViewEnum: PropTypes.object.isRequired,
view: PropTypes.number.isRequired,
Icon: PropTypes.object.isRequired,
conceptsClick: PropTypes.func.isRequired,
definitionsClick: PropTypes.func.isRequired,
exampleClick: PropTypes.func.isRequired,
demonstrationClick: PropTypes.func.isRequired,
tryItClick: PropTypes.func.isRequired,
knowledgeCheckClick: PropTypes.func.isRequired
};
export default withStyles(styles)(TrainingDashboard);
//training dashboard a class component
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from "@material-ui/core/styles";
import { Button, Card, Grid } from '@material-ui/core';
import AppleFruitIconPic from "../assets/images/AppleFruitIconPic.svg"
import PeachFruitIconPic from "../assets/images/PeachFruitIconPic.svg"
import GrapgeIconPic from "../assets/images/GrapeIconPic.svg"
import MuskIconPic from "../assets/images/MuskIconPic.svg"
import KiwiIconPic from "../assets/images/KiwiIconPic.svg"
import BananaIconPic from "../assets/images/BananaIconPic.svg"
import OrangeIconPic from "../assets/images/OrangeIconPic.svg"
import PlumIconPic from "../assets/images/PlumIconPic.svg"
import TextField from '@material-ui/core/TextField';
import MenuItem from "@material-ui/core/MenuItem";
import moment from 'moment';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import * as Constants from '../constants';
const AppleTheme = createMuiTheme({
palette: {
primary: {
main: Constants.AppleColor
}
}
});
const PeachTheme = createMuiTheme({
palette: {
primary: {
main: Constants.PeachColor
}
}
});
const GrapeTheme = createMuiTheme({
palette: {
primary: {
main: Constants.GrapeColor
}
}
});
const MuskTheme = createMuiTheme({
palette: {
primary: {
main: Constants.MuskColor
}
}
});
const KiwiTheme = createMuiTheme({
palette: {
primary: {
main: Constants.KiwiColor
}
}
});
const BananaTheme = createMuiTheme({
palette: {
primary: {
main: Constants.BananaColor
}
}
});
const OrangeTheme = createMuiTheme({
palette: {
primary: {
main: Constants.OrangeColor
}
}
});
const ACTheme = createMuiTheme({
palette: {
primary: {
main: Constants.ACColor
}
}
});
const styles = {
card: {
border: "3px solid #d9d9d9",
borderRadius: 10,
backgroundColor: "#fff",
height: "100%",
boxShadow: "5px",
width: "100%",
flexDirection: "column",
alignItems: "center",
justify: "space-evenly",
display: "flex",
flex: "1",
flexWrap: "nowrap"
},
iconGrid: {
marginTop:"10px",
marginBottom:"5px"
},
icon: {
width: "100px",
height: "100px"
},
infoDisplayGrid: {
height: "41vh",
width:"90%",
marginLeft:"5px",
marginRight:"5px",
marginTop:"5px",
marginBottom:"5px",
display: "flex",
justifyItems: "center"
},
helpIcon: {
width: "60px"
},
completeGrid: {
marginTop: "5px",
marginBottom: "10px",
marginLeft: "10px",
marginRight: "10px",
alignContent: "flex-end",
display: "flex"
},
completeButton: {
color: "#d9d9d9",
borderColor: "#d9d9d9",
borderWidth: "2px",
fontSize: "15px",
alignSelf: "flex-end",
marginTop: "auto"
},
gridTopMargin: {
marginTop: "5px"
},
resultsButtons: {
marginTop: "2vh"
},
viewButtons: {
minWidth: 150,
textAlign: "center",
fontFamily: "Arimo"
},
viewButtonsSelected: {
minWidth: 150,
textAlign: "center",
color: "#fff",
fontFamily: "Arimo"
},
};
/**
* formatting and functionality for dashboard on results screens
* @class ResultsDashboard
*/
class ResultsDashboard extends React.Component {
/**
* @param {Props} props
*/
constructor(props) {
super(props);
this.state = {
//auth: true,
icon: null,
theme: null,
}
}
componentDidMount = () => {
if (this.props.frui8 === "Apple Time") {
this.setState({
icon: AppleFruitIconPic,
theme: AppleTheme
});
} else if (this.props.frui8 === " Peach") {
this.setState({
icon: PeachFruitIconPic,
theme: PeachTheme
})
} else if (this.props.frui8 === "Grape") {
this.setState({
icon: GrapgeIconPic,
theme: GrapeTheme
})
} else if (this.props.frui8 === "Level of Musk") {
this.setState({
icon: MuskIconPic,
theme: MuskTheme
})
} else if (this.props.frui8 === "Kiwi") {
this.setState({
icon: KiwiIconPic,
theme: KiwiTheme
})
} else if (this.props.frui8 === "Banana") {
this.setState({
icon: BananaIconPic,
theme: BananaTheme
})
} else if (this.props.frui8 === "Orange Activities") {
this.setState({
icon: OrangeIconPic,
theme: OrangeTheme
})
} else {
this.setState({
icon: PlumIconPic,
theme: ACTheme
})
}
};
/**
* render function
* @return {ReactElement}
*/
render(){
const { classes } = this.props;
return(
<div>
<Card className={classes.card}>
<Grid
container
padding={12}
spacing={0}
direction="column"
justify="center"
alignItems="center"
style={{marginRight: 20, marginLeft: 20}}
>
<Grid item className={classes.iconGrid}>
<img src={this.state.icon} alt="Magic 8 Icon" className={classes.icon}/>
</Grid>
<Grid item className={classes.resultsButtons}>
<TextField
select
className={classes.viewButtons}
label="Date"
value={this.props.sessionId}
onChange={this.props.changeSessionId}
InputLabelProps={{ shrink: true }}
>
{this.props.sessionDates.map((date, index)=>
{return <MenuItem key={index} id={date.id} value={date.id}>
<em>{moment(date.sessionStart.value).format("MMM Do YY")}</em>
</MenuItem>})}
</TextField>
</Grid>
<Grid item className={classes.resultsButtons}>
<MuiThemeProvider theme={this.state.theme}>
<Button
size="large"
color="primary"
variant={
this.props.view === this.props.viewEnum.DATA
? "contained"
: "outlined"
}
className={this.props.view === this.props.viewEnum.DATA ? classes.viewButtonsSelected : classes.viewButtons}
onClick={this.props.dataClick}
>
Data
</Button>
</MuiThemeProvider>
</Grid>
<Grid item className={classes.resultsButtons}>
<MuiThemeProvider theme={this.state.theme}>
<Button
size="large"
color="primary"
variant={
this.props.view === this.props.viewEnum.QUESTIONS
? "contained"
: "outlined"
}
className={this.props.view === this.props.viewEnum.QUESTIONS ? classes.viewButtonsSelected : classes.viewButtons}
onClick={this.props.questionsClick}
>
Questions
</Button>
</MuiThemeProvider>
</Grid>
<Grid item className={classes.resultsButtons}>
<MuiThemeProvider theme={this.state.theme}>
<Button
size="large"
color="primary"
variant={
this.props.view === this.props.viewEnum.COACH_PREP
? "contained"
: "outlined"
}
className={this.props.view === this.props.viewEnum.COACH_PREP ? classes.viewButtonsSelected : classes.viewButtons}
onClick={this.props.coachPrepClick}
>
Coach Prep
</Button>
</MuiThemeProvider>
</Grid>
<Grid item className={classes.resultsButtons}>
<MuiThemeProvider theme={this.state.theme}>
<Button
size="large"
color="primary"
variant={
this.props.view === this.props.viewEnum.ACTION_PLAN
? "contained"
: "outlined"
}
className={this.props.view === this.props.viewEnum.ACTION_PLAN ? classes.viewButtonsSelected : classes.viewButtons}
onClick={this.props.actionPlanClick}
>
Action Plan
</Button>
</MuiThemeProvider>
</Grid>
<Grid item style={{marginTop: "7vh", marginBottom: "2vh"}}>
<MuiThemeProvider theme={this.state.theme}>
<Button
size="large"
color="primary"
variant={
this.props.view === this.props.viewEnum.NOTES
? "contained"
: "outlined"
}
className={this.props.view === this.props.viewEnum.NOTES ? classes.viewButtonsSelected : classes.viewButtons}
onClick={this.props.notesClick}
>
Notes
</Button>
</MuiThemeProvider>
</Grid>
</Grid>
</Card>
</div>
);
}
}
ResultsDashboard.propTypes = {
frui8: PropTypes.string.isRequired,
dataClick: PropTypes.func.isRequired,
questionsClick: PropTypes.func.isRequired,
coachPrepClick: PropTypes.func.isRequired,
actionPlanClick: PropTypes.func.isRequired,
notesClick: PropTypes.func.isRequired,
changeSessionId: PropTypes.func.isRequired,
sessionId: PropTypes.string.isRequired,
sessionDates: PropTypes.array.isRequired,
viewEnum: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
view: PropTypes.number.isRequired
};
export default withStyles(styles)(ResultsDashboard);