Source

components/Music/MusicPerformanceHeader/MusicPerformanceHeader.js

  1. // NPM module imports
  2. import React, { Component } from "react";
  3. import PropTypes from "prop-types";
  4. import { withRouter } from "react-router-dom";
  6. // Component imports
  7. import RectangularButton from "../../Buttons/RectangularButton/RectangularButton";
  8. import ExerciseGenerator from "./ExerciseGenerator/ExerciseGenerator";
  10. // File imports
  11. import * as rectButtonColorOptions from "../../Buttons/RectangularButton/rectangularButtonColorOptions";
  12. import * as buttonTypes from "../../Buttons/buttonTypes";
  14. // Style imports
  15. import styles from "./MusicPerformanceHeader.module.scss";
  17. /**
  18.  * Renders the MusicPerformanceHeader component.
  19.  * This component is used when a user is viewing performance.
  20.  * @extends {Component}
  21.  * @category Music
  22.  * @component
  23.  */
  24. class MusicPerformanceHeader extends Component {
  25.     /**
  26.      * MusicPerformanceHeader component state
  27.      * @property {boolean} shouldDisplayExerciseGenerator - Indicates of the exercise generator should be displayed
  28.      */
  29.     state = {
  30.         shouldDisplayExerciseGenerator: false,
  31.     };
  33.     /**
  34.      * Flips shouldDisplayExerciseGenerator property in state
  35.      * @function
  36.      */
  37.     showOrHideExerciseGenerator = () => {
  38.         this.setState((prevState) => {
  39.             return {
  40.                 shouldDisplayExerciseGenerator: !prevState.shouldDisplayExerciseGenerator,
  41.             };
  42.         });
  43.     };
  45.     getExerciseGeneratorOrButton = () => {
  46.         if (this.state.shouldDisplayExerciseGenerator) {
  47.             // Returns the ExerciseGenerator component
  48.             return (
  49.                 <ExerciseGenerator
  50.                     numberOfMeasures={this.props.numberOfMeasures}
  51.                     onGenerateExerciseClose={this.showOrHideExerciseGenerator}
  52.                     showExercise={this.props.switchToExercise}
  53.                 />
  54.             );
  55.         } else {
  56.             // Returns a button that will open the ExerciseGenerator component
  57.             return (
  58.                 <RectangularButton
  59.                     type={buttonTypes.BUTTON}
  60.                     value="create-exercise-generation"
  61.                     text="Create an Exercise"
  62.                     backgroundColor={rectButtonColorOptions.ORANGE}
  63.                     onClick={this.showOrHideExerciseGenerator}
  64.                 />
  65.             );
  66.         }
  67.     };
  69.     /**
  70.      * Renders the MusicPerformanceHeader component
  71.      */
  72.     render() {
  73.         return (
  74.             <div className={styles.MusicPerformanceHeader}>
  75.                 {/* An exercise generator or a button */}
  76.                 {this.getExerciseGeneratorOrButton()}
  78.                 {/* A button to switch to the practice view */}
  79.                 <RectangularButton
  80.                     type={buttonTypes.BUTTON}
  81.                     value="practice"
  82.                     text="Practice Music"
  83.                     backgroundColor={rectButtonColorOptions.GREEN}
  84.                     onClick={this.props.switchToPractice}
  85.                 />
  86.             </div>
  87.         );
  88.     }
  89. }
  91. // Prop types for the MusicPerformanceHeader component
  92. MusicPerformanceHeader.propTypes = {
  93.     /**
  94.      * The number of measures in the current piece of sheet music
  95.      */
  96.     numberOfMeasures: PropTypes.string.isRequired,
  98.     /**
  99.      * Switches to the practice view
  100.      */
  101.     switchToPractice: PropTypes.func.isRequired,
  103.     /**
  104.      * Switches to the exercise view
  105.      */
  106.     switchToExercise: PropTypes.func.isRequired,
  107. };
  109. export default withRouter(MusicPerformanceHeader);