From 8aeb645046694f5f6a1e1d31df2f387b6315b7c2 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Sat, 19 Sep 2020 15:55:42 +0100
Subject: [PATCH] update experimental settings

---
 src/components/modals/Settings.jsx            |  2 +-
 src/components/modals/settings/Slider.jsx     |  6 +--
 .../sections/ExperimentalSettings.jsx         | 37 ++++++-------------
 3 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index ae855c33..33833e7a 100644
--- a/src/components/modals/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -124,6 +124,7 @@ export default class Settings extends React.PureComponent {
           <Section title={this.props.language.searchbar.title} name='searchBar'>
             <SearchSettings language={this.props.language} resetItem={(item) => this.resetItem(item)}/>
           </Section>
+          <ExperimentalSettings language={this.props.language} />
           <div className='section'>
             <h4>{this.props.language.offline}</h4>
             <Slider name='offlineMode'/>
@@ -132,7 +133,6 @@ export default class Settings extends React.PureComponent {
             <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>
diff --git a/src/components/modals/settings/Slider.jsx b/src/components/modals/settings/Slider.jsx
index bcde3767..d483adc8 100644
--- a/src/components/modals/settings/Slider.jsx
+++ b/src/components/modals/settings/Slider.jsx
@@ -5,7 +5,7 @@ export default class Slider extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      checked: true
+      checked: (localStorage.getItem(this.props.name) === 'true')
     };
   }
 
@@ -14,10 +14,6 @@ export default class Slider extends React.PureComponent {
     this.setState({ checked: (this.state.checked === true) ? false : true });
   }
 
-  componentDidMount() {
-    this.setState({ checked: (localStorage.getItem(this.props.name) === 'true') });
-  }
-
   render() {
     let setText = (this.props.override) ? this.props.name : this.props.override;
     return (
diff --git a/src/components/modals/settings/sections/ExperimentalSettings.jsx b/src/components/modals/settings/sections/ExperimentalSettings.jsx
index 117158da..77283a4d 100644
--- a/src/components/modals/settings/sections/ExperimentalSettings.jsx
+++ b/src/components/modals/settings/sections/ExperimentalSettings.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Slider from '../Slider';
+import Checkbox from '../Checkbox';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import SettingsFunctions from '../../../../modules/settingsFunctions';
 
@@ -7,31 +7,16 @@ export default class ExperimentalSettings extends React.PureComponent {
   render() {
     return (
         <div className='section'>
-        <h4>{this.props.language.experimental.title}</h4>
-        <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])} />
-        <li className='extraSettings'>
-          <div className='section'>
-            <h4>{this.props.language.experimental.webp}</h4>
-            <Slider name='webp' />
-          </div>
-          <div className='section'>
-             <h4>{this.props.language.experimental.animations}</h4>
-             <Slider name='animations' />
-          </div>
-          <div className='section'>
-             <h4>View</h4>
-             <Slider name='view' />
-          </div>
-          <div className='section'>
-             <h4>Favourite</h4>
-             <Slider name='favouriteEnabled' />
-          </div>
-          <div className='section'>
-             <h4>Refresh</h4>
-             <Slider name='refresh' />
-          </div>
-        </li>
-      </div>
+          <h4>{this.props.language.experimental.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])} />
+          <li className='extraSettings'>
+            <Checkbox name='webp' text={this.props.language.experimental.webp} />
+            <Checkbox name='animations' text={this.props.language.experimental.animations} />
+            <Checkbox name='view' text='View' />
+            <Checkbox name='favouriteEnabled' text='Favourite' />
+            <Checkbox name='refresh' text='Refresh' />
+          </li>
+        </div>
     );
   }
 }
\ No newline at end of file