refactor and cleanup modals slightly

src/App.jsx

@@ -17,10 +17,8 @@ import merge from 'lodash.merge';
 import RoomIcon from '@material-ui/icons/Room';
 
 // Modals are lazy loaded as a user won't use them every time they open a tab
-const Settings = React.lazy(() => import('./components/modals/Settings'));
+const MainModal = React.lazy(() => import('./components/modals/MainModal'));
 const Update = React.lazy(() => import('./components/modals/Update'));
-const Marketplace = React.lazy(() => import('./components/modals/Marketplace'));
-const Addons = React.lazy(() => import('./components/modals/Addons'));
 //const Welcome = React.lazy(() => import('./components/modals/Welcome'));
 const renderLoader = () => <div></div>;
 
@@ -28,12 +26,8 @@ export default class App extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      settingsModal: false,
-      updateModal: false,
-      marketplaceModal: false,
-      addonsModal: false,
-      quickAccessmodal: false,
-      welcomeModal: false
+      mainModal: false,
+      updateModal: false
     };
   }
 
@@ -66,7 +60,7 @@ export default class App extends React.PureComponent {
         <ToastContainer className='toast' position='bottom-right' autoClose={2500} hideProgressBar={false} newestOnTop={true} closeOnClick rtl={false} pauseOnFocusLoss />
         <div id='center'>
           <Search language={language.search} />
-          <Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
+          <Navbar settingsModalOpen={() => this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
           <Greeting language={language.greeting} />
           <Clock/>
           <Quote language={language.toasts}/>
@@ -81,14 +75,11 @@ export default class App extends React.PureComponent {
           <Maximise/>
           <Favourite/>
           <React.Suspense fallback={renderLoader()}>
-            <Modal id={'modal'} onRequestClose={() => this.setState({ settingsModal: false })} isOpen={this.state.settingsModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
-              <Settings
-                language={language.settings}
+            <Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
+              <MainModal
+                language={language}
                 modalLanguage={language.modals}
-                modalClose={() => this.setState({ settingsModal: false })}
-                setDefaultSettings={() => SettingsFunctions.setDefaultSettings()}
-                openMarketplace={() => this.setState({ marketplaceModal: true, settingsModal: false })}
-                openAddons={() => this.setState({ settingsModal: false, addonsModal: true })}
+                modalClose={() => this.setState({ mainsModal: false })}
                 toastLanguage={language.toasts} />
             </Modal>
             <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
@@ -96,25 +87,6 @@ export default class App extends React.PureComponent {
                 language={language.update}
                 modalClose={() => this.setState({ updateModal: false })} />
             </Modal>
-            <Modal onRequestClose={() => this.setState({ marketplaceModal: false })} isOpen={this.state.marketplaceModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
-              <Marketplace
-                language={language.marketplace}
-                modalLanguage={language.modals}
-                modalClose={() => this.setState({ marketplaceModal: false })}
-                openSettings={() => this.setState({ marketplaceModal: false, settingsModal: true })}
-                openAddons={() => this.setState({ marketplaceModal: false, addonsModal: true })}
-                toastLanguage={language.toasts} />
-            </Modal>
-            <Modal onRequestClose={() => this.setState({ addonsModal: false })} isOpen={this.state.addonsModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
-              <Addons
-                language={language.addons}
-                marketplaceLanguage={language.marketplace}
-                modalLanguage={language.modals}
-                modalClose={() => this.setState({ addonsModal: false })}
-                openSettings={() => this.setState({ addonsModal: false, settingsModal: true })}
-                openMarketplace={() => this.setState({ addonsModal: false, marketplaceModal: true })}
-                toastLanguage={language.toasts} />
-            </Modal>
             {/* <Modal onRequestClose={() => this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
               <Welcome modalClose={() => this.setState({ welcomeModal: false })} />
              </Modal> */ }

src/components/modals/MainModal.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import Settings from './tabs/Settings';
+import Addons from './tabs/Addons';
+import Marketplace from './tabs/Marketplace';
+
+export default class MainModal extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            tab: <Settings language={this.props.language.settings} toastLanguage={this.props.toastLanguage} />,
+            settingsActive: 'active',
+            addonsActive: '',
+            marketplaceActive: ''
+        };
+    }
+
+  componentDidMount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  componentWillUnmount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  changeEnabled(input) {
+      switch (input) {
+          case 'addons':
+              this.setState({
+                  tab: <Addons language={this.props.language.addons} marketplaceLanguage={this.props.language.marketplace} toastLanguage={this.props.toastLanguage}/>,
+                  addonsActive: 'active',
+                  settingsActive: '',
+                  marketplaceActive: ''
+              });
+              break;
+          case 'settings':
+              this.setState({
+                  tab: <Settings language={this.props.language.settings} toastLanguage={this.props.toastLanguage}/>,
+                  settingsActive: 'active',
+                  addonsActive: '',
+                  marketplaceActive: ''
+              });
+              break;
+          case 'marketplace':
+              this.setState({
+                  tab: <Marketplace language={this.props.language.marketplace} toastLanguage={this.props.toastLanguage}/>,
+                  marketplaceActive: 'active',
+                  addonsActive: '',
+                  settingsActive: ''
+              });
+              break;
+            default:
+                break;
+      }
+  }
+
+  render() {
+    return (
+      <div className='content'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1>{this.props.modalLanguage.title}</h1>
+        <div className='tab'>
+          <button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}>{this.props.modalLanguage.marketplace}</button>
+          <button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}>{this.props.modalLanguage.addons}</button>
+          <button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}>{this.props.modalLanguage.settings}</button>
+        </div>
+        <br/>
+        {this.state.tab}
+      </div>
+    )
+  }
+}

src/components/modals/tabs/Addons.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import LocalMallIcon from '@material-ui/icons/LocalMall';
 import { toast } from 'react-toastify';
-import Item from './marketplace/Item';
-import MarketplaceFunctions from '../../modules/marketplaceFunctions';
+import Item from '../marketplace/Item';
+import MarketplaceFunctions from '../../../modules/marketplaceFunctions';
 
 export default class Addons extends React.PureComponent {
     constructor(...args) {
@@ -136,16 +136,9 @@ export default class Addons extends React.PureComponent {
         };
     };
 
-    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-    document.getElementById('center').classList.toggle('backgroundEffects');
     this.setState({ installed: JSON.parse(localStorage.getItem('installed')) });
   }
 
-  componentWillUnmount() {
-    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-    document.getElementById('center').classList.toggle('backgroundEffects');
-  }
-
   render() {
      let content = <div className='items'>
            {this.state.installed.map((item) =>
@@ -169,21 +162,16 @@ export default class Addons extends React.PureComponent {
            </div>;
      }
 
-    return <div className='content'>
-        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <h1>{this.props.modalLanguage.title}</h1>
-        <div className='tab'>
-            <button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
-            <button className='tablinks' id='active'>{this.props.modalLanguage.addons}</button>
-            <button className='tablinks' onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
-        </div>
-        <div id='marketplace'>
-           <input id='file-input' type='file' name='name' className='hidden' />
-           <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
-           <h1>{this.props.language.added}</h1>
-           {content}
-        </div>
-        <Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
-    </div>;
+    return (
+       <div>
+         <div id='marketplace'>
+          <input id='file-input' type='file' name='name' className='hidden' />
+          <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
+          <h1>{this.props.language.added}</h1>
+          {content}
+         </div>
+         <Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
+       </div>
+        );
     }
 }

src/components/modals/tabs/Marketplace.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import WifiOffIcon from '@material-ui/icons/WifiOff';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { toast } from 'react-toastify';
-import Item from './marketplace/Item';
-import MarketplaceFunctions from '../../modules/marketplaceFunctions';
-import * as Constants from '../../modules/constants';
-import Items from './marketplace/Items';
+import Item from '../marketplace/Item';
+import MarketplaceFunctions from '../../../modules/marketplaceFunctions';
+import * as Constants from '../../../modules/constants';
+import Items from '../marketplace/Items';
 
 export default class Marketplace extends React.PureComponent {
     constructor(...args) {
@@ -35,22 +35,12 @@ export default class Marketplace extends React.PureComponent {
             }
         }
 
-        this.offlineHTML = <div className='content'>
-        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <h1>{this.props.modalLanguage.title}</h1>
-        <div className='tab'>
-            <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
-            <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
-            <button className='tablinks'
-                onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
-        </div>
-        <div id='marketplace'>
+        this.offlineHTML = <div id='marketplace'>
             <div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
                 <WifiOffIcon />
                 <h1>{this.props.language.offline.title}</h1>
                 <p className='description'>{this.props.language.offline.description}</p>
             </div>
-        </div>
         </div>;
     }
 
@@ -161,47 +151,25 @@ export default class Marketplace extends React.PureComponent {
     }
 
     componentDidMount() {
-      document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-      document.getElementById('center').classList.toggle('backgroundEffects');
       if (navigator.onLine === false) return;
       this.getItems();
     }
 
-   componentWillUnmount() {
-      document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-      document.getElementById('center').classList.toggle('backgroundEffects');
-   }
-
   render() {
     if (navigator.onLine === false) return this.offlineHTML;
     if (this.state.done === false) {
-        return <div className='content'>
-        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <h1>{this.props.modalLanguage.title}</h1>
-        <div className='tab'>
-            <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
-            <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
-            <button className='tablinks'
-                onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
-        </div>
-        <div id='marketplace'>
+        return (
+            <div id='marketplace'>
             <div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
                 <h1>Loading...</h1>
             </div>
-        </div>
-        </div>;
+          </div>
+        )
     }
 
-    return <div className='content'>
-             <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-             <h1>{this.props.modalLanguage.title}</h1>
-             <div className='tab'>
-                 <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
-                 <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
-                 <button className='tablinks'
-                     onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
-             </div>
-             <div id='marketplace'>
+    return (
+        <div>
+            <div id='marketplace'>
                  <div className='featured' style={{backgroundColor: this.state.featured.colour}}>
                      <p>{this.state.featured.title}</p>
                      <h1>{this.state.featured.name}</h1>
@@ -247,6 +215,7 @@ export default class Marketplace extends React.PureComponent {
                   items={this.state.see_more}
                 />
              </div>
-            </div>;
+        </div>
+      )
     }
 }

src/components/modals/tabs/Settings.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import SettingsFunctions from '../../modules/settingsFunctions';
-import Checkbox from './settings/Checkbox';
-import Slider from './settings/Slider';
-import Section from './settings/Section';
+import SettingsFunctions from '../../../modules/settingsFunctions';
+import Checkbox from '../settings/Checkbox';
+import Slider from '../settings/Slider';
+import Section from '../settings/Section';
 import { toast } from 'react-toastify';
 
-import BackgroundSettings from './settings/sections/BackgroundSettings';
-import SearchSettings from './settings/sections/SearchSettings';
-import LanguageSettings from './settings/sections/LanguageSettings';
+import BackgroundSettings from '../settings/sections/BackgroundSettings';
+import SearchSettings from '../settings/sections/SearchSettings';
+import LanguageSettings from '../settings/sections/LanguageSettings';
 
 export default class Settings extends React.PureComponent {
   resetGreeting() {
@@ -41,28 +41,10 @@ export default class Settings extends React.PureComponent {
         toast(this.props.toastLanguage.imported);
       };
     };
-
-    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-    document.getElementById('center').classList.toggle('backgroundEffects');
-  }
-
-  componentWillUnmount() {
-    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-    document.getElementById('center').classList.toggle('backgroundEffects');
   }
 
   render() {
     return (
-      <div className='content'>
-        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <h1>{this.props.modalLanguage.title}</h1>
-        <div className='tab'>
-          <button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
-          <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
-          <button className='tablinks' id='active'>{this.props.modalLanguage.settings}</button>
-        </div>
-        <br/>
-
         <div className='columns'>
           <Section title={this.props.language.time.title} name='time'>
             <Checkbox name='seconds' text={this.props.language.time.seconds} />
@@ -112,7 +94,6 @@ export default class Settings extends React.PureComponent {
           <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
           <input id='file-input' type='file' name='name' className='hidden' accept='application/json' />
         </div>
-      </div>
     );
   }
 }

src/components/widgets/Search.jsx

@@ -62,4 +62,4 @@ export default class Search extends React.PureComponent {
       </div>
     );
   }
-}
+}