refactor: new settings components

src/components/modals/main/settings/sections/Appearance.jsx

@@ -3,127 +3,70 @@ import React from 'react';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Radio from '../Radio';
+import Slider from '../Slider';
+import Text from '../Text';
 
-import { toast } from 'react-toastify';
+export default function AppearanceSettings(props) {
+  const { appearance } = window.language.modals.main.settings.sections;
 
-export default class AppearanceSettings extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      zoom: localStorage.getItem('zoom'),
-      toast_duration: localStorage.getItem('toastDisplayTime'),
-      font: localStorage.getItem('font') || ''
-    };
-    this.language = window.language.modals.main.settings;
-  }
-
-  resetItem(key) {
-    switch (key) {
-      case 'zoom':
-        localStorage.setItem('zoom', 100);
-        this.setState({
-          zoom: 100
-        });
-        break;
-
-      case 'toast_duration':
-        localStorage.setItem('toastDisplayTime', 2500);
-        this.setState({
-          toast_duration: 2500
-        });
-        break;
-
-      case 'font':
-        localStorage.setItem('font', '');
-        this.setState({
-          font: ''
-        });
-        break;
-
-      default:
-        toast('resetItem requires a key!');
+  let themeOptions = [
+    {
+      'name': 'Auto',
+      'value': 'auto'
+    },
+    {
+      'name': 'Light',
+      'value': 'light'
+    }, {
+      'name': 'Dark',
+      'value': 'dark'
     }
+  ]
 
-    toast(this.language.toasts.reset);
-  }
+  return (
+    <div>
+      <h2>{appearance.title}</h2>
+      <Radio name='theme' title='Theme' options={themeOptions} />
 
-  componentDidUpdate() {
-    localStorage.setItem('zoom', this.state.zoom);
-    localStorage.setItem('toastDisplayTime', this.state.toast_duration);
-    localStorage.setItem('font', this.state.font.charAt(0).toUpperCase() + this.state.font.slice(1));
-  }
+      <h3>{appearance.navbar.title}</h3>
+      <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
+      <Checkbox name='refresh' text={appearance.navbar.refresh} />
 
-  render() {
-    const { appearance } = this.language.sections;
+      <h3>{appearance.font.title}</h3>
+      <Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
+      <br/>
+      <Dropdown
+          label='Font Weight'
+          name='fontweight'
+          id='fontWeight'
+          onChange={() => localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}>
+            {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
+            <option className='choices' value='100'>Thin</option>
+            <option className='choices' value='200'>Extra-Light</option>
+            <option className='choices' value='300'>Light</option>
+            <option className='choices' value='400'>Normal</option>
+            <option className='choices' value='500'>Medium</option>
+            <option className='choices' value='600'>Semi-Bold</option>
+            <option className='choices' value='700'>Bold</option>
+            <option className='choices' value='800'>Extra-Bold</option>
+      </Dropdown>
+      <br /><br />
+      <Dropdown
+          label='Font Style'
+          name='fontstyle'
+          id='fontStyle'
+          onChange={() => localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}>
+            <option className='choices' value='normal'>Normal</option>
+            <option className='choices' value='italic'>Italic</option>
+            <option className='choices' value='oblique'>Oblique</option>
+      </Dropdown>
+      <br /><br />
+      <Checkbox name='fontGoogle' text={appearance.font.google} />
 
-    let themeOptions = [
-      {
-        'name': 'Auto',
-        'value': 'auto'
-      },
-      {
-        'name': 'Light',
-        'value': 'light'
-      }, {
-        'name': 'Dark',
-        'value': 'dark'
-      }
-    ]
-
-    return (
-      <div>
-        <h2>{appearance.title}</h2>
-        <Radio name='theme' title='Theme' options={themeOptions} />
-
-        <h3>{appearance.navbar.title}</h3>
-        <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
-        <Checkbox name='refresh' text={appearance.navbar.refresh} />
-  
-        <h3>{appearance.font.title}</h3>
-        <ul>
-          <p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.language.buttons.reset}</span></p>
-          <input type='text' value={this.state.font} onChange={(e) => this.setState({ font: e.target.value })}></input>
-        </ul>
-        <br/>
-        <Dropdown
-            label='Font Weight'
-            name='fontweight'
-            id='fontWeight'
-            onChange={() => localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}>
-              {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
-              <option className='choices' value='100'>Thin</option>
-              <option className='choices' value='200'>Extra-Light</option>
-              <option className='choices' value='300'>Light</option>
-              <option className='choices' value='400'>Normal</option>
-              <option className='choices' value='500'>Medium</option>
-              <option className='choices' value='600'>Semi-Bold</option>
-              <option className='choices' value='700'>Bold</option>
-              <option className='choices' value='800'>Extra-Bold</option>
-        </Dropdown>
-        <br /><br />
-        <Dropdown
-            label='Font Style'
-            name='fontstyle'
-            id='fontStyle'
-            onChange={() => localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}>
-              <option className='choices' value='normal'>Normal</option>
-              <option className='choices' value='italic'>Italic</option>
-              <option className='choices' value='oblique'>Oblique</option>
-        </Dropdown>
-        <br /><br />
-        <Checkbox name='fontGoogle' text={appearance.font.google} />
-
-        <h3>{appearance.accessibility.title}</h3>
-        <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
-        <ul>
-          <p>{appearance.accessibility.zoom} ({this.state.zoom}%) <span className='modalLink' onClick={() => this.resetItem('zoom')}>{this.language.buttons.reset}</span></p>
-          <input className='range' type='range' min='50' max='200' value={this.state.zoom} onChange={(event) => this.setState({ zoom: event.target.value })} />
-        </ul>
-        <ul>
-          <p>{appearance.accessibility.toast_duration} ({this.state.toast_duration} {appearance.accessibility.milliseconds}) <span className='modalLink' onClick={() => this.resetItem('toast_duration')}>{this.language.buttons.reset}</span></p>
-          <input className='range' type='range' min='500' max='5000' value={this.state.toast_duration} onChange={(event) => this.setState({ toast_duration: event.target.value })} />
-        </ul>
-      </div>
-    );
-  }
+      <h3>{appearance.accessibility.title}</h3>
+      <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
+      <Slider title={appearance.accessibility.zoom} name='zoom' default='100' min='50' max='200' display='%'/>
+      <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' min='500' max='5000' display={' ' + appearance.accessibility.milliseconds} />
+    </div>
+  );
 }