From b3398fe1f34e1a4d032bf41dc48b08988b559af1 Mon Sep 17 00:00:00 2001 From: BronzeToken <84642523+BronzeToken@users.noreply.github.com> Date: Wed, 23 Jun 2021 13:56:08 +0100 Subject: [PATCH 1/2] Update alerts.js --- src/components/includes/alerts.js | 59 ++++++++++++++++--------------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/src/components/includes/alerts.js b/src/components/includes/alerts.js index 4466dd2..15c7f7d 100644 --- a/src/components/includes/alerts.js +++ b/src/components/includes/alerts.js @@ -1,31 +1,25 @@ -import React, { Component } from 'react'; +import React, {useState, useRef, useEffect} from 'react'; import { connect } from 'react-redux'; import {isEmptyArray} from '../../helpers/helper'; import {setAlertAction, clearAlertAction} from '../../redux/actions/alertActions'; -export class Alerts extends Component { - state = { - alerts:[], - } +const Alerts = (props) => { + const [alerts, setAlert] = useState([]); + const mounted = useRef(); - componentDidUpdate(prevProps) { + useEffect(() => { + if(!mounted){ + if(props.alerts !== props.alerts && !isEmptyArray(props.alerts)) { + setAlert([...alerts, ...props.alert]); - if (this.props.alerts !== prevProps.alerts && !isEmptyArray(this.props.alerts)) { - - // Update current list of alerts in component state - this.setState({alerts:[...this.state.alerts,...this.props.alerts]}); - - // Clear list of alerts in reducer - this.props.clearAlertAction(); - - // re-render component - return true; + props.clearAlertAction(); + return true; + } } + }, [props.alerts]); - return false; - } - showAlert = (alerts)=>{ + const showAlert = (alerts)=>{ if (!isEmptyArray(alerts)) { // Display current alert messages in state @@ -40,25 +34,34 @@ export class Alerts extends Component { ); }); } - } + }; - clearAlert = (id) => { - const unread = this.state.alerts.filter(alert => alert.id !== id); - this.setState({alerts:unread}); - } - render() { + const clearAlert = (id) => { + const unread = alerts.filter((alert) => alert.id !== id); + setAlert(unread); + }; + + return (
- {this.showAlert(this.state.alerts)} + {showAlert(alerts)}
) - } + + + } + + + + + const mapStateToProps = state => ({ alerts: state.alert.alerts, }); -export default connect(mapStateToProps, {setAlertAction, clearAlertAction})(Alerts); \ No newline at end of file + +export default connect(mapStateToProps, {setAlertAction, clearAlertAction})(Alerts); From 15c4965d61cc587c5d2225cc400a7432236cb1db Mon Sep 17 00:00:00 2001 From: BronzeToken <84642523+BronzeToken@users.noreply.github.com> Date: Wed, 23 Jun 2021 16:16:25 +0100 Subject: [PATCH 2/2] commit k --- src/components/includes/alerts.js | 3 +- src/components/layouts/app.js | 19 +++--- .../modals/applicationStatusModal.js | 60 ++++++++++++------- src/components/navigation/topNavBar.js | 6 +- src/components/pages/landing.js | 6 +- src/index.js | 2 + 6 files changed, 57 insertions(+), 39 deletions(-) diff --git a/src/components/includes/alerts.js b/src/components/includes/alerts.js index 15c7f7d..87316b5 100644 --- a/src/components/includes/alerts.js +++ b/src/components/includes/alerts.js @@ -63,5 +63,4 @@ const mapStateToProps = state => ({ alerts: state.alert.alerts, }); - -export default connect(mapStateToProps, {setAlertAction, clearAlertAction})(Alerts); +export default connect(mapStateToProps, {setAlertAction, clearAlertAction})(Alerts); \ No newline at end of file diff --git a/src/components/layouts/app.js b/src/components/layouts/app.js index 8243a93..d778096 100644 --- a/src/components/layouts/app.js +++ b/src/components/layouts/app.js @@ -1,4 +1,5 @@ -import React, { Component } from 'react'; + +import React, {useState, useEffect} from 'react'; import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; import { Provider } from 'react-redux'; import {storeInstance} from '../../support/reducerSupport'; @@ -12,10 +13,11 @@ import TopNavBar from '../navigation/topNavBar'; import ApplicationStatusModal from '../modals/applicationStatusModal'; -export class App extends Component { + const App = () => { - constructor(){ - super(); + + + // Get last login details, if any re-login user let user = retrievePersistedLastLogin('session'); @@ -24,9 +26,6 @@ export class App extends Component { dispatch({type: AUTH_LOGIN_USER, payLoad: user.loginDetails}); }); } - } - - render() { return ( @@ -44,7 +43,11 @@ export class App extends Component { ); - } + + + + + } export default App; diff --git a/src/components/modals/applicationStatusModal.js b/src/components/modals/applicationStatusModal.js index 4c98e24..a37ac52 100644 --- a/src/components/modals/applicationStatusModal.js +++ b/src/components/modals/applicationStatusModal.js @@ -1,35 +1,49 @@ -import React, { Component } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { connect } from 'react-redux'; import DotsAnimation from '../animations/dotsAnimation'; import {PROCESSING_MUSIC} from '../music/music'; -export class AppStatusModal extends Component { +const AppStatusModal = (props) => { + const [applicationStatus, setApplicationStatus] = useState([]); + const mounted = useRef (); - componentDidMount(){ - this.initializeAudioPlayer(); - } - - componentDidUpdate(prevProps){ - if (prevProps.applicationStatus !== this.props.applicationStatus) { - if (this.props.applicationStatus.isProcessing===true) { - this.toggleDisplayModal('show'); - this.toggleProcessingMusic('start'); - } + useEffect(() => { + if(!mounted){ + if(props.applicationStatus !== props.applicationStatus) { + setApplicationStatus([...applicationStatus, ...props.applicationStatus]); - if (this.props.applicationStatus.isProcessing===false) { - this.toggleDisplayModal('hide'); - this.toggleProcessingMusic('stop'); + toggleDisplayModal('show'); + toggleProcessingMusic('hide'); + } } - } + }, [props.applicationStatus]); + + - initializeAudioPlayer = () => { + + + // componentDidUpdate(prevProps){ + // if (prevProps.applicationStatus !== this.props.applicationStatus) { + // if (this.props.applicationStatus.isProcessing===true) { + // this.toggleDisplayModal('show'); + // this.toggleProcessingMusic('start'); + // } + + // if (this.props.applicationStatus.isProcessing===false) { + // this.toggleDisplayModal('hide'); + // this.toggleProcessingMusic('stop'); + // } + // } + // } + + const initializeAudioPlayer = () => { this.audioPlayer = new Audio(PROCESSING_MUSIC); this.audioPlayer.volume = 0.3; this.audioPlayer.loop = true; } - toggleDisplayModal = (action) => { + const toggleDisplayModal = (action) => { const modal = document.getElementById('app-status-modal'); const modalOpenButton = document.getElementById('app-status-modal-open'); const modalCloseButton = document.getElementById('app-status-modal-close'); @@ -40,18 +54,18 @@ export class AppStatusModal extends Component { } else if (modal && modalOpenButton && !modal.classList.contains('show') && action==='show') { modalOpenButton.click(); } - } + }; - toggleProcessingMusic = (control) => { + const toggleProcessingMusic = (control) => { if (control === 'start') { this.audioPlayer.play().catch((err)=>{console.log(err);}); } else { this.audioPlayer.pause(); } - } + }; - render() { + return (
@@ -68,7 +82,7 @@ export class AppStatusModal extends Component {
) - } + } const mapStateToProps = (state) => ({ diff --git a/src/components/navigation/topNavBar.js b/src/components/navigation/topNavBar.js index bf1f45b..4779d18 100644 --- a/src/components/navigation/topNavBar.js +++ b/src/components/navigation/topNavBar.js @@ -2,9 +2,9 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import {NAV_BAR_LOGO_ONE} from '../images/images'; -export class TopNavBar extends Component { +const TopNavBar = ()=>{ - render() { + return ( ) - } + } export default TopNavBar; diff --git a/src/components/pages/landing.js b/src/components/pages/landing.js index 3cdd6c9..da0276f 100644 --- a/src/components/pages/landing.js +++ b/src/components/pages/landing.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; import DotsAnimation from '../animations/dotsAnimation'; -export class Landing extends Component { - render() { +export const Landing = () => { + return (
@@ -11,7 +11,7 @@ export class Landing extends Component {
) - } + } export default Landing; diff --git a/src/index.js b/src/index.js index e93a41d..bf4c2d6 100644 --- a/src/index.js +++ b/src/index.js @@ -3,9 +3,11 @@ import ReactDOM from 'react-dom'; import App from './components/layouts/app'; import * as serviceWorker from './serviceWorker'; + ReactDOM.render( + , document.getElementById('root') );