Boiler-plate changes

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 (
             <div style={{position:'fixed', marginTop:70, zIndex:10, width:'40%', padding:'0px 60px', marginLeft:'60%'}}>
-                {this.showAlert(this.state.alerts)}
+                {showAlert(alerts)}
             </div>
         )
-    }
+
+
+
 }
 
+
+
+
+
+
 const mapStateToProps = state => ({
     alerts: state.alert.alerts,
 });

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 (
       <Provider store={storeInstance()}>
         <Router>
@@ -44,7 +43,11 @@ export class App extends Component {
         </Router>
       </Provider>
     );
-  }
+
+
+
+
+
 }
 
 export default App;

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 (
             <div>
                 <button style={{display:'none'}} id="app-status-modal-open" type="button" data-toggle="modal" data-target="#app-status-modal">Launch</button>
@@ -68,7 +82,7 @@ export class AppStatusModal extends Component {
                 </div>
             </div>
         )
-    }
+
 }
 
 const mapStateToProps = (state) => ({

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 (
             <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                 <Link to="/" className="navbar-brand pl-3">
@@ -19,7 +19,7 @@ export class TopNavBar extends Component {
                 </div>
             </nav>
         )
-    }
+
 }
 
 export default TopNavBar;

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 (
             <div style={{height:'100vh'}}>
                 <div style={{textAlign:'center', marginTop:'20%'}}>
@@ -11,7 +11,7 @@ export class Landing extends Component {
                 </div>
             </div>
         )
-    }
+
 }
 
 export default Landing;

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(
   <React.StrictMode>
     <App />
+
   </React.StrictMode>,
   document.getElementById('root')
 );