From f50c32778cad56bb97966968f304dde86cb22611 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Sat, 19 Sep 2020 14:53:33 +0100
Subject: [PATCH] cleanup

---
 src/App.jsx                                   |   2 +-
 src/components/modals/Settings.jsx            | 105 ++++++++----------
 src/components/modals/settings/Checkbox.jsx   |   6 +-
 src/components/modals/settings/Slider.jsx     |  21 +++-
 .../settings/sections/BackgroundSettings.jsx  |  44 +++++---
 .../settings/sections/SearchSettings.jsx      |  19 ++--
 src/components/widgets/Search.jsx             |  17 +--
 src/modules/searchEngines.json                |  48 ++++++++
 8 files changed, 154 insertions(+), 108 deletions(-)
 create mode 100644 src/modules/searchEngines.json

diff --git a/src/App.jsx b/src/App.jsx
index 2d01f868..46fb03b0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -54,7 +54,7 @@ export default class App extends React.PureComponent {
 
     const theme = localStorage.getItem('theme');
     if (theme) {
-      let style = document.createElement('link');
+      const style = document.createElement('link');
       style.href = theme;
       style.rel = 'stylesheet';
       document.head.appendChild(style);
diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index 3e719301..ae855c33 100644
--- a/src/components/modals/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -29,7 +29,10 @@ export default class Settings extends React.PureComponent {
         document.getElementById('brightnessRange').value = 100;
         document.getElementById('brightnessAmount').innerText = '100';
         break;
-      case 'customSearchEngine': document.getElementById('searchEngine').value = 'DuckDuckGo'; break;
+      case 'customSearchEngine':
+        localStorage.removeItem('customSearchEngine');
+        document.getElementById('searchEngine').value = 'DuckDuckGo';
+        break;
       default: toast('resetItem requires a key!');
     }
     toast(this.props.toastLanguage.reset);
@@ -37,28 +40,8 @@ export default class Settings extends React.PureComponent {
 
   updateCurrent() {
     document.getElementById('greetingName').value = localStorage.getItem('greetingName');
-    document.getElementById('customBackground').value = localStorage.getItem('customBackground');
-    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)) {
-      const value = localStorage.getItem(key);
-
-      if (key === 'blur') {
-        document.getElementById('blurAmount').innerText = value;
-        document.getElementById('blurRange').value = value;
-      }
-
-      if (key === 'brightness') {
-        document.getElementById('brightnessAmount').innerText = value;
-        document.getElementById('brightnessRange').value = value;
-      }
-
-      const tag = document.getElementById(`${key}Status`);
-      if (tag) tag.checked = (value === 'true');
-    }
 
     if (localStorage.getItem('darkTheme') === 'true') {
       document.getElementById('blurRange').style.background = '#535c68';
@@ -104,7 +87,8 @@ export default class Settings extends React.PureComponent {
    // let expandClassList = '';
     //if (localStorage.getItem('animations') === 'true') expandClassList = 'all 0.5 ease 0s';
 
-    return <div className='content'>
+    return (
+      <div className='content'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.modalLanguage.title}</h1>
         <div className='tab'>
@@ -114,49 +98,50 @@ export default class Settings extends React.PureComponent {
         </div>
         <br/>
 
-      <div className='columns'>
-        <Section title={this.props.language.time.title} name='time'>
+        <div className='columns'>
+          <Section title={this.props.language.time.title} name='time'>
             <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} />
-        </Section>
-        <Section title={this.props.language.greeting.title} name='greeting'>
-          <Checkbox name='events' text={this.props.language.greeting.events} />
-          <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
-          <ul>
-            <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greetingName')}>{this.props.language.reset}</span></p>
-            <input type='text' id='greetingName'></input>
-          </ul>
-        </Section>
-        <Section title={this.props.language.quote.title} name='quote'>
-          <Checkbox name='copyButton' text={this.props.language.quote.copy} />
-          <Checkbox name='tweetButton' text='Tweet Button' />
-        </Section>
-        <Section title={this.props.language.background.title} name='background'>
-          <BackgroundSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
-        </Section>
-        <Section title={this.props.language.searchbar.title} name='searchBar'>
-          <SearchSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
-        </Section>
-        <div className='section'>
-          <h4>{this.props.language.offline}</h4>
-          <Slider name='offlineMode'/>
-        </div>
-        <div className='section'>
-          <h4>{this.props.language.experimental.dark}</h4>
-          <Slider name='darkTheme'/>
-        </div>
-        <ExperimentalSettings language={this.props.language} />
-        <LanguageSettings language={this.props.language} />
+          </Section>
+          <Section title={this.props.language.greeting.title} name='greeting'>
+            <Checkbox name='events' text={this.props.language.greeting.events} />
+            <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
+            <ul>
+              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greetingName')}>{this.props.language.reset}</span></p>
+              <input type='text' id='greetingName'></input>
+            </ul>
+          </Section>
+          <Section title={this.props.language.quote.title} name='quote'>
+            <Checkbox name='copyButton' text={this.props.language.quote.copy} />
+            <Checkbox name='tweetButton' text='Tweet Button' />
+          </Section>
+          <Section title={this.props.language.background.title} name='background'>
+            <BackgroundSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
+          </Section>
+          <Section title={this.props.language.searchbar.title} name='searchBar'>
+            <SearchSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
+          </Section>
+          <div className='section'>
+            <h4>{this.props.language.offline}</h4>
+            <Slider name='offlineMode'/>
+          </div>
+          <div className='section'>
+            <h4>{this.props.language.experimental.dark}</h4>
+            <Slider name='darkTheme'/>
+          </div>
+          <ExperimentalSettings language={this.props.language} />
+          <LanguageSettings language={this.props.language} />
 
-        <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' />
+          <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>
-    </div>;
+    );
   }
 }
diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx
index e79b3265..9a5ea2e1 100644
--- a/src/components/modals/settings/Checkbox.jsx
+++ b/src/components/modals/settings/Checkbox.jsx
@@ -7,7 +7,7 @@ export default class Checkbox extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      checked: true
+      checked: (localStorage.getItem(this.props.name) === 'true')
     };
   }
 
@@ -16,10 +16,6 @@ export default class Checkbox extends React.PureComponent {
     this.setState({ checked: (this.state.checked === true) ? false : true });
   }
 
-  componentDidMount() {
-    this.setState({ checked: (localStorage.getItem(this.props.name) === 'true') });
-  }
-
   render() {
     return (
       <React.Fragment>
diff --git a/src/components/modals/settings/Slider.jsx b/src/components/modals/settings/Slider.jsx
index d21e3a7d..bcde3767 100644
--- a/src/components/modals/settings/Slider.jsx
+++ b/src/components/modals/settings/Slider.jsx
@@ -2,12 +2,27 @@ import React from 'react';
 import SettingsFunctions from '../../../modules/settingsFunctions';
 
 export default class Slider extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      checked: true
+    };
+  }
+
+  handleChange(name) {
+    SettingsFunctions.setItem(name);
+    this.setState({ checked: (this.state.checked === true) ? false : true });
+  }
+
+  componentDidMount() {
+    this.setState({ checked: (localStorage.getItem(this.props.name) === 'true') });
+  }
+
   render() {
-    let setText = this.props.name;
-    if (this.props.override) setText = this.props.override;
+    let setText = (this.props.override) ? this.props.name : this.props.override;
     return (
         <label className='switch'>
-          <input type='checkbox' onClick={() => SettingsFunctions.setItem(setText)} id={this.props.name + 'Status'}  />
+          <input type='checkbox' checked={this.state.checked} onChange={() => this.handleChange(setText)} />
           <span className='slider'></span>
         </label>
     );
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx
index a780dd76..9221661a 100644
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/src/components/modals/settings/sections/BackgroundSettings.jsx
@@ -3,26 +3,38 @@ import { toast } from 'react-toastify';
 
 export default class BackgroundSettings extends React.PureComponent {
    componentDidMount() {
-        document.getElementById('bg-input').onchange = (e) => {
-            const reader = new FileReader();
-            const file = e.target.files[0];
+      document.getElementById('bg-input').onchange = (e) => {
+        const reader = new FileReader();
+         const file = e.target.files[0];
 
-            if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff');
+        if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff');
 
-            reader.addEventListener('load', (e) => {
-              localStorage.setItem('customBackground', e.target.result);
-              document.getElementById('customBackground').src = e.target.result;
-              document.getElementById('customBackground').value = e.target.result;
-            });
+        reader.addEventListener('load', (e) => {
+            localStorage.setItem('customBackground', e.target.result);
+            document.getElementById('customBackground').src = e.target.result;
+            document.getElementById('customBackground').value = e.target.result;
+        });
 
-            reader.readAsDataURL(file);
-        };
+        reader.readAsDataURL(file);
+      };
 
-        const hex = localStorage.getItem('customBackgroundColour');
-        if (hex !== '') {
-            document.getElementById('customBackgroundColour').value = hex;
-            document.getElementById('customBackgroundHex').innerText = hex;
-        } else document.getElementById('customBackgroundHex').innerText = 'Disabled';
+      const hex = localStorage.getItem('customBackgroundColour');
+      if (hex !== '') {
+          document.getElementById('customBackgroundColour').value = hex;
+          document.getElementById('customBackgroundHex').innerText = hex;
+      } else document.getElementById('customBackgroundHex').innerText = 'Disabled';
+
+      const blur = localStorage.getItem('blur');
+      const brightness = localStorage.getItem('brightness');
+
+      document.getElementById('blurAmount').innerText = blur;
+      document.getElementById('blurRange').value = blur;
+
+      document.getElementById('brightnessAmount').innerText = brightness;
+      document.getElementById('brightnessRange').value = brightness;
+
+      document.getElementById('customBackground').value = localStorage.getItem('customBackground');
+      document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
     }
 
   render() {
diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx
index b9070816..d59e7e1f 100644
--- a/src/components/modals/settings/sections/SearchSettings.jsx
+++ b/src/components/modals/settings/sections/SearchSettings.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import SettingsFunctions from '../../../../modules/settingsFunctions';
+const searchEngines = require('../../../../modules/searchEngines.json');
 
 export default class SearchSettings extends React.PureComponent {
   componentDidMount() {
@@ -9,23 +10,19 @@ export default class SearchSettings extends React.PureComponent {
       input.enabled = 'true';
       document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine');
     } else localStorage.removeItem('customSearchEngine');
+
+    document.getElementById('searchEngine').value = localStorage.getItem('searchEngine');
   }
 
   render() {
     return (
         <div>
           <ul>
-            <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 className='choices' value='duckduckgo'>DuckDuckGo</option>
-                <option className='choices' value='google'>Google</option>
-                <option className='choices' value='bing'>Bing</option>
-                <option className='choices' value='yahoo'>Yahoo</option>
-                <option className='choices' value='ecosia'>Ecosia</option>
-                <option className='choices' value='yandex'>Yandex</option>
-                <option className='choices' value='qwant'>Qwant</option>
-                <option className='choices' value='ask'>Ask</option>
-                <option className='choices' value='startpage'>Startpage</option>
+            <label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
+              <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
+                {searchEngines.map((engine) =>
+                  <option className='choices' value={engine.settingsName}>{engine.name}</option>
+                )}
                 <option className='choices' value='custom'>Custom</option>
               </select>
             </ul>
diff --git a/src/components/widgets/Search.jsx b/src/components/widgets/Search.jsx
index bf48588c..1fbf60fb 100644
--- a/src/components/widgets/Search.jsx
+++ b/src/components/widgets/Search.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import SearchIcon from '@material-ui/icons/Search';
+const searchEngines = require('../../modules/searchEngines.json');
 
 export default class Search extends React.PureComponent {
   render() {
@@ -8,18 +9,10 @@ export default class Search extends React.PureComponent {
     let url;
     let query = 'q';
 
-    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;
-      case 'yahoo': url ='https://search.yahoo.com/search'; break;
-      case 'ecosia': url = 'https://ecosia.org/search'; break;
-      case 'yandex': url = 'https://yandex.ru/search'; query = 'text'; break;
-      case 'qwant': url = 'https://www.qwant.com/'; break;
-      case 'ask': url = 'https://ask.com/web'; break;
-      case 'startpage': url = 'https://www.startpage.com/sp/search'; break;
-      default: url = 'https://duckduckgo.com'; break;
-    }
+    const setting = localStorage.getItem('searchEngine');
+    const info = searchEngines.find(i => i.settingsName === setting);
+    url = info.url;
+    if (info.query) query = info.query;
 
     const custom = localStorage.getItem('customSearchEngine');
     if (custom) url = custom;
diff --git a/src/modules/searchEngines.json b/src/modules/searchEngines.json
new file mode 100644
index 00000000..d7d4ae3c
--- /dev/null
+++ b/src/modules/searchEngines.json
@@ -0,0 +1,48 @@
+[
+    {
+        "name": "DuckDuckGo",
+        "settingsName": "duckduckgo",
+        "url": "https://duckduckgo.com"
+    },
+    {
+        "name": "Google",
+        "settingsName": "google",
+        "url": "https://google.com/search"
+    },
+    {
+        "name": "Bing",
+        "settingsName": "bing",
+        "url": "https://bing.com/search"
+    },
+    {
+        "name": "Yahoo",
+        "settingsName": "yahoo",
+        "url": "https://search.yahoo.com/search"
+    },
+    {
+        "name": "Ecosia",
+        "settingsName": "ecosia",
+        "url": "https://ecosia.org/search"
+    },
+    {
+        "name": "Yandex (RU)",
+        "settingsName": "yandex",
+        "url": "https://yandex.ru/search",
+        "query": "text"
+    },
+    {
+        "name": "Qwant",
+        "settingsName": "qwant",
+        "url": "https://www.quant.com/"
+    },
+    {
+        "name": "Ask",
+        "settingsName": "ask",
+        "url": "https://ask.com/web"
+    },
+    {
+        "name": "Startpage",
+        "settingsName": "startpage",
+        "url": "https://www.startpage.com/sp/search"
+    }
+]
\ No newline at end of file