refactor: make modals like widgets

src/App.jsx

@@ -2,29 +2,16 @@ import React from 'react';
 
 import Background from './components/widgets/background/Background';
 import Widgets from './components/widgets/Widgets';
-import Navbar from './components/widgets/navbar/Navbar';
+import Modals from './components/modals/Modals';
 
 import SettingsFunctions from './modules/helpers/settings';
 import { ToastContainer } from 'react-toastify';
-import Modal from 'react-modal';
-
-// Modals are lazy loaded as the user won't use them every time they open a tab
-const Main = React.lazy(() => import('./components/modals/Main'));
-const Update = React.lazy(() => import('./components/modals/Update'));
-const Welcome = React.lazy(() => import('./components/modals/Welcome'));
-//const Feedback = React.lazy(() => import('./components/modals/Feedback'));
-const renderLoader = () => <div></div>;
 
 export default class App extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      mainModal: false,
-      updateModal: false,
-      welcomeModal: false,
-      feedbackModal: false,
-      toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500,
-      overlayClassList: (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'
+      toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500
     };
   }
 
@@ -33,27 +20,7 @@ export default class App extends React.PureComponent {
       SettingsFunctions.setDefaultSettings();
     }
 
-    if (localStorage.getItem('showWelcome') === 'true') {
-      this.setState({
-        welcomeModal: true
-      });
-    }
-
     SettingsFunctions.loadSettings();
-
-    // dark theme support for modals and info card
-    let modalClassList = 'Modal';
-    let tooltipClassList = 'infoCard';
-    
-    if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
-      modalClassList += ' dark';
-      tooltipClassList += ' dark';
-    }
-
-    this.setState({
-      modalClassList: modalClassList,
-      tooltipClassList: tooltipClassList
-    });
     
     // These lines of code prevent double clicking the page or pressing CTRL + A from highlighting the page
     document.addEventListener('mousedown', (event) => {
@@ -76,35 +43,14 @@ export default class App extends React.PureComponent {
     };
   }
 
-  closeWelcome() {
-    localStorage.setItem('showWelcome', false);
-    this.setState({
-      welcomeModal: false
-    });
-  }
-
   render() {
     return (
       <React.Fragment>
-        <Background photoInformationClass={this.state.tooltipClassList}/>
+        <Background/>
         <ToastContainer position='bottom-right' autoClose={this.state.toastDisplayTime} newestOnTop={true} closeOnClick pauseOnFocusLoss/>
         <div id='center'>
-          <Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
           <Widgets/>
-          <React.Suspense fallback={renderLoader()}>
-            <Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
-              <Main modalClose={() => this.setState({ mainModal: false })} />
-            </Modal>
-            <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
-              <Update modalClose={() => this.setState({ updateModal: false })} />
-            </Modal>
-            <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
-              <Welcome modalClose={() => this.closeWelcome()} />
-            </Modal>
-            {/* <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
-              <Feedback modalClose={() => this.setState({ feedbackModal: false })} />
-            </Modal> */}
-          </React.Suspense>
+          <Modals/>
         </div>
       </React.Fragment>
     );