Source

pages/Startup/Startup.js

  1. // NPM module imports
  2. import React, { Component } from "react";
  3. import PropTypes from "prop-types";
  4. import { connect } from "react-redux";
  5. import { MetroSpinner } from "react-spinners-kit";
  7. // File imports
  8. import { startupDone } from "../../store/actions";
  10. // Image imports
  11. import logo from "../../assets/logos/tma-logo-white.png";
  13. // Style imports
  14. import styles from "./Startup.module.scss";
  16. /**
  17.  * Renders the Startup component.
  18.  * This component displays when the app is starting up (i.e. getting auth data).
  19.  * @extends {Component}
  20.  * @component
  21.  * @category Startup
  22.  * @author Dan Levy <danlevy124@gmail.com>
  23.  */
  24. class Startup extends Component {
  25.     /**
  26.      * Startup component state
  27.      * @property {number} windowInnerHeight - The inner height of the window (used to resize the component)
  28.      */
  29.     state = {
  30.         windowInnerHeight: window.innerHeight,
  31.     };
  33.     /**
  34.      * Tells Redux when app startup is done
  35.      */
  36.     componentDidUpdate() {
  37.         if (this.props.isAuthenticated !== null) {
  38.             // Startup is considered done when isAuthenticated is true or false
  39.             this.props.startupDone();
  40.         }
  41.     }
  43.     /**
  44.      * Renders the Startup component
  45.      * @returns {object} The JSX to render
  46.      */
  47.     render() {
  48.         return (
  49.             <div
  50.                 className={styles.startup}
  51.                 style={{ minHeight: `${this.state.windowInnerHeight}px` }}
  52.             >
  53.                 <div>
  54.                     <img
  55.                         className={styles.startupLogo}
  56.                         src={logo}
  57.                         alt="The Music Assistant Logo"
  58.                     />
  59.                     <h1 className={styles.startupHeading}>
  60.                         The Music Assistant
  61.                     </h1>
  62.                     <h2 className={styles.startupSubheading}>
  63.                         Just a moment...
  64.                     </h2>
  65.                     <div className={styles.startupSpinner}>
  66.                         <MetroSpinner
  67.                             size={75}
  68.                             color="#F8F8F8"
  69.                             loading={true}
  70.                         />
  71.                     </div>
  72.                 </div>
  73.             </div>
  74.         );
  75.     }
  76. }
  78. // Prop types for the Startup component
  79. Startup.propTypes = {
  80.     /**
  81.      * Indicates if there is an authenticated user
  82.      */
  83.     isAuthenticated: PropTypes.bool,
  85.     /**
  86.      * Indicates if the app startup is done
  87.      */
  88.     startupDone: PropTypes.func.isRequired,
  89. };
  91. /**
  92.  * Gets the current state from Redux and passes parts of it to the Startup component as props.
  93.  * This function is used only by the react-redux connect function.
  94.  * @memberof Startup
  95.  * @param {object} state - The Redux state
  96.  * @returns {object} Redux state properties used in the Startup component
  97.  */
  98. const mapStateToProps = (state) => {
  99.     return {
  100.         isAuthenticated: state.auth.isAuthenticated,
  101.     };
  102. };
  104. /**
  105.  * Passes certain Redux actions to the Startup component as props.
  106.  * This function is used only by the react-redux connect function.
  107.  * @memberof Startup
  108.  * @param {function} dispatch - The react-redux dispatch function
  109.  * @returns {object} Redux actions used in the Startup component
  110.  */
  111. const mapDispatchToProps = (dispatch) => {
  112.     return {
  113.         startupDone: () => dispatch(startupDone()),
  114.     };
  115. };
  117. export default connect(mapStateToProps, mapDispatchToProps)(Startup);