diff --git a/src/components/includes/alerts.js b/src/components/includes/alerts.js
index 4466dd2..87316b5 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,23 +34,31 @@ 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,
});
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')
);