React functional component vs class component - need state n props in functional component

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);

What is working and what is not working?

Thanks for response!

Both are working good actually, I wanted to get the theme based button coloring functionality into TrainingDashboard ,which is a functional component

I have trouble in converting the constants of the function into props of class

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.