soon

package.json

@@ -18,6 +18,7 @@
     "fontsource-lexend-deca": "^3.0.10",
     "fontsource-roboto": "^3.0.3",
     "react": "17.0.1",
+    "react-beforeunload": "^2.4.0",
     "react-clock": "^2.4.0",
     "react-color-gradient-picker": "^0.1.2",
     "react-date-picker": "^8.0.5",

src/components/modals/settings/FileUpload.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { toast } from 'react-toastify';
+
+export default class FileUpload extends React.PureComponent {
+  componentDidMount() {
+    document.getElementById(this.props.id).onchange = (e) => {
+        const reader = new FileReader();
+        const file = e.target.files[0];
+
+        if (this.props.type === 'settings') reader.readAsText(file, 'UTF-8');
+        else { // file upload
+          if (file.size > 2000000) return toast('File is over 2MB');
+          reader.readAsDataURL(file);
+        }
+        reader.addEventListener('load', (e) => this.props.loadFunction(e));
+    };
+  }
+
+  render() {
+    return <input id={this.props.id} type='file' className='hidden' accept={this.props.accept} />;
+  }
+}

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

@@ -3,9 +3,11 @@ import { toast } from 'react-toastify';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Section from '../Section';
+import FileUpload from '../FileUpload';
 import { ColorPicker } from 'react-color-gradient-picker';
 import hexToRgb from '../../../../modules/helpers/background/hexToRgb';
 import rgbToHex from '../../../../modules/helpers/background/rgbToHex';
+import { Beforeunload } from 'react-beforeunload';
 
 import 'react-color-gradient-picker/dist/index.css';
 import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
@@ -62,21 +64,6 @@ export default class BackgroundSettings extends React.PureComponent {
   }
 
   componentDidMount() {
-    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');
-
-      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);
-    };
-
     const hex = localStorage.getItem('customBackgroundColour');
     let gradientSettings = undefined;
 
@@ -150,23 +137,34 @@ export default class BackgroundSettings extends React.PureComponent {
       return {
         shown: !state.shown
       };
-    })
+    });
+  }
+
+  fileUpload(e) {
+    localStorage.setItem('customBackground', e.target.result);
+    document.getElementById('customBackground').value = e.target.result;
+  }
+
+  beforeUnload() {
+    localStorage.setItem('blur', this.state.blur);
+    localStorage.setItem('brightness', this.state.brightness);
   }
 
   render() {
     let colourSettings = null;
     if (typeof this.state.gradientSettings === 'object') {
       const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
+
       let gradientInputs;
       if (gradientHasMoreThanOneColour) {
         if (this.GradientPickerInitalState === undefined) this.InitializeColorPickerState(this.state.gradientSettings);
         gradientInputs = (
-        <ColorPicker
-          onStartChange={(color) => this.onColorPickerChange(color, 'start')}
-          onChange={(color) => this.onColorPickerChange(color, 'change')}
-          onEndChange={(color) => this.onColorPickerChange(color, 'end')}
-          gradient={this.GradientPickerInitalState}
-          isGradient/>
+          <ColorPicker
+            onStartChange={(color) => this.onColorPickerChange(color, 'start')}
+            onChange={(color) => this.onColorPickerChange(color, 'change')}
+            onEndChange={(color) => this.onColorPickerChange(color, 'end')}
+            gradient={this.GradientPickerInitalState}
+            isGradient />
         );
       } else {
         gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
@@ -178,6 +176,7 @@ export default class BackgroundSettings extends React.PureComponent {
           );
         });
       }
+
       colourSettings = (
         <div>
           {gradientInputs}
@@ -187,6 +186,7 @@ export default class BackgroundSettings extends React.PureComponent {
         </div>
       );
     }
+
     return (
       <React.Fragment>
         <Section title={this.props.language.background.title} name='background' onToggle={this.onSectionToggle}>
@@ -202,17 +202,17 @@ export default class BackgroundSettings extends React.PureComponent {
               name='backgroundapi'
               id='backgroundAPI'
               onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
-              <option className='choices' value='mue'>Mue</option>
-              <option className='choices' value='unsplash'>Unsplash</option>
+                <option className='choices' value='mue'>Mue</option>
+                <option className='choices' value='unsplash'>Unsplash</option>
             </Dropdown>
           </ul>
           <ul>
             <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
-            <input className='range' type='range' min='0' max='100' id='blurRange' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
+            <input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
           </ul>
           <ul>
             <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
-            <input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
+            <input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
           </ul>
           <ul>
             <p>{this.props.language.background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
@@ -221,7 +221,7 @@ export default class BackgroundSettings extends React.PureComponent {
           <ul>
             <p>{this.props.language.background.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
             <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
-            <input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
+            <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
           </ul>
           <ul>
             <p>{this.props.language.background.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
@@ -229,6 +229,7 @@ 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

@@ -23,6 +23,10 @@ export default class GreetingSettings extends React.PureComponent {
       this.setState({ birthday: data });
   }
 
+  componentDidMount() {
+    document.getElementById('greetingName').value = localStorage.getItem('greetingName');
+  }
+
   render() {
     return (
         <Section title={this.props.language.greeting.title} name='greeting'>

src/components/modals/tabs/Settings.jsx

@@ -3,6 +3,7 @@ import SettingsFunctions from '../../../modules/helpers/settings';
 import Checkbox from '../settings/Checkbox';
 import Dropdown from '../settings/Dropdown';
 import Section from '../settings/Section';
+import FileUpload from '../settings/FileUpload';
 import { toast } from 'react-toastify';
 
 import BackgroundSettings from '../settings/sections/BackgroundSettings';
@@ -18,7 +19,6 @@ export default class Settings extends React.PureComponent {
 
   componentDidMount() {
     // Settings
-    document.getElementById('greetingName').value = localStorage.getItem('greetingName');
     document.getElementById('language').value = localStorage.getItem('language');
     document.getElementById('customcss').value = localStorage.getItem('customcss');
 
@@ -26,17 +26,12 @@ export default class Settings extends React.PureComponent {
       const choices = document.getElementsByClassName('choices');
       for (let i = 0; i < choices.length; i++) choices[i].style.backgroundColor = '#2f3542';
     }
+  }
 
-    document.getElementById('file-input').onchange = (e) => { // import settings
-      const reader = new FileReader();
-      reader.readAsText(e.target.files[0], '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(this.props.toastLanguage.imported);
-      };
-    };
+  settingsImport(e) {
+    const content = JSON.parse(e.target.result);
+    for (const key of Object.keys(content)) localStorage.setItem(key, content[key]);
+    toast(this.props.toastLanguage.imported);
   }
 
   render() {
@@ -98,7 +93,7 @@ export default class Settings extends React.PureComponent {
           <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>
-          <input id='file-input' type='file' name='name' className='hidden' accept='application/json' />
+          <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
         </div>
     );
   }

src/modules/helpers/settings.js

@@ -47,8 +47,6 @@ export default class SettingsFunctions {
     }
 
     static saveStuff(hexDisabled) {
-        localStorage.setItem('blur', document.getElementById('blurRange').value);  // this is better than inline onChange for performance
-        localStorage.setItem('brightness', document.getElementById('brightnessRange').value);
         localStorage.setItem('greetingName', document.getElementById('greetingName').value);
         localStorage.setItem('customBackground', document.getElementById('customBackground').value);
         localStorage.setItem('customcss', document.getElementById('customcss').value);