refactor and fix some things

src/components/modals/Update.jsx

@@ -6,54 +6,37 @@ export default class Update extends React.PureComponent {
     super(...args);
     this.state = {
       title: this.props.language.title,
-      date: '???',
+      date: null,
       content: this.props.language.title,
-      author: 'Mue',
-      html: this.props.language.loading
+      html: this.props.language.loading,
+      image: null
     };
  }
 
  async getUpdate() {
-  const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
-
-  const removeStuff = () => { // quick code to make update modal a bit better, will replace later
-    document.getElementById('author').innerText = '';
-    const img = document.getElementsByTagName('img')[0];
-    img.parentNode.removeChild(img);
-  }
-
   if (localStorage.getItem('offlineMode') === 'true') {
-    removeStuff();
     return this.setState({
       title: this.props.language.offline.title,
       html: this.props.language.offline.description
     });
   }
 
-  try { // Get update log from the API
-    const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
-    if (data.statusCode === 500) {
-      removeStuff();
-      return this.setState({
-        title: this.props.language.error.title,
-        html: this.props.language.error.description + supportText
-      });
-  }
-
-    this.setState({
-      title: data.title,
-      date: data.published,
-      image: data.image,
-      author: data.author,
-      html: data.content + `<br/><p>${this.props.language.read_blog}: <a target='_blank' class='modalLink' href='${data.url}'>${data.url}</a></p>`
-    });
-  } catch (e) { // If it fails, we send an error
-    removeStuff();
-    this.setState({
+  const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
+  if (data.statusCode === 500 || data.title === null) {
+    const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
+    return this.setState({
       title: this.props.language.error.title,
       html: this.props.language.error.description + supportText
     });
   }
+
+  this.setState({
+    title: data.title,
+    date: data.published,
+    image: data.image || null,
+    author: data.author,
+    html: data.content
+  });
  }
 
  componentDidMount() {
@@ -64,8 +47,8 @@ export default class Update extends React.PureComponent {
     return <div className='updateContent'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
-        <h5 style={{ 'lineHeight':'0px' }} id='author'> By {this.state.author} • {this.state.date}</h5>
-        <img draggable='false' src={this.state.image} alt='Update'></img>
+        <h5 style={{ 'lineHeight': '0px' }}>{this.state.date}</h5>
+        {this.state.image ? <img draggable='false' src={this.state.image} alt='Update'></img> : null}
         <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
       </div>;
     }

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

@@ -1,12 +1,15 @@
 import React from 'react';
-import { toast } from 'react-toastify';
+
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Section from '../Section';
 import FileUpload from '../FileUpload';
+
 import { ColorPicker } from 'react-color-gradient-picker';
 import hexToRgb from '../../../../modules/helpers/background/hexToRgb';
 import rgbToHex from '../../../../modules/helpers/background/rgbToHex';
+
+import { toast } from 'react-toastify';
 import { Beforeunload } from 'react-beforeunload';
 
 import 'react-color-gradient-picker/dist/index.css';

src/components/widgets/Widgets.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import Clock from './time/Clock';
+import Greeting from './greeting/Greeting';
+import Quote from './quote/Quote';
+import Search from './search/Search';
+import Maximise from './background/Maximise';
+import Favourite from './background/Favourite';
+import Date from './time/Date';
+
+export default class Widgets extends React.PureComponent {
+   enabled(key) {
+    const old = localStorage.getItem(key);
+    let val = true;
+
+    if (old !== null) {
+        if (old === 'true') val = true;
+        if (old === 'false') val = false;
+    }
+
+    return val;
+  }
+
+  // Render all the components
+  render() {
+    const { language, languagecode } = this.props;
+    const enabled = this.enabled;
+
+    return (
+      <React.Fragment>
+          {enabled('searchBar') ? <Search language={language.search} /> : null}
+          {enabled('greeting') ? <Greeting language={language.greeting} /> : null}
+          {enabled('clock') ? <Clock/> : null}
+          {enabled('date') ? <Date/> : null}
+          {enabled('quote') ? <Quote language={language.toasts} languagecode={languagecode} /> : null}
+          {enabled('view') ? <Maximise/> : null}
+          {enabled('favouriteEnabled') ? <Favourite/> : null}
+      </React.Fragment>
+    );
+  }
+}

src/components/widgets/background/Favourite.jsx

@@ -18,13 +18,16 @@ export default class Favourite extends React.PureComponent {
         const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
         const credit = document.getElementById('credit').textContent;
         const location = document.getElementById('location').textContent;
+        
         localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit, location: location }));
         this.setState({ favourited: <StarIcon onClick={() => this.favourite()} /> });
       }
   }
 
   componentDidMount() {
-    if (localStorage.getItem('favourite')) this.setState({ favourited: <StarIcon onClick={() => this.favourite()} /> });
+    if (localStorage.getItem('favourite')) {
+      this.setState({ favourited: <StarIcon onClick={() => this.favourite()} /> });
+    }
   }
 
   render() {

src/components/widgets/background/Maximise.jsx

@@ -16,29 +16,29 @@ 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';
-        } catch (e) {
-            return;
-        }
-    });
+    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';
+          } catch (e) {
+              return;
+          }
+      });
+  
+      if (this.state.hidden === false) {
+          this.setState({ hidden: true });
+          this.setAttribute(0, 100);
+      } else {
+          this.setState({ hidden: false });
+          this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'));
+      }
+  }
 
-    if (this.state.hidden === false) {
-        this.setState({ hidden: true });
-        this.setAttribute(0, 100);
-    } else {
-        this.setState({ hidden: false });
-        this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'));
+    render() {
+      if (localStorage.getItem('background') === 'false') return null;
+      return <div className='view'>
+          <FullscreenIcon onClick={() => this.viewStuff()} />
+      </div>
     }
-  }
-
-  render() {
-    if (localStorage.getItem('view') === 'false' || localStorage.getItem('background') === 'false') return null;
-    return <div className='view'>
-        <FullscreenIcon onClick={() => this.viewStuff()} />
-    </div>
-  }
 }

src/components/widgets/background/PhotoInformation.jsx

@@ -7,14 +7,11 @@ import Photographer from '@material-ui/icons/Person';
 
 export default class PhotoInformation extends React.PureComponent {
   render() {
-    let classList = 'infoCard';
-    if (this.props.className) classList = this.props.className;
-
     return (
       <div className='photoInformation'>
         <h1 id='photographer'>{this.props.language.credit}</h1>
         <Info className='photoInformationHover'/>
-        <div className={classList}>
+        <div className={this.props.className || 'infoCard'}>
           <Info className='infoIcon'/>
           <h1>{this.props.language.information}</h1>
           <hr/>

src/components/widgets/background/scss/_photoinformation.scss

@@ -9,6 +9,7 @@
         float: left;
         margin-right: 1rem;
         font-size: calc(10px + 2vmin);
+        cursor: pointer;
     }
 
     svg,
@@ -72,10 +73,6 @@
     }
 }
 
-.photoInformationHover {
-    cursor: pointer;
-}
-
 .dark hr {
     background-color: white !important;
 }

src/components/widgets/greeting/Greeting.jsx

@@ -56,7 +56,6 @@ export default class Greeting extends React.PureComponent {
   }
 
   componentDidMount() {
-    if (localStorage.getItem('greeting') === 'false') return;
     this.getGreeting();
   }
 

src/components/widgets/navbar/Navbar.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
+
 import RefreshIcon from '@material-ui/icons/RefreshRounded';
 import Gear from '@material-ui/icons/SettingsRounded';
 import NewReleases from '@material-ui/icons/NewReleasesRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Tooltip from '@material-ui/core/Tooltip';
 import Report from '@material-ui/icons/SmsFailed';
+
 import * as Constants from '../../../modules/constants';
 
 import './scss/index.scss';
@@ -20,6 +22,7 @@ export default class Navbar extends React.PureComponent {
         <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()} />
       </Tooltip>
     );
+
     if (localStorage.getItem('refresh') === 'false') refreshHTML = null;
 
     // toggle feedback button
@@ -28,6 +31,7 @@ export default class Navbar extends React.PureComponent {
         <Report className='topicons' onClick={this.props.feedbackModalOpen} />
       </Tooltip>
     );
+  
     if (Constants.BETA_VERSION === false) feedbackHTML = null;
 
     return (

src/components/widgets/navbar/Notes.jsx

@@ -23,12 +23,15 @@ export default class Notes extends React.PureComponent {
     }
 
     componentDidMount() {
-        if (localStorage.getItem('notesPinned') === 'true') document.getElementById('noteContainer').classList.toggle('visibilityshow');
+        if (localStorage.getItem('notesPinned') === 'true') {
+            document.getElementById('noteContainer').classList.toggle('visibilityshow');
+        }
     }
 
     render() {
         let classList = 'notescontainer';
         if (localStorage.getItem('darkTheme') === 'true') classList += ' dark';
+
         return (
             <span id='noteContainer' className={classList}>
                 <div className='topbarnotes'>

src/components/widgets/quote/Quote.jsx

@@ -93,15 +93,12 @@ export default class Quote extends React.PureComponent {
   }
 
   componentDidMount() {
-    if (localStorage.getItem('quote') === 'false') return;
     if (localStorage.getItem('favouriteQuote')) this.setState({ favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} /> });
     if (localStorage.getItem('favouriteQuoteEnabled') === 'false') this.setState({ favourited: null });
     this.getQuote();
   }
 
   render() {
-    if (localStorage.getItem('quote') === 'false') return null;
-
     let copy = <FileCopy className='copyButton' onClick={() => this.copyQuote()}></FileCopy>;
     if (localStorage.getItem('copyButton') === 'false') copy = null;
 

src/components/widgets/search/Search.jsx

@@ -18,13 +18,12 @@ export default class Search extends React.PureComponent {
   startSpeechRecognition() {
     const voiceSearch = new window.webkitSpeechRecognition();
     voiceSearch.start();
-    voiceSearch.onresult = (event) => document.getElementById('searchtext').value = event.results[0][0].transcript;
-    voiceSearch.onend = () => setTimeout(() => window.location.href = this.state.url + `?${this.state.query}=` + document.getElementById('searchtext').value, 1000);
+    const searchText = document.getElementById('searchtext');
+    voiceSearch.onresult = (event) => searchText.value = event.results[0][0].transcript;
+    voiceSearch.onend = () => setTimeout(() => window.location.href = this.state.url + `?${this.state.query}=` + searchText.value, 1000);
   }
 
   render() {
-    if (localStorage.getItem('searchBar') === 'false') return null;
-
     let url;
     let query = 'q';
 
@@ -52,8 +51,8 @@ export default class Search extends React.PureComponent {
     }
 
     return (
-      <div id='searchBar' className='searchbar'>
-        <form id='searchBar' className='searchbarform' action={url}>
+      <div id='searchBar'>
+        <form action={url}>
             {microphone}
             <SearchIcon onClick={() => searchButton()} id='searchButton' />
             <input type='text' placeholder={this.props.language} name={query} id='searchtext' className='searchtext'/>

src/components/widgets/search/search.scss

@@ -1,6 +1,6 @@
 @import '../../../scss/variables';
 
-.searchbar {
+#searchBar {
     position: absolute;
     left: 20px;
     top: 20px;

src/components/widgets/time/Clock.jsx

@@ -22,8 +22,10 @@ export default class Clock extends React.PureComponent {
       if (localStorage.getItem('percentageComplete') === 'true') return this.setState({ time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'});
 
       // Analog clock
-      if (localStorage.getItem('analog') === 'true') this.setState({ time: now });
-      else {
+      if (localStorage.getItem('analog') === 'true') {
+        require('react-clock/dist/Clock.css');
+        this.setState({ time: now });
+      } else {
         let time, sec = '';
 
         // Extra 0

src/components/widgets/time/Date.jsx

@@ -11,6 +11,7 @@ export default class DateWidget extends React.PureComponent {
 
   getDate() {
     const date = new Date();
+
     const short = localStorage.getItem('short');
     const dateFormat = localStorage.getItem('dateFormat');
 
@@ -54,7 +55,6 @@ export default class DateWidget extends React.PureComponent {
   }
 
   componentDidMount() {
-    if (localStorage.getItem('date') === 'false') return;
     this.getDate();
   }