cleanup

src/components/modals/marketplace/Item.jsx

@@ -3,55 +3,56 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 export default class Item extends React.PureComponent {
   render() {
-    //if (!this.props.data.icon) return null;
     let warningHTML;
     try { // For some reason it breaks sometimes so we use try/catch
       if (this.props.content.content.data.quote_api) {
-        warningHTML = <div className='productInformation'>
+        warningHTML = (
+          <div className='productInformation'>
             <ul>
-                <li className='header'>{this.props.language.quote_warning.title}</li>
-                <li id='updated'>{this.props.language.quote_warning.description}</li>
+              <li className='header'>{this.props.language.quote_warning.title}</li>
+              <li id='updated'>{this.props.language.quote_warning.description}</li>
             </ul>
-        </div>
+          </div>
+        );
       }
     } catch (e) {}
 
     return (
       <div id='item'>
-      <br/>
-      <ArrowBackIcon className='backArrow' onClick={this.props.function} />
-      <br/>
-      <h1>{this.props.data.name}</h1>
-      {this.props.button}
-      <br/><br/>
-      <img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
-      <div className='informationContainer'>
-      <div className='productInformation'>
-        <h4>{this.props.language.information}</h4>
-        <ul>
-          <br/>
-          <li className='header'>{this.props.language.last_updated}</li>
-          <li>{this.props.data.updated}</li>
-          <br/>
-          <li className='header'>{this.props.language.version}</li>
-          <li>{this.props.data.version}</li>
-          <br/>
-          <li className='header'>{this.props.language.author}</li>
-          <li>{this.props.data.author}</li>
-        </ul>
+        <br/>
+        <ArrowBackIcon className='backArrow' onClick={this.props.function} />
+        <br/>
+        <h1>{this.props.data.name}</h1>
+        {this.props.button}
+        <br/><br/>
+        <img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
+        <div className='informationContainer'>
+          <div className='productInformation'>
+            <h4>{this.props.language.information}</h4>
+            <ul>
+              <br/>
+              <li className='header'>{this.props.language.last_updated}</li>
+              <li>{this.props.data.updated}</li>
+              <br/>
+              <li className='header'>{this.props.language.version}</li>
+              <li>{this.props.data.version}</li>
+              <br/>
+              <li className='header'>{this.props.language.author}</li>
+             <li>{this.props.data.author}</li>
+           </ul>
+          </div>
+          <div className='productInformation'>
+            <ul>
+              <li className='header'>{this.props.language.notice.title}</li>
+              <li id='updated'>{this.props.language.notice.description}</li>
+            </ul>
+          </div>
+          {warningHTML}
+        </div>
+        <br/>
+        <h1>{this.props.language.overview}</h1>
+        <p className='description' dangerouslySetInnerHTML={{__html: this.props.data.description}}></p>
       </div>
-      <div className='productInformation'>
-        <ul>
-          <li className='header'>{this.props.language.notice.title}</li>
-          <li id='updated'>{this.props.language.notice.description}</li>
-        </ul>
-      </div>
-      {warningHTML}
-      </div>
-      <br/>
-      <h1>{this.props.language.overview}</h1>
-      <p className='description' dangerouslySetInnerHTML={{__html: this.props.data.description}}></p>
-    </div>
     );
   }
 }

src/components/modals/settings/FileUpload.jsx

@@ -8,7 +8,7 @@ export default class FileUpload extends React.PureComponent {
         const file = e.target.files[0];
 
         if (this.props.type === 'settings') reader.readAsText(file, 'UTF-8');
-        else { // file upload
+        else { // background upload
           if (file.size > 2000000) return toast('File is over 2MB');
           reader.readAsDataURL(file);
         }

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

@@ -21,6 +21,7 @@ export default class BackgroundSettings extends React.PureComponent {
     this.state = {
       blur: 0,
       brightness: 100,
+      customBackground: localStorage.getItem('customBackground') || '',
       gradientSettings: this.DefaultGradientSettings,
       shown: false
     };
@@ -83,7 +84,6 @@ export default class BackgroundSettings extends React.PureComponent {
       gradientSettings
     });
 
-    document.getElementById('customBackground').value = localStorage.getItem('customBackground');
     document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
   }
 
@@ -142,12 +142,13 @@ export default class BackgroundSettings extends React.PureComponent {
 
   fileUpload(e) {
     localStorage.setItem('customBackground', e.target.result);
-    document.getElementById('customBackground').value = e.target.result;
+    this.setState({ customBackground: e.target.result });
   }
 
   beforeUnload() {
     localStorage.setItem('blur', this.state.blur);
     localStorage.setItem('brightness', this.state.brightness);
+    localStorage.setItem('customBackground', this.state.customBackground);
   }
 
   render() {
@@ -216,7 +217,7 @@ export default class BackgroundSettings extends React.PureComponent {
           </ul>
           <ul>
             <p>{this.props.language.background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
-            <input type='text' id='customBackground'></input>
+            <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
           </ul>
           <ul>
             <p>{this.props.language.background.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>

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

@@ -3,17 +3,19 @@ import Section from '../Section';
 import Checkbox from '../Checkbox';
 import DatePicker from 'react-date-picker';
 import { toast } from 'react-toastify';
+import { Beforeunload } from 'react-beforeunload';
 
 export default class GreetingSettings extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-        birthday: new Date(localStorage.getItem('birthday')) || new Date()
+        birthday: new Date(localStorage.getItem('birthday')) || new Date(),
+        greetingName: localStorage.getItem('greetingName') || ''
     };
   }
 
   resetItem() {
-    document.getElementById('greetingName').value = '';
+    this.setState({ greetingName: '' });
     toast(this.props.toastLanguage.reset);
   }
 
@@ -23,24 +25,25 @@ export default class GreetingSettings extends React.PureComponent {
       this.setState({ birthday: data });
   }
 
-  componentDidMount() {
-    document.getElementById('greetingName').value = localStorage.getItem('greetingName');
+  beforeUnload() {
+    localStorage.setItem('greetingName', this.state.greetingName);
   }
 
   render() {
     return (
-        <Section title={this.props.language.greeting.title} name='greeting'>
+      <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} />
         <Checkbox name='birthdayenabled' text='Birthday Enabled' />
         <ul>
           <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span></p>
-          <input type='text' id='greetingName'></input>
+          <input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
         </ul>
         <ul>
           <p>Birthday Date</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
         </ul>
+        <Beforeunload onBeforeunload={() => this.beforeUnload()}/>
       </Section>
     );
   }

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

@@ -10,12 +10,12 @@ export default class LanguageSettings extends React.PureComponent {
           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>
+            <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>
     );

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

@@ -28,9 +28,7 @@ export default class SearchSettings extends React.PureComponent {
   render() {
     return (
         <Section title={this.props.language.searchbar.title} name='searchBar'>
-          <ul>
-            <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} />
-          </ul>
+          <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} />
           <ul>
             <Dropdown label={this.props.language.searchbar.search_engine}
               name='searchEngine'

src/components/modals/tabs/Addons.jsx

@@ -3,6 +3,7 @@ import LocalMallIcon from '@material-ui/icons/LocalMall';
 import { toast } from 'react-toastify';
 import Item from '../marketplace/Item';
 import Items from '../marketplace/Items';
+import FileUpload from '../settings/FileUpload';
 import MarketplaceFunctions from '../../../modules/helpers/marketplace';
 
 export default class Addons extends React.PureComponent {
@@ -69,12 +70,6 @@ export default class Addons extends React.PureComponent {
 
   componentDidMount() {
     if (localStorage.getItem('animations') === 'true') document.getElementById('marketplace').classList.add('marketplaceanimation');
-
-    document.getElementById('file-input').onchange = (e) => {
-        const reader = new FileReader();
-        reader.readAsText(e.target.files[0], 'UTF-8');
-        reader.onload = (readerEvent) => this.manage('install', JSON.parse(readerEvent.target.result));
-    };
   }
 
   render() {
@@ -96,7 +91,7 @@ export default class Addons extends React.PureComponent {
     return (
        <React.Fragment>
         <div id='marketplace'>
-          <input id='file-input' type='file' name='name' className='hidden' accept='application/json' />
+          <FileUpload id='file-input' accept='application/json' loadFunction={(e) => this.manage('install', JSON.parse(e.target.result))} />
           <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
           <h1>{this.props.language.added}</h1>
           {content}

src/components/modals/tabs/Marketplace.jsx

@@ -100,9 +100,9 @@ export default class Marketplace extends React.PureComponent {
         default: break;
     }
     toast(this.props.toastLanguage[type + 'ed']);
-    let button = this.buttons.install;
-    if (type === 'install') button = this.buttons.uninstall;
-    this.setState({ button: button });
+    this.setState({
+      button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
+    });
   }
 
   componentDidMount() {
@@ -132,7 +132,7 @@ export default class Marketplace extends React.PureComponent {
         );
     }
 
-    if (this.state.done === false) return returnMessage(<h1>{this.props.updateLanguage.loading}</h1>)
+    if (this.state.done === false) return returnMessage(<h1>{this.props.updateLanguage.loading}</h1>);
 
     return (
         <React.Fragment>

src/modules/helpers/marketplace.js

@@ -24,6 +24,7 @@ export default class MarketplaceFunctions {
                   console.error(e);
               }
         }
+
         let installed = JSON.parse(localStorage.getItem('installed'));
         for (let i = 0; i < installed.length; i++) {
             if (installed[i].name === name) {

src/modules/helpers/settings.js

@@ -47,8 +47,6 @@ export default class SettingsFunctions {
     }
 
     static saveStuff(hexDisabled) {
-        localStorage.setItem('greetingName', document.getElementById('greetingName').value);
-        localStorage.setItem('customBackground', document.getElementById('customBackground').value);
         localStorage.setItem('customcss', document.getElementById('customcss').value);
         if (document.getElementById('customBackgroundHex').value !== hexDisabled) {
             localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);