Massive Update

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Wessel Tip <discord@go2it.eu>
Co-authored-by: Isaac Saunders <contact@eartharoid.me>

src/components/Background.jsx

@@ -1,15 +1,14 @@
-//* Imports
 import React from 'react';
 import supportsWebP from 'supports-webp';
+import * as Constants from '../modules/constants';
 
-export default class Background extends React.Component {
+export default class Background extends React.PureComponent {
   doOffline() {
-    const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
+    const photo = Math.floor(Math.random() * (Constants.OFFLINE_IMAGES - 1 + 1)) + 1; // There are 20 images in the offline-images folder
     document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
 
     let photographer; // Photographer credit
-    const pixabayNumbers = [2, 3, 9, 11, 13, 14, 15]; // As there are a lot of Pixabay photos, we shorten the code a bit here
-    if (pixabayNumbers.includes(photo)) photographer = 'Pixabay';
+    if ([2, 3, 9, 11, 13, 14, 15].includes(photo)) photographer = 'Pixabay';  // As there are a lot of Pixabay photos, we shorten the code a bit here
     else switch (photo) {
       case 1: photographer = 'Tirachard Kumtanom'; break;
       case 4: photographer = 'Sohail Na'; break;
@@ -20,47 +19,62 @@ export default class Background extends React.Component {
     }
 
     document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(../offline-images/${photo}.jpeg)`); // Set background and blur etc
-    document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
+    let credit = document.getElementById('photographer');
+    credit.innerText = `${credit.innerText} ${photographer} (Pexels)`; // Set the credit
   }
 
   async setBackground() {
-    const enabled = localStorage.getItem('offlineMode');
-    if (enabled === 'true') return this.doOffline();
+    if (localStorage.getItem('offlineMode')=== 'true') return this.doOffline();
 
     const colour = localStorage.getItem('customBackgroundColour');
     if (colour) {
       document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      document.getElementById('photographer').style.display = 'none';
       return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-color: ${colour}`); // Set background and blur etc
     }
 
     const custom = localStorage.getItem('customBackground');
-    if (custom) {
+    if (custom !== '') {
       document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      document.getElementById('photographer').style.display = 'none';
       return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${custom})`); // Set background and blur etc
-    }
+    } else {
+      try { // First we try and get an image from the API...
+        let requestURL;
+        const enabled = localStorage.getItem('webp');
+        const backgroundAPI = localStorage.getItem('backgroundAPI');
+        let data;
 
-    try { // First we try and get an image from the API...
-      let requestURL;
-      const enabled = localStorage.getItem('webp');
-      if (await supportsWebP && enabled === 'true') requestURL = 'https://api.muetab.xyz/getImage?webp=true';
-      else requestURL = 'https://api.muetab.xyz/getImage?category=Outdoors';
-      let data = await fetch(requestURL);
-      data = await data.json();
+        switch (backgroundAPI) {
+          case 'mue':
+            if (await supportsWebP && enabled === 'true') requestURL = Constants.API_URL + '/getImage?webp=true';
+            else requestURL = Constants.API_URL + '/getImage?category=Outdoors';
+            break;
+          case 'unsplash':
+            requestURL = 'https://unsplash.muetab.xyz/getImage';
+            break;
+          default:
+            if (await supportsWebP && enabled === 'true') requestURL =  Constants.API_URL +'/getImage?webp=true';
+            else requestURL = Constants.API_URL + '/getImage?category=Outdoors';
+            break;
+        }
 
-      document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${data.file})`); // Set background and blur etc
-      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`; // Set the credit
-      document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
-    } catch (e) { // ..and if that fails we load one locally
-      this.doOffline();
+        data = await fetch(requestURL);
+        data = await data.json();
+
+        document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${data.file})`); // Set background and blur etc
+        let credit = document.getElementById('photographer');
+        credit.innerText = `${credit.innerText} ${data.photographer}`; // Set the credit
+        document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
+      } catch (e) { // ..and if that fails we load one locally
+        this.doOffline();
+      }
     }
   }
 
   componentDidMount() {
-    const enabled = localStorage.getItem('background');
-    if (enabled === 'false') {
-      document.getElementById('backgroundCredits').style.display = 'none';
-      return;
-    }
+    if (localStorage.getItem('background') === 'false') return document.getElementById('backgroundCredits').style.display = 'none';
+    if (localStorage.getItem('animations') === 'true') document.getElementById('backgroundImage').classList.add('fade-in');
     this.setBackground();
   }
 

src/components/Clock.jsx

@@ -1,36 +1,61 @@
 import React from 'react';
+import Analog from 'react-clock';
 
-export default class Clock extends React.Component {
+export default class Clock extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
     this.timer = undefined;
     this.state = {
-      date: '',
+      time: '',
       ampm: ''
     };
   }
 
-  startTime(time = localStorage.getItem('seconds') === 'true' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
+  startTime(time = localStorage.getItem('seconds') === 'true' || localStorage.getItem('analog') === 'true' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
     this.timer = setTimeout(() => {
       const now = new Date();
-      let sec = '';
 
-      if (localStorage.getItem('seconds') === 'true') sec = `:${('00' + now.getSeconds()).slice(-2)}`;
-
-      if (localStorage.getItem('24hour') === 'true') {
+      // Analog clock
+      if (localStorage.getItem('analog') === 'true') {
         this.setState({
-          date: `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`
+          time: now
         });
       } else {
-        // 12 hour support
-        let hours = now.getHours();
-        if (hours > 12) hours -= 12;
+        let sec = '';
 
-        this.setState({
-          date: `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`,
-          ampm: now.getHours() > 11 ? 'PM' : 'AM'
-        });
+        // Extra 0
+        const zero = localStorage.getItem('zero');
+
+        if (localStorage.getItem('seconds') === 'true') {
+          if (zero === 'false') sec = `:${now.getSeconds()}`;
+          else sec = `:${('00' + now.getSeconds()).slice(-2)}`;
+        }
+
+        if (localStorage.getItem('24hour') === 'true') {
+          let time = '';
+          if (zero === 'false') time = `${now.getHours()}:${now.getMinutes()}${sec}`;
+          else time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+          this.setState({
+            time: time
+          });
+        } else {
+          // 12 hour support
+          let hours = now.getHours();
+          if (hours > 12) hours -= 12;
+
+          // Toggle AM/PM
+          let ampm = now.getHours() > 11 ? 'PM' : 'AM';
+          if (localStorage.getItem('ampm') === 'false') ampm = '';
+
+          let time = '';
+          if (zero === 'false') time = `${hours}:${now.getMinutes()}${sec}`;
+          else time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+          this.setState({
+            time: time,
+            ampm: ampm
+          });
+        }
       }
 
       this.startTime();
@@ -38,17 +63,13 @@ export default class Clock extends React.Component {
   }
 
   componentDidMount() {
-    const enabled = localStorage.getItem('time');
-    if (enabled === 'false') return;
+    if (localStorage.getItem('time') === 'false') return;
     this.startTime(0);
   }
 
   render() {
-    return <h1 className='clock'>
-      {this.state.date}
-      <span className='ampm'>
-        {this.state.ampm}
-      </span>
-    </h1>;
+    let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span> </h1>;
+    if (localStorage.getItem('analog') === 'true') clockHTML = <Analog className='analogclock' value={this.state.time}/>;
+    return clockHTML;
   }
 }

src/components/Credit.jsx

@@ -1,19 +1,18 @@
-/* eslint-disable */
-//* Imports
+/* eslint-disable jsx-a11y/heading-has-content */
 import RoomIcon from '@material-ui/icons/Room';
 import React from 'react';
 
-export default class Credit extends React.Component {
+export default class Credit extends React.PureComponent {
   render() {
     return (
       <div className='credits'>
           {/*<h1 id='location'></h1>*/}
-          <h1 id='photographer'/>
+          <h1 id='photographer'>{this.props.language}</h1>
           <div id='backgroundCredits' className='tooltip'>
             <RoomIcon className='locationicon'/>
             <span className='tooltiptext' id='location'/>
           </div>
-     </div>
+        </div>
     );
   }
 }

src/components/Greeting.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default class Greeting extends React.Component {
+export default class Greeting extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -9,8 +9,7 @@ export default class Greeting extends React.Component {
  }
 
   doEvents(time, message) {
-    const enabled = localStorage.getItem('events');
-    if (enabled === 'false') return message;
+    if (localStorage.getItem('events') === 'false') return message;
 
     // Get current month & day
     const m = time.getMonth();
@@ -27,9 +26,9 @@ export default class Greeting extends React.Component {
     const now = new Date();
     const hour = now.getHours();
 
-    let message = 'Good evening'; // Set the default greeting string to "Good evening"
-    if (hour < 12) message = 'Good morning'; // If it's before 12am, set the greeting string to "Good morning"
-    else if (hour < 18) message = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"
+    let message = this.props.language.evening; // Set the default greeting string to "Good evening"
+    if (hour < 12) message = this.props.language.morning; // If it's before 12am, set the greeting string to "Good morning"
+    else if (hour < 18) message = this.props.language.afternoon; // If it's before 6pm, set the greeting string to "Good afternoon"
 
     // Events
     message = this.doEvents(now, message);
@@ -53,8 +52,7 @@ export default class Greeting extends React.Component {
   }
 
   componentDidMount() {
-    const enabled = localStorage.getItem('greeting');
-    if (enabled === 'false') return;
+    if (localStorage.getItem('greeting') === 'false') return;
     this.getGreeting();
   }
 

src/components/Navbar.jsx

@@ -1,20 +1,21 @@
-//* Imports
 import RefreshIcon from '@material-ui/icons/Refresh';
 import Gear from '@material-ui/icons/Settings';
 import NewReleases from '@material-ui/icons/NewReleases';
 import React from 'react';
 
-export default class Navbar extends React.Component {
+export default class Navbar extends React.PureComponent {
   render() {
+    let refreshHTML = <div className='navbar2'><RefreshIcon className='refreshicon' onClick={() => window.location.reload()} /></div>
+    const refresh = localStorage.getItem('refresh');
+    if (refresh === 'false') refreshHTML = '';
+
     return (
       <div className='navbar-container'>
         <div className='navbar1'>
           <Gear className='settings-icon' onClick={this.props.settingsModalOpen} />
         </div>
-        <div className='navbar2'>
-            <RefreshIcon className='refreshicon' onClick={() => window.location.reload()} />
-        </div>
-        <div className='navbar3'>
+        {refreshHTML}
+        <div className={refresh === 'false' ? 'navbar2' : 'navbar3'}>
             <NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />
         </div>
       </div>

src/components/Quote.jsx

@@ -1,10 +1,11 @@
-//* Imports
 import React from 'react';
 import Quotes from '@muetab/quotes';
 import copy from 'copy-text-to-clipboard';
-import FileCopy from '@material-ui/icons/AttachFile';
+import FileCopy from '@material-ui/icons/FilterNone';
+import { toast } from 'react-toastify';
+import * as Constants from '../modules/constants';
 
-export default class Quote extends React.Component {
+export default class Quote extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -22,11 +23,10 @@ export default class Quote extends React.Component {
   }
 
   async getQuote() {
-    const enabled = localStorage.getItem('offlineMode');
-    if (enabled === 'true') return this.doOffline();
+    if (localStorage.getItem('offlineMode') === 'true') return this.doOffline();
 
     try { // First we try and get a quote from the API...
-      let data = await fetch('https://api.muetab.xyz/getQuote');
+      let data = await fetch(Constants.API_URL +'/getQuote');
       data = await data.json();
       if (data.statusCode === 429) this.doOffline(); // If we hit the ratelimit, we fallback to local quotes
       this.setState({
@@ -40,25 +40,23 @@ export default class Quote extends React.Component {
 
   copyQuote() {
     copy(`${this.state.quote} - ${this.state.author}`);
-    const toast = document.getElementById('toast');
-    toast.className = 'show';
-    setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000);
+    toast('Quote copied!');
   }
 
   componentDidMount() {
-    const enabled = localStorage.getItem('quote');
-    if (enabled === 'false') return;
+    if (localStorage.getItem('quote') === 'false') return;
     this.getQuote();
   }
 
   render() {
     let copy = <FileCopy className='copyButton' onClick={() => this.copyQuote() }></FileCopy>;
-    const enabled = localStorage.getItem('copyButton');
-    if (enabled === 'false') copy = '';
+    if (localStorage.getItem('copyButton') === 'false') copy = '';
 
-    return [
-        <h1 className='quote'>{`${this.state.quote}`}</h1>,
-    <h1 className='quoteauthor'>{this.state.author} {copy}</h1>,
-    ];
+    return (
+        <div>
+          <h1 className='quote'>{`${this.state.quote}`}</h1>
+          <h1 className='quoteauthor'>{this.state.author} {copy}</h1>
+        </div>
+    )
   }
 }

src/components/Search.jsx

@@ -1,28 +1,23 @@
-//* Imports
 import React from 'react';
 
-export default class Search extends React.Component {
+export default class Search extends React.PureComponent {
   render() {
-    const enabled = localStorage.getItem('searchBar');
-    if (enabled === 'false') return (<div></div>);
+    if (localStorage.getItem('searchBar') === 'false') return <div></div>;
 
-    const searchEngine = localStorage.getItem('searchEngine');
     let url;
 
-    switch (searchEngine) {
+    switch (localStorage.getItem('searchEngine')) {
       case 'duckduckgo': url = 'https://duckduckgo.com'; break;
       case 'google': url = 'https://google.com/search'; break;
       case 'bing': url = 'https://bing.com/search'; break;
       default: url = 'https://duckduckgo.com'; break;
     }
 
-    return (
-      <div id='searchBar' className='searchbar'>
+    return <div id='searchBar' className='searchbar'>
         <form id='searchBar' className='searchbarform' action={url}>
-            <input type='text' placeholder='Search' name='q' id='searchtext' className='searchtext'/>
+            <input type='text' placeholder={this.props.language} name='q' id='searchtext' className='searchtext'/>
             <div className='blursearcbBG'/>
           </form>
       </div>
-    );
   }
 }

src/components/Settings.jsx

@@ -1,35 +1,11 @@
-// eslint-disable
 import React from 'react';
 import ExpandMore from '@material-ui/icons/ExpandMore';
+import * as SettingsFunctions from '../modules/settingsFunctions';
+import Checkbox from './settings/Checkbox';
+import Slider from './settings/Slider';
+import { toast } from 'react-toastify';
 
-export default class Settings extends React.Component {
-  setItem(key, value) {
-    let old = localStorage.getItem(key);
-    let val = true;
-
-    if (old !== null && !value) {
-      if (old === 'true') val = false;
-      if (old === 'false') val = true;
-    }
-
-    localStorage.setItem(key, val);
-    //document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF';
-    // console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
-  }
-
-  toggleExtra(element, element2) {
-    (element.style.display === 'none' || !element.style.display) ? element.style.display = 'block' : element.style.display = 'none';
-    (element2.style.transform === 'rotate(-180deg)') ? element2.style.transform = 'rotate(0)' : element2.style.transform = 'rotate(-180deg)';
-  }
-
-  saveStuff() {
-    localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance
-    localStorage.setItem('greetingName', document.getElementById('greetingName').value);
-    localStorage.setItem('customBackground', document.getElementById('customBackground').value);
-    //if (!document.getElementById('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value);
-    window.location.reload();
-  }
-
+export default class Settings extends React.PureComponent {
   resetItem(key) {
     switch (key) {
       case 'greetingName': document.getElementById('greetingName').value = ''; break;
@@ -43,26 +19,19 @@ export default class Settings extends React.Component {
         document.getElementById('blurRange').value = 0;
         document.getElementById('blurAmount').innerText = '0';
         break;
+      case 'customSearchEngine': document.getElementById('searchEngine').value = 'DuckDuckGo'; break;
       default: console.log('[ERROR] resetItem requires a key!');
     }
-    this.showToast();
+    toast('Reset successfully!');
   }
 
-  showToast() {
-    let toast = document.getElementById('toast');
-    toast.innerText = 'Reset successfully!';
-    toast.className = 'show';
-    setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000);
-  }
-
-  componentDidMount() {
+  updateCurrent() {
     document.getElementById('greetingName').value = localStorage.getItem('greetingName');
     document.getElementById('customBackground').value = localStorage.getItem('customBackground');
-    /*const hex = localStorage.getItem('customBackgroundColour');
-    if (!hex === '') {
-      document.getElementById('customBackgroundColour').value = hex;
-      document.getElementById('customBackgroundHex').innerText = hex;
-    }*/
+    document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
+    document.getElementById('language').value = localStorage.getItem('language');
+    document.getElementById('searchEngine').value = localStorage.getItem('searchEngine');
+    // document.getElementById('backgroundImage').style.backgroundUrl = localStorage.getItem('customBackground');
 
     for (const key of Object.keys(localStorage)) {
       let value = localStorage.getItem(key);
@@ -80,152 +49,209 @@ export default class Settings extends React.Component {
           case 'false': value = false; break;
           default: value = true;
         }
-
         tag.checked = value;
       }
     }
 
-    document.addEventListener('keyup', (event) => {
-      if (event.keyCode === 13) this.saveStuff();
-    });
-
-    const darkTheme = localStorage.getItem('darkTheme');
-    if (darkTheme === 'true') {
+    if (localStorage.getItem('darkTheme') === 'true') {
+      document.getElementById('blurRange').style.background = '#535c68';
       document.getElementById('customBackground').style.color = 'white';
+      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';
     }
   }
 
+  componentDidMount() {
+    this.updateCurrent();
+
+    document.getElementById('file-input').onchange = (e) => {
+      const file = e.target.files[0];
+      if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`);
+
+      const reader = new FileReader();
+      reader.readAsText(file, 'UTF-8');
+
+      reader.onload = (readerEvent) => {
+        const content = JSON.parse(readerEvent.target.result);
+        for (const key of Object.keys(content)) localStorage.setItem(key, content[key]);
+        toast('Imported settings!');
+      }
+    }
+
+    document.getElementById('bg-input').onchange = (e) => {
+      const allowed = [ 'image/svg+xml', 'image/jpeg', 'image/png', 'image/webp', 'image/webm', 'image/gif' ];
+      const reader = new FileReader();
+      const file = e.target.files[0];
+
+      if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff');
+      if (!allowed.includes(file.type)) return console.error(`expected xml, svg, png or jpeg, got ${file.type}`);
+
+      reader.addEventListener('load', (e) => {
+        localStorage.setItem('customBackground', e.target.result);
+        document.getElementById('customBackground').src = e.target.result;
+        document.getElementById('customBackground').value = e.target.result;
+        document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${localStorage.getItem('customBackground')}`);
+        document.getElementById('backgroundImage').style.backgroundImage = `url(${localStorage.getItem('customBackground')})`
+      });
+
+      reader.readAsDataURL(file);
+    };
+    /*const hex = localStorage.getItem('customBackgroundColour');
+    if (!hex === '') {
+      document.getElementById('customBackgroundColour').value = hex;
+      document.getElementById('customBackgroundHex').innerText = hex;
+    }*/
+
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+
+ /*   document.addEventListener('keyup', (event) => {
+      if (event.keyCode === 13) this.saveStuff();
+  if (event.keyCode === 27) {
+        document.getElementById('root').classList.toggle('backgroundEffects');
+        this.props.modalClose();
+      }
+    });*/
+  }
+
+  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>Settings</h1>
-      <p>Edit different components to make Mue your new tab.</p>
+   // let expandClassList = '';
+    //if (localStorage.getItem('animations') === 'true') expandClassList = 'all 0.5 ease 0s';
+
+    return <div className='content'>
+      <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+      <h1>{this.props.language.title}</h1>
+      <p>{this.props.language.description}</p>
       <div className='columns'>
-          <div className='group'>
           <div className='section'>
-            <h4>Time</h4>
-            <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])} />
-          <label className="switch">
-            <input type="checkbox" onClick={() => this.setItem('time')} id='timeStatus' />
-            <span className="slider round"></span>
-          </label>
-          <li className="extraSettings">
-            <ul>
-              <input name="1" type="checkbox" onClick={() => this.setItem('seconds')} id='secondsStatus' />
-              <label htmlFor="1">Seconds</label>
-            </ul>
-            <ul>
-              <input name="2" type="checkbox" onClick={() => this.setItem('24hour')} id='24hourStatus' />
-              <label htmlFor="2">24 Hour</label>
-            </ul>
+            <h4>{this.props.language.time.title}</h4>
+            <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])} />
+            <Slider name='time' />
+          <li className='extraSettings'>
+            <Checkbox name='seconds' text={this.props.language.time.seconds} />
+            <Checkbox name='24hour' text={this.props.language.time.twentyfourhour} />
+            <Checkbox name='ampm' text={this.props.language.time.ampm} />
+            <Checkbox name='zero' text={this.props.language.time.zero} />
+            <Checkbox name='analog' text={this.props.language.time.analog} />
           </li>
         </div>
-        </div>
-        <div style={{ "lineHeight": "1px" }} className='section'>
-          <h4>Greeting</h4>
-          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} />
-          <label className="switch">
-            <input type="checkbox" onClick={()=> this.setItem('greeting')} id='greetingStatus' />
-            <span className="slider round"></span>
-          </label>
-          <li className="extraSettings">
+        <div className='section'>
+          <h4>{this.props.language.greeting.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} />
+          <Slider name='greeting' />
+          <li className='extraSettings'>
+          <Checkbox name='events' text={this.props.language.greeting.events} />
+          <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
             <ul>
-              <input name="3" type="checkbox" onClick={() => this.setItem('events')} id='eventsStatus' />
-              <label htmlFor="3">Events</label>
-            </ul>
-            <ul>
-              <input name="6" type="checkbox" onClick={() => this.setItem('defaultGreetingMessage')} id='defaultGreetingMessageStatus' />
-              <label htmlFor="6">Default Greeting Message</label>
-            </ul>
-            <ul>
-              <p>Name for greeting <span className="modalLink" onClick={() => this.resetItem('greetingName')}>Reset</span></p>
+              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greetingName')}>Reset</span></p>
               <input type='text' id='greetingName'></input>
             </ul>
           </li>
         </div>
         <div className='section'>
-          <h4>Quote</h4>
-          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
-          <label className="switch">
-            <input type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
-            <span className="slider"></span>
-          </label>
-          <li className="extraSettings">
-            <ul>
-            <input name="5" type="checkbox" onClick={() => this.setItem('copyButton')} id='copyButtonStatus' />
-            <label htmlFor="5">Copy Button</label>
-            </ul>
+          <h4>{this.props.language.quote.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
+          <Slider name='quote' />
+          <li className='extraSettings'>
+            <Checkbox name='copyButton' text={this.props.language.quote.copy} />
           </li>
         </div>
         <div className='section'>
-          <h4>Background</h4>
-          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
-          <label className="switch">
-            <input type="checkbox" onClick={()=> this.setItem('background')} id='backgroundStatus'  />
-            <span className="slider"></span>
-          </label>
-          <li className="extraSettings">
-            <ul>
-              <p>Adjust Blur (<span id='blurAmount'></span>%) <span className="modalLink" onClick={() => this.resetItem('blur')}>Reset</span></p>
+          <h4>{this.props.language.background.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
+          <Slider name='background' override='customBackground' />
+          <li className='extraSettings'>
+          <ul>
+            <label htmlFor='8'>{this.props.language.background.API} </label>
+            <label className='dropdown'>
+              <select className='select-css' name='8' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
+                <option value='mue'>Mue</option>
+                <option value='unsplash'>Unsplash</option>
+                { /* <option value='custom'>Custom</option> */ }
+              </select>
+            </label>
             </ul>
             <ul>
-              <input className="range" type="range" min="0" max="100" id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
+              <p>{this.props.language.background.blur} (<span id='blurAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('blur')}>Reset</span></p>
+              <input className='range' type='range' min='0' max='100' id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
             </ul>
             <ul>
-              <p>Custom Background URL <span className="modalLink" onClick={() => this.resetItem('customBackground')}>Reset</span></p>
+              <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>Reset</span></p>
               <input type='text' id='customBackground'></input>
             </ul>
-            { /*<ul>
-              <p>Custom Background Colour <span className="modalLink" onClick={() => this.resetItem('customBackgroundColour')}>Reset</span></p>
+            <ul>
+              <p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>Reset</span></p>
+              <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>Upload</button>
+              <input id='bg-input' type='file' name='name' className='hidden' />
+            </ul>
+           { /* <ul>
+              <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>Reset</span></p>
               <input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
-              <label for='colour' id='customBackgroundHex'>#00000</label>
-            </ul>  */}
+              <label htmlFor='colour' id='customBackgroundHex'>#00000</label>
+           </ul> */ }
           </li>
         </div>
         <div className='section'>
-          <h4>Search Bar</h4>
-          {/* <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} /> */ }
-          <label className="switch">
-            <input type="checkbox" onClick={() => this.setItem('searchBar')} id='searchBarStatus'  />
-            <span className="slider"></span>
-          </label>
-          {/* <li className="extraSettings">
+          <h4>{this.props.language.searchbar.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} />
+          <Slider name='searchBar' />
+          <li className='extraSettings'>
             <ul>
-            <label htmlFor="4">Search Engine</label>
-            <select name="4" id='searchBar'>
-              <option value="duckduckgo">DuckDuckGo</option>
-              <option value="google">Google</option>
-              <option value="bing">Bing</option>
-              <option value="custom">Custom</option>
-            </select>
+            <label htmlFor='4'>{this.props.language.searchbar.searchengine} </label>
+              <select className='select-css' name='4' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
+                <option value='duckduckgo'>DuckDuckGo</option>
+                <option value='google'>Google</option>
+                <option value='bing'>Bing</option>
+                { /* <option value='custom'>Custom</option> */ }
+              </select>
             </ul>
-          </li> */}
+            <ul id='searchEngineInput' style={{ display: 'none' }}>
+              <p>Custom Search URL <span className='modalLink' onClick={() => this.resetItem('customSearchEngine')}>Reset</span></p>
+              <input type='text' id='customSearchEngine'></input>
+            </ul>
+          </li>
         </div>
         <div className='section'>
-          <h4>Offline Mode</h4>
-          <label className="switch">
-            <input type="checkbox" onClick={() => this.setItem('offlineMode')} id='offlineModeStatus'  />
-            <span className="slider"></span>
-          </label>
+          <h4>{this.props.language.offline}</h4>
+          <Slider name='offlineMode' />
         </div>
-        <h3>Experimental</h3>
+        <h3>{this.props.language.experimental.title}</h3>
         <div className='section'>
-          <h4>Enable WebP</h4>
-          <label className="switch">
-            <input type="checkbox" onClick={() => this.setItem('webp')} id='webpStatus'  />
-            <span className="slider"></span>
-          </label>
+          <h4>{this.props.language.experimental.webp}</h4>
+          <Slider name='webp' />
         </div>
         <div className='section'>
-          <h4>Dark Theme</h4>
-          <label className="switch">
-            <input type="checkbox" onClick={() => this.setItem('darkTheme')} id='darkThemeStatus'  />
-            <span className="slider"></span>
-          </label>
+          <h4>{this.props.language.experimental.dark}</h4>
+          <Slider name='darkTheme' />
         </div>
-        <button className="apply" onClick={() => this.saveStuff()}>Apply</button>
-        <button className="reset" onClick={() => this.props.setDefaultSettings()}>Reset</button>
+        <div className='section'>
+          <h4>{this.props.language.experimental.animations}</h4>
+          <Slider name='animations' />
+        </div>
+        <div className='section'>
+        <h4 htmlFor='9'>{this.props.language.language} </h4>
+          <select className='select-css' name='9' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
+            <option className='choices' value='en'>English</option>
+            <option className='choices' value='nl'>Dutch</option>
+            <option className='choices' value='fr'>French</option>
+          </select>
+        </div>
+        <button className='apply' onClick={() => SettingsFunctions.saveStuff()}>{this.props.language.apply}</button>
+        <button className='reset' onClick={() => this.props.setDefaultSettings()}>{this.props.language.reset}</button>
+        <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
+        <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
+        <input id='file-input' type='file' name='name' className='hidden' />
       </div>
     </div>;
   }

src/components/Toast.jsx

@@ -1,15 +0,0 @@
-//* Imports
-import React from 'react';
-import FileCopy from '@material-ui/icons/AttachFile';
-
-export default class Toast extends React.Component {
-  render() {
-    return (
-        <div id='toast'>
-        <FileCopy className="copyButton"/>
-        <hr />
-       Quote Copied!
-      </div>
-    );
-  }
-}

src/components/Update.jsx

@@ -1,33 +1,33 @@
 import React from 'react';
+import * as Constants from '../modules/constants';
 
-export default class Update extends React.Component {
+export default class Update extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      title: 'Loading...',
-      date: '',
-      content: 'Loading...'
+      title: this.props.language.title,
+      date: '21/07/2020',
+      content: this.props.language.title
     };
  }
 
  async getUpdate() {
-  const enabled = localStorage.getItem('offlineMode');
-  if (enabled === 'true') return this.setState({
-    title: 'Offline',
-    content: 'Cannot get update logs while in offline mode'
+  if (localStorage.getItem('offlineMode') === 'true') return this.setState({
+    title: this.props.language.offline.title,
+    content: this.props.language.offline.description
   });
 
-  try { // First we try and get a quote from the API...
-    let data = await fetch('https://api.muetab.xyz/getUpdate');
+  try { // Get update log from the API
+    let data = await fetch(Constants.API_URL + '/getUpdate');
     data = await data.json();
     this.setState({
       title: data.title,
       content: data.content
     });
-  } catch (e) {
+  } catch (e) { // If it fails, we send an error
     this.setState({
-      title: 'Error',
-      content: 'Could not connect to the server!'
+      title: this.props.language.error.title,
+      content: this.props.language.error.description
     });
   }
  }
@@ -37,10 +37,11 @@ export default class Update extends React.Component {
  }
 
   render() {
-    return <div className="content">
-        <span className="closeModal" onClick={this.props.modalClose}>&times;</span>
-        <h1 dangerouslySetInnerHTML={{__html: this.state.title}}></h1>
-        <p dangerouslySetInnerHTML={{__html: this.state.content}}></p>
+    return <div className='content'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1 style={{ 'marginBottom':'-10px' }} dangerouslySetInnerHTML={{__html: this.state.title}}></h1>
+        <h5 style={{ 'lineHeight':'0px' }}> By Mue • <span dangerouslySetInnerHTML={{__html: this.state.date}}></span></h5>
+        <p style={{ 'padding': '0px 20px 0px 20px' }} dangerouslySetInnerHTML={{__html: this.state.content}}></p>
       </div>;
     }
 }

src/components/settings/Checkbox.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as SettingsFunctions from '../../modules/settingsFunctions';
+
+export default class Checkbox extends React.PureComponent {
+  render() {
+    return (
+        <ul>
+            <input name={this.props.name} type="checkbox" onClick={() => SettingsFunctions.setItem(this.props.name)} id={this.props.name + 'Status'} />
+            <label htmlFor={this.props.name}>{this.props.text}</label>
+        </ul>
+    );
+  }
+}

src/components/settings/Slider.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import * as SettingsFunctions from '../../modules/settingsFunctions';
+
+export default class Slider extends React.PureComponent {
+  render() {
+    let setText = this.props.name;
+    if (this.props.override) setText = this.props.override;
+    return (
+        <label className="switch">
+          <input type="checkbox" onClick={() => SettingsFunctions.setItem(setText)} id={this.props.name + 'Status'}  />
+          <span className="slider"></span>
+        </label>
+    );
+  }
+}