finish the new settings stuff

package.json

@@ -18,7 +18,6 @@
     "@material-ui/icons": "4.11.2",
     "deepmerge": "^4.2.2",
     "react": "17.0.1",
-    "react-beforeunload": "^2.4.0",
     "react-clock": "^3.0.0",
     "react-color-gradient-picker": "^0.1.2",
     "react-date-picker": "^8.0.6",

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

@@ -10,7 +10,6 @@ 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';
 import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
@@ -177,10 +176,14 @@ export default class BackgroundSettings extends React.PureComponent {
      });
   }
 
-  beforeUnload() {
+  componentDidUpdate() {
     localStorage.setItem('blur', this.state.blur);
     localStorage.setItem('brightness', this.state.brightness);
     localStorage.setItem('customBackground', this.state.customBackground);
+
+    if (document.getElementById('customBackgroundHex').value !== this.props.backgroundDisabled) {
+      localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
+    }
   }
 
   render() {
@@ -264,7 +267,6 @@ export default class BackgroundSettings extends React.PureComponent {
             {this.state.shown && colourSettings}
           </ul>
         </Section>
-        <Beforeunload onBeforeunload={() => this.beforeUnload()}/>
       </React.Fragment>
     );
   }

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

@@ -5,7 +5,6 @@ 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) {
@@ -36,7 +35,7 @@ export default class GreetingSettings extends React.PureComponent {
       });
   }
 
-  beforeUnload() {
+  componentDidUpdate() {
     localStorage.setItem('greetingName', this.state.greetingName);
   }
 
@@ -54,7 +53,6 @@ export default class GreetingSettings extends React.PureComponent {
           <p>{this.props.language.greeting.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
         </ul>
-        <Beforeunload onBeforeunload={() => this.beforeUnload()}/>
       </Section>
     );
   }

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

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import SettingsFunctions from '../../../../modules/helpers/settings';
-
 import { toast } from 'react-toastify';
 
 import Section from '../Section';
@@ -35,6 +33,28 @@ export default class SearchSettings extends React.PureComponent {
     document.getElementById('searchEngine').value = searchEngine;
   }
 
+  componentDidUpdate() {
+    if (document.getElementById('searchEngineInput').enabled === 'true') {
+      const input = document.getElementById('customSearchEngine').value;
+      if (input) {
+          localStorage.setItem('searchEngine', 'custom');
+          localStorage.setItem('customSearchEngine', input);
+      }
+    }
+  }
+
+  setSearchEngine(input) {
+    const searchEngineInput = document.getElementById('searchEngineInput');
+    if (input === 'custom') {
+        searchEngineInput.enabled = 'true';
+        searchEngineInput.style.display = 'block';
+    } else {
+        searchEngineInput.style.display = 'none';
+        searchEngineInput.enabled = 'false';
+        localStorage.setItem('searchEngine', input);
+    }
+  }
+
   render() {
     return (
         <Section title={this.props.language.searchbar.title} name='searchBar'>
@@ -43,7 +63,7 @@ export default class SearchSettings extends React.PureComponent {
             <Dropdown label={this.props.language.searchbar.search_engine}
               name='searchEngine'
               id='searchEngine'
-              onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)} >
+              onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
               {searchEngines.map((engine) =>
                 <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
               )}

src/components/modals/tabs/Settings.jsx

@@ -42,6 +42,10 @@ export default class Settings extends React.PureComponent {
     toast(this.props.toastLanguage.imported);
   }
 
+  componentWillUnmount() {
+    localStorage.setItem('customcss', document.getElementById('customcss').value);
+  }
+
   render() {
     return (
         <div className='columns'>
@@ -81,7 +85,7 @@ export default class Settings extends React.PureComponent {
             </Dropdown>
           </Section>
 
-          <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+          <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} backgroundDisabled={this.props.language.background.disabled} />
           <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
           <Section title={this.props.language.offline} name='offlineMode' dropdown={false} />
 
@@ -97,7 +101,7 @@ export default class Settings extends React.PureComponent {
 
           <LanguageSettings language={this.props.language} />
 
-          <button className='apply' onClick={() => SettingsFunctions.saveStuff(this.props.language.background.disabled)}>{this.props.language.apply}</button>
+          <button className='apply' onClick={() => window.location.reload()}>{this.props.language.apply}</button>
           <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{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>

src/modules/helpers/settings.js

@@ -43,36 +43,6 @@ export default class SettingsFunctions {
         localStorage.setItem(key, val);
     }
 
-    static setSearchEngine(input) {
-        const searchEngineInput = document.getElementById('searchEngineInput');
-        if (input === 'custom') {
-            searchEngineInput.enabled = 'true';
-            searchEngineInput.style.display = 'block';
-        } else {
-            searchEngineInput.style.display = 'none';
-            searchEngineInput.enabled = 'false';
-            localStorage.setItem('searchEngine', input);
-        }
-    }
-
-    static saveStuff(hexDisabled) {
-        localStorage.setItem('customcss', document.getElementById('customcss').value);
-
-        if (document.getElementById('customBackgroundHex').value !== hexDisabled) {
-            localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
-        }
-
-        if (document.getElementById('searchEngineInput').enabled === 'true') {
-            const input = document.getElementById('customSearchEngine').value;
-            if (input) {
-                localStorage.setItem('searchEngine', 'custom');
-                localStorage.setItem('customSearchEngine', input);
-            }
-        }
-
-        window.location.reload();
-    }
-
     static setDefaultSettings(reset) {
         localStorage.clear();
         defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
@@ -85,7 +55,7 @@ export default class SettingsFunctions {
         }
 
         // Languages
-        const languages = ['nl', 'no', 'fr', 'ru', 'es'];
+        const languages = ['es', 'fr', 'nl', 'no', 'ru'];
         const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
 
         if (languages.includes(browserLanguage)) {