cleanup and a new feature

src/App.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
+
 import Background from './components/widgets/Background';
 import Clock from './components/widgets/Clock';
 import Greeting from './components/widgets/Greeting';
 import Quote from './components/widgets/Quote';
 import Search from './components/widgets/Search';
+import Maximise from './components/widgets/Maximise';
+
 import Navbar from './components/Navbar';
+
 import SettingsFunctions from './modules/settingsFunctions';
 import { ToastContainer } from 'react-toastify';
 import Modal from 'react-modal';
@@ -69,6 +73,7 @@ export default class App extends React.PureComponent {
               <span className='tooltiptext' id='location'/>
             </div>
           </div>
+          <Maximise/>
           <React.Suspense fallback={renderLoader()}>
             <Modal id={'modal'} onRequestClose={() => this.setState({ settingsModal: false })} isOpen={this.state.settingsModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Settings

src/components/modals/Marketplace.jsx

@@ -67,8 +67,7 @@ export default class Marketplace extends React.PureComponent {
         if (type === 'item') {
             let info;
             try {
-                info = await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`);
-                info = await info.json();
+                info = (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json();
             } catch (e) {
                 return toast(this.props.toastLanguage.error);
             }
@@ -100,17 +99,15 @@ export default class Marketplace extends React.PureComponent {
    }
 
     async getItems() {
-        let data = await fetch(Constants.MARKETPLACE_URL + '/all');
-        data = await data.json();
-        let data2 = await fetch(Constants.MARKETPLACE_URL + '/featured');
-        data2 = await data2.json();
+        const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
+        const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
         this.setState({
             themes: data.data.themes,
             settings: data.data.settings,
             photo_packs: data.data.photo_packs,
             quote_packs: data.data.quote_packs,
             see_more: data.data.photo_packs,
-            featured: data2.data,
+            featured: featured.data,
             done: true
         });
     }

src/components/modals/Settings.jsx

@@ -50,17 +50,6 @@ export default class Settings extends React.PureComponent {
         document.getElementById('brightnessAmount').innerText = value;
         document.getElementById('brightnessRange').value = value;
       }
-
-      const tag = document.getElementById(`${key}Status`);
-
-      if (tag) {
-        switch (value) {
-          case 'true': value = true; break;
-          case 'false': value = false; break;
-          default: value = true;
-        }
-        tag.checked = value;
-      }
     }
 
     if (localStorage.getItem('darkTheme') === 'true') {
@@ -70,10 +59,6 @@ export default class Settings extends React.PureComponent {
       document.getElementById('backgroundAPI').style.color = 'white';
       document.getElementById('searchEngine').style.color = 'white';
       document.getElementById('language').style.color = 'white';
-      /*[1, 2, 3, 4, 5].forEach((index) => {
-        console.log(index)
-        document.getElementsByClassName('choices')[index].style.background = 'black';
-      })*/
       document.getElementById('greetingName').style.color = 'white';
     }
   }
@@ -117,7 +102,6 @@ export default class Settings extends React.PureComponent {
       document.getElementById('customBackgroundHex').innerText = hex;
     }*/
 
-
     document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
     document.getElementById('center').classList.toggle('backgroundEffects');
   }

src/components/modals/Update.jsx

@@ -20,8 +20,7 @@ export default class Update extends React.PureComponent {
   });
 
   try { // Get update log from the API
-    let data = await fetch(Constants.API_URL + '/getUpdate');
-    data = await data.json();
+    const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
     this.setState({
       title: data.title,
       content: data.content,

src/components/modals/settings/Checkbox.jsx

@@ -7,33 +7,24 @@ export default class Checkbox extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-        checked: true
+      checked: true
     }
   }
 
+  handleChange() {
+    SettingsFunctions.setItem(this.props.name);
+    this.setState({ checked: this.state.checked });
+  }
+
+  componentDidMount() {
+    this.setState({ checked: (localStorage.getItem(this.props.name) === 'true') });
+  }
+
   render() {
-    const handleChange = () => {
-      SettingsFunctions.setItem(this.props.name);
-      let checked;
-      if (this.state.checked === true) checked = false;
-      else checked = true;
-      this.setState({ checked: checked });
-    }
-
-    let value = localStorage.getItem(this.props.name);
-
-    switch (value) {
-      case 'true': value = true; break;
-      case 'false': value = false; break;
-      default: value = false;
-    }
-
-    this.setState({ checked: value });
-
     return (
       <React.Fragment>
         <FormControlLabel
-          control={<CheckboxUI name="checkedB" color="primary" checked={this.state.checked} onChange={handleChange} />}
+          control={<CheckboxUI name="checkedB" color="primary" checked={this.state.checked} onChange={this.handleChange} />}
           label={this.props.text}
         />
         <br/>

src/components/widgets/Maximise.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import FullscreenIcon from '@material-ui/icons/Fullscreen';
+
+export default class View extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            hidden: false
+        };
+    }
+
+    setAttribute(blur, brightness) {
+        document.querySelector('#backgroundImage').setAttribute(
+            'style',
+            `background-image: url(${document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '')});
+            -webkit-filter: blur(${blur});
+            -webkit-filter: brightness(${brightness}%);`
+        );
+    }
+
+  viewStuff() {
+    const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv'];
+    elements.forEach(element => {
+        (this.state.hidden === false) ?  document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
+    });
+    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('view') === 'false') return <div></div>;
+    return <div className='view'>
+        <FullscreenIcon id='viewButton' onClick={() => this.viewStuff()} />
+    </div>
+  }
+}

src/components/widgets/Quote.jsx

@@ -34,8 +34,7 @@ export default class Quote extends React.PureComponent {
     if (localStorage.getItem('offlineMode') === 'true') return this.doOffline();
 
     try { // First we try and get a quote from the API...
-      let data = await fetch(Constants.API_URL + '/getQuote');
-      data = await data.json();
+      const data = await (await fetch(Constants.API_URL + '/getQuote')).json();
       if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local quotes
       this.setState({
         quote: '"' + data.quote + '"',
@@ -61,7 +60,7 @@ export default class Quote extends React.PureComponent {
     if (localStorage.getItem('copyButton') === 'false') copy = '';
 
     return (
-        <div>
+        <div className='quotediv'>
           <h1 className='quote'>{`${this.state.quote}`}</h1>
           <h1 className='quoteauthor'>{this.state.author} {copy}</h1>
         </div>

src/scss/modules/_credit.scss

@@ -9,6 +9,12 @@
   margin-bottom: -10px;
 }
 
+.view {
+  position: absolute;
+  bottom: 10px;
+  right: 25px;
+}
+
 #photographer {
   position: absolute;
   bottom: 10px;
@@ -16,12 +22,12 @@
   width: 1000px;
 }
 
-.locationicon {
+.locationicon, #viewButton {
   width: auto;
   cursor: pointer;
 }
 
-.navbar-container > svg, #backgroundCredits > svg  {
+.navbar-container > svg, #backgroundCredits > svg, #viewButton > svg  {
   font-size: calc(10px + 1.5vmin) !important;
   position: absolute;
   bottom: 2px;