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>

src/components/widgets/Widgets.jsx

@@ -26,7 +26,6 @@ export default class Widgets extends React.PureComponent {
     return enabled;
   }
 
-  // Render all the components
   render() {
     const { language, languagecode } = this.props;
     const enabled = this.enabled;

src/components/widgets/background/Background.jsx

@@ -72,7 +72,7 @@ export default class Background extends React.PureComponent {
     this.setBackground(url);
     this.setCredit(photographer);
 
-    document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon
+    //document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon
   }
 
   async determineMode() {

src/components/widgets/background/Favourite.jsx

@@ -13,7 +13,9 @@ export default class Favourite extends React.PureComponent {
   favourite() {
       if (localStorage.getItem('favourite')) {
         localStorage.removeItem('favourite');
-        this.setState({ favourited: <StarIcon2 onClick={() => this.favourite()} /> });
+        this.setState({ 
+          favourited: <StarIcon2 onClick={() => this.favourite()} /> 
+        });
       } else {
         const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
         const credit = document.getElementById('credit').textContent;

src/components/widgets/background/Maximise.jsx

@@ -18,6 +18,7 @@ export default class View extends React.PureComponent {
 
     viewStuff() {
       const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; // elements to hide
+      
       elements.forEach((element) => {
           try {
               (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
@@ -30,11 +31,13 @@ export default class View extends React.PureComponent {
           this.setState({ 
               hidden: true 
           });
+
           this.setAttribute(0, 100);
       } else {
           this.setState({ 
               hidden: false 
           });
+
           this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'));
       }
   }

src/components/widgets/background/PhotoInformation.jsx

@@ -5,27 +5,27 @@ import Camera from '@material-ui/icons/PhotoCamera';
 import Resolution from '@material-ui/icons/Crop';
 import Photographer from '@material-ui/icons/Person';
 
-export default class PhotoInformation extends React.PureComponent {
-  render() {
-    return (
-      <div className='photoInformation'>
-        <h1 id='photographer'>{this.props.language.credit}</h1>
-        <Info className='photoInformationHover'/>
-        <div className={this.props.className || 'infoCard'}>
-          <Info className='infoIcon'/>
-          <h1>{this.props.language.information}</h1>
-          <hr/>
-          <Location/>
-          <span id='location'></span>
-          <Camera/>
-          <span id='camera'></span>
-          <Resolution/>
-          <span id='resolution'></span>
-          <Photographer/>
-          <span id='photographerCard'></span>
-        </div>
-        <span id='credit' style={{ 'display': 'none' }}></span>
+const PhotoInformation = (props) => {
+  return (
+    <div className='photoInformation'>
+      <h1 id='photographer'>{props.language.credit}</h1>
+      <Info className='photoInformationHover'/>
+      <div className={props.className || 'infoCard'}>
+        <Info className='infoIcon'/>
+        <h1>{props.language.information}</h1>
+        <hr/>
+        <Location/>
+        <span id='location'></span>
+        <Camera/>
+        <span id='camera'></span>
+        <Resolution/>
+        <span id='resolution'></span>
+        <Photographer/>
+        <span id='photographerCard'></span>
       </div>
-    );
-  }
+      <span id='credit' style={{ 'display': 'none' }}></span>
+    </div>
+  );
 }
+
+export default PhotoInformation;

src/components/widgets/greeting/Greeting.jsx

@@ -16,14 +16,14 @@ export default class Greeting extends React.PureComponent {
     }
 
     // Get current month & day
-    const m = time.getMonth();
-    const d = time.getDate();
+    const month = time.getMonth();
+    const date = time.getDate();
 
-    if (m === 11 && d === 25) {
+    if (month === 11 && date === 25) {
       message = this.props.language.christmas;  // If it's December 25th, set the greeting string to "Merry Christmas"
-    } else if (m === 0 && d === 1) {
+    } else if (month === 0 && date === 1) {
       message = this.props.language.newyear; // If the date is January 1st, set the greeting string to "Happy new year"
-    } else if (m === 9 && d === 31) {
+    } else if (month === 9 && date === 31) {
       message = this.props.language.halloween; // If it's October 31st, set the greeting string to "Happy Halloween"
     }
 

src/components/widgets/navbar/Navbar.jsx

@@ -30,11 +30,11 @@ export default class Navbar extends React.PureComponent {
     // toggle feedback button
     let feedbackHTML = (
       <Tooltip title='Feedback' placement='top'>
-        <Report className='topicons' onClick={this.props.feedbackModalOpen} />
+        <Report className='topicons' onClick={() => this.props.openModal('feedbackModal')} />
       </Tooltip>
     );
   
-    if (Constants.BETA_VERSION === false){
+    if (Constants.BETA_VERSION === false) {
       feedbackHTML = null;
     }
 
@@ -48,11 +48,11 @@ export default class Navbar extends React.PureComponent {
         </div>
         {feedbackHTML}
         <Tooltip title={this.props.language.navbar.tooltips.update} placement='top'>
-          <NewReleases className='refreshicon topicons' onClick={this.props.updateModalOpen} />
+          <NewReleases className='refreshicon topicons' onClick={() => this.props.openModal('updateModal')} />
         </Tooltip>
         {refreshHTML}
         <Tooltip title={this.props.language.modals.settings} placement='top'>
-          <Gear className='settings-icon topicons' onClick={this.props.mainModalOpen} />
+          <Gear className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')} />
         </Tooltip>
       </div>
     );

src/components/widgets/navbar/Notes.jsx

@@ -14,12 +14,19 @@ export default class Notes extends React.PureComponent {
 
     setNotes = (e) => {
         localStorage.setItem('notes', e.target.value);
-        this.setState({ notes: e.target.value });
+        this.setState({ 
+            notes: e.target.value 
+        });
     };
 
     pin() {
         document.getElementById('noteContainer').classList.toggle('visibilityshow');
-        (localStorage.getItem('notesPinned') === 'true') ? localStorage.setItem('notesPinned', false) : localStorage.setItem('notesPinned', true);
+        
+        if (localStorage.getItem('notesPinned') === 'true') {
+            localStorage.setItem('notesPinned', false);
+        } else {
+            localStorage.setItem('notesPinned', true);
+        }
     }
 
     componentDidMount() {

src/components/widgets/navbar/Pin.jsx

@@ -14,14 +14,15 @@
    See the License for the specific language governing permissions and
    limitations under the License.
 */
-
 import React from 'react';
 
-export default class Pin extends React.PureComponent {
-    render() {
-        return <svg xmlns='http://www.w3.org/2000/svg' enableBackground='new 0 0 24 24' viewBox='0 0 24 24' fill='black' width='18px' height='18px'>
-            <g><rect fill='none' height='24' width='24'/></g>
-            <g><path d='M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z' fillRule='evenodd'/></g>
-        </svg>;
-    }
+const Pin = () => {
+    return (
+        <svg xmlns='http://www.w3.org/2000/svg' enableBackground='new 0 0 24 24' viewBox='0 0 24 24' fill='black' width='18px' height='18px'>
+          <g><rect fill='none' height='24' width='24'/></g>
+          <g><path d='M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z' fillRule='evenodd'/></g>
+        </svg>
+    );
 }
+
+export default Pin;

src/components/widgets/quote/Quote.jsx

@@ -118,19 +118,27 @@ export default class Quote extends React.PureComponent {
 
   componentDidMount() {
     if (localStorage.getItem('favouriteQuote')) {
-      this.setState({ favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} /> });
+      this.setState({ 
+        favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} /> 
+      });
     }
 
     if (localStorage.getItem('favouriteQuoteEnabled') === 'false') {
-      this.setState({ favourited: null });
+      this.setState({ 
+        favourited: null 
+      });
     }
 
     if (localStorage.getItem('copyButton') === 'false') {
-      this.setState({ copy: null });
+      this.setState({ 
+        copy: null 
+      });
     }
 
-    if (localStorage.getItem('tweetEnabled') === 'false') {
-      this.setState({ tweet: null });
+    if (localStorage.getItem('tweetButton') === 'false') {
+      this.setState({ 
+        tweet: null 
+      });
     }
   
     this.getQuote();

src/components/widgets/search/Search.jsx

@@ -33,12 +33,15 @@ export default class Search extends React.PureComponent {
 
     const setting = localStorage.getItem('searchEngine');
     const info = searchEngines.find(i => i.settingsName === setting);
+    
     if (info !== undefined) {
       url = info.url;
       if (info.query) query = info.query;
     }
 
-    if (setting === 'custom') url = localStorage.getItem('customSearchEngine');
+    if (setting === 'custom') {
+      url = localStorage.getItem('customSearchEngine');
+    }
 
     const searchButton = () => {
       const value = document.getElementById('searchtext').value || 'mue fast';

src/components/widgets/time/Clock.jsx

@@ -20,12 +20,15 @@ export default class Clock extends React.PureComponent {
 
       // Percentage
       if (localStorage.getItem('percentageComplete') === 'true') {
-        return this.setState({ time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'});
+        return this.setState({ 
+          time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
+        });
       }
 
       // Analog clock
       if (localStorage.getItem('analog') === 'true') {
         require('react-clock/dist/Clock.css'); // load analog clock css
+        
         this.setState({ 
           time: now 
         });
@@ -49,7 +52,9 @@ export default class Clock extends React.PureComponent {
             time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
           }
 
-          this.setState({ time: time });
+          this.setState({ 
+            time: time 
+          });
         } else {
           // 12 hour support
           let hours = now.getHours();

src/components/widgets/time/Date.jsx

@@ -31,7 +31,8 @@ export default class DateWidget extends React.PureComponent {
           day = dateYear;
           year = dateDay;
           break;
-        default: break; // DMY
+        default: 
+          break; // DMY
       }
 
       let format;