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