bug fixes

src/components/modals/Feedback.jsx

@@ -1,25 +1,25 @@
 import React from 'react';
 
-export default class Feedback extends React.PureComponent {
-    render() {
-        return (
-          <div className='feedback'>
-            <h1>Give us feedback</h1>
-            <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-             <label>How would you rate your experience of this Mue Build?</label>
-             <br/><br/>
-             <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
-             <br/><br/>
-             <label>What bugs did you encounter in your use of Mue?</label>
-             <br/><br/>
-             <input type='text'/>
-             <br/><br/>
-             <label>How likely would you be to recommend this version of Mue to a friend or colleague?</label>
-             <br/><br/>
-             <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
-             <br/><br/><br/>
-             <button>Submit</button>
-         </div>
-        );
-    }
+const FeedbackModal = () => {
+    return (
+        <div className='feedback'>
+          <h1>Give us feedback</h1>
+          <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+           <label>How would you rate your experience of this Mue Build?</label>
+           <br/><br/>
+           <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
+           <br/><br/>
+           <label>What bugs did you encounter in your use of Mue?</label>
+           <br/><br/>
+           <input type='text'/>
+           <br/><br/>
+           <label>How likely would you be to recommend this version of Mue to a friend or colleague?</label>
+           <br/><br/>
+           <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
+           <br/><br/><br/>
+           <button>Submit</button>
+       </div>
+    );
 }
+
+export default FeedbackModal;

src/components/modals/Main.jsx

@@ -41,7 +41,8 @@ export default class MainModal extends React.PureComponent {
     document.getElementById(input + 'TabLink').classList.toggle('active');
 
     this.setState({ 
-      tab: this.tabs[input], currentTab: input 
+      tab: this.tabs[input], 
+      currentTab: input 
     });
   }
 

src/components/modals/Welcome.jsx

@@ -3,25 +3,25 @@ import EmailIcon from '@material-ui/icons/Email';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import ForumIcon from '@material-ui/icons/Forum';
 
-export default class Welcome extends React.PureComponent {
-  render() {
-    return (
-      <div className='welcomeContent'>
-        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+const WelcomeModal = (props) => {
+  return (
+    <div className='welcomeContent'>
+        <span className='closeModal' onClick={props.modalClose}>&times;</span>
         <div className='welcomeModalText'>
-          <h2 className='subtitle'>{this.props.language.title}</h2>
+          <h2 className='subtitle'>{props.language.title}</h2>
           <h1 className='welcometitle'>Mue Tab</h1>
           <img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} draggable={false} src='./././icons/undraw_celebration.svg' />
-          <h2 className='subtitle'>{this.props.language.information}</h2>
-          <p>{this.props.language.thankyoumessage1},<br/> {this.props.language.thankyoumessage2}</p>
-          <h2 className='subtitle'>{this.props.language.support}</h2>
+          <h2 className='subtitle'>{props.language.information}</h2>
+          <p>{props.language.thankyoumessage1},<br/> {props.language.thankyoumessage2}</p>
+          <h2 className='subtitle'>{props.language.support}</h2>
           <a href='mailto:hello@muetab.com' className='welcomeLink' target='_blank' rel='noopener noreferrer'><EmailIcon/></a>
           <a href='https://twitter.com/getmue' className='welcomeLink' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
           <a href='https://discord.gg/zv8C9F8' className='welcomeLink' target='_blank' rel='noopener noreferrer'><ForumIcon/></a>
           <br/>
-          <button className='close' onClick={this.props.modalClose}>{this.props.language.close}</button>
+          <button className='close' onClick={props.modalClose}>{props.language.close}</button>
         </div>
        </div>
-      );
-    }
-}
+  );
+}
+
+export default WelcomeModal;

src/components/modals/settings/FileUpload.jsx

@@ -13,8 +13,10 @@ export default class FileUpload extends React.PureComponent {
           if (file.size > 2000000) {
             return toast('File is over 2MB');
           }
+
           reader.readAsDataURL(file);
         }
+        
         reader.addEventListener('load', (e) => this.props.loadFunction(e));
     };
   }

src/components/modals/settings/Section.jsx

@@ -46,7 +46,7 @@ export default class Section extends React.PureComponent {
       slider = <Slider name={this.props.name} />;
     }
     
-    if (this.props.dropdown === false){
+    if (this.props.dropdown === false) {
       noDropdown = 'nodropdown';
     }
 

src/components/modals/settings/Slider.jsx

@@ -11,6 +11,7 @@ export default class Slider extends React.PureComponent {
 
   handleChange(name) {
     SettingsFunctions.setItem(name);
+    
     this.setState({ 
       checked: (this.state.checked === true) ? false : true 
     });

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -190,7 +190,10 @@ export default class BackgroundSettings extends React.PureComponent {
 
       let gradientInputs;
       if (gradientHasMoreThanOneColour) {
-        if (this.GradientPickerInitalState === undefined) this.InitializeColorPickerState(this.state.gradientSettings);
+        if (this.GradientPickerInitalState === undefined) {
+          this.InitializeColorPickerState(this.state.gradientSettings);
+        }
+        
         gradientInputs = (
           <ColorPicker
             onStartChange={(color) => this.onColorPickerChange(color, 'start')}

src/components/modals/settings/sections/GreetingSettings.jsx

@@ -15,7 +15,9 @@ export default class GreetingSettings extends React.PureComponent {
   }
 
   resetItem() {
-    this.setState({ greetingName: '' });
+    this.setState({ 
+      greetingName: '' 
+    });
     toast(this.props.toastLanguage.reset);
   }
 

src/components/modals/settings/sections/LanguageSettings.jsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import Dropdown from '../Dropdown';
 
-export default class LanguageSettings extends React.PureComponent {
-  render() {
-    return (
-      <div className='section'>
-        <h4 htmlFor='language' className='nodropdown'>{this.props.language.language}</h4>
-        <Dropdown
-          name='language'
-          id='language'
-          onChange={() => localStorage.setItem('language', document.getElementById('language').value)} >
-            <option className='choices' value='en'>English</option>
-            <option className='choices' value='es'>Español</option>
-            <option className='choices' value='fr'>Français</option>
-            <option className='choices' value='nl'>Nederlands</option>
-            <option className='choices' value='no'>Norsk</option>
-            <option className='choices' value='ru'>Pусский</option>
-        </Dropdown>
-      </div>
-    );
-  }
-}
+const LanguageSettings = (props) => {
+  return (
+    <div className='section'>
+      <h4 htmlFor='language' className='nodropdown'>{props.language.language}</h4>
+      <Dropdown
+        name='language'
+        id='language'
+        onChange={() => localStorage.setItem('language', document.getElementById('language').value)} >
+          <option className='choices' value='en'>English</option>
+          <option className='choices' value='es'>Español</option>
+          <option className='choices' value='fr'>Français</option>
+          <option className='choices' value='nl'>Nederlands</option>
+          <option className='choices' value='no'>Norsk</option>
+          <option className='choices' value='ru'>Pусский</option>
+      </Dropdown>
+    </div>
+  );
+}
+
+export default LanguageSettings;

src/components/modals/tabs/Addons.jsx

@@ -58,6 +58,7 @@ export default class Addons extends React.PureComponent {
             document.getElementById('marketplace').style.display = 'block';
             document.getElementById('item').style.display = 'none';
         }
+        
         this.setState({ 
             button: this.buttons.uninstall 
         });
@@ -78,7 +79,7 @@ export default class Addons extends React.PureComponent {
     toast(this.props.toastLanguage[type + 'ed']);
 
     let button = '';
-    if (type === 'install'){
+    if (type === 'install') {
         button = this.buttons.uninstall;
     }
 

src/components/modals/tabs/Marketplace.jsx

@@ -81,7 +81,7 @@ export default class Marketplace extends React.PureComponent {
 
             this.setState({
                button: button 
-              });
+            });
 
             document.getElementById('marketplace').style.display = 'none';
             document.getElementById('seemore').style.display = 'none';
@@ -97,14 +97,14 @@ export default class Marketplace extends React.PureComponent {
    }
 
   async getItems() {
-    const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
+    const { data }= await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
     const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
 
     this.setState({
-        settings: data.data.settings,
-        photo_packs: data.data.photo_packs,
-        quote_packs: data.data.quote_packs,
-        see_more: data.data.photo_packs,
+        settings: data.settings,
+        photo_packs: data.photo_packs,
+        quote_packs: data.quote_packs,
+        see_more: data.photo_packs,
         featured: featured.data,
         done: true
     });
@@ -133,7 +133,7 @@ export default class Marketplace extends React.PureComponent {
       document.getElementById('marketplace').classList.add('marketplaceanimation');
     }
 
-    if (navigator.onLine === false) {
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return;
     }
 
@@ -141,7 +141,7 @@ export default class Marketplace extends React.PureComponent {
   }
 
   render() {
-    const returnMessage = (msg) => {
+    const errorMessage = (msg) => {
         return (
             <div id='marketplace'>
               <div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
@@ -152,7 +152,7 @@ export default class Marketplace extends React.PureComponent {
     }
 
     if (navigator.onLine === false) {
-        return returnMessage(
+        return errorMessage(
             <React.Fragment>
                 <WifiOffIcon/>
                 <h1>{this.props.language.offline.title}</h1>
@@ -161,7 +161,19 @@ export default class Marketplace extends React.PureComponent {
         );
     }
 
-    if (this.state.done === false) return returnMessage(<h1>{this.props.updateLanguage.loading}</h1>);
+    if (localStorage.getItem('offlineMode') === 'true') {
+      return errorMessage(
+        <React.Fragment>
+            <WifiOffIcon/>
+            <h1>Offline mode is enabled</h1>
+            <p className='description'>Please turn off offline mode to access the marketplace</p>
+        </React.Fragment>
+      );
+    }
+
+    if (this.state.done === false) {
+      return errorMessage(<h1>{this.props.updateLanguage.loading}</h1>);
+    }
 
     return (
         <React.Fragment>