fix: cleanup code and fix weather etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/Modals.jsx

@@ -1,7 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import Modal from 'react-modal';
-//import Hotkeys from 'react-hot-keys';
 
 import Main from './main/Main';
 import Navbar from '../widgets/navbar/Navbar';
@@ -104,7 +103,6 @@ export default class Modals extends PureComponent {
           <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()} />
         </Modal>
         {this.state.preview ? <Preview setup={() => window.location.reload()} /> : null}
-        {/*variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? <Hotkeys keyName={variables.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null*/}
       </>
     );
   }

src/components/modals/main/scss/settings/_main.scss

@@ -82,14 +82,6 @@ h4 {
   cursor: pointer;
 }
 
-.keybind-table {
-  text-align: left;
-
-  th {
-    padding-right: 10px;
-  }
-}
-
 .photosEmpty {
   height: 400px;
   display: grid;

src/components/modals/main/settings/Checkbox.jsx

@@ -41,21 +41,19 @@ export default class Checkbox extends PureComponent {
 
   render() {
     return (
-      <>
-        <FormControlLabel
-          control={
-            <CheckboxUI
-              name={this.props.name}
-              color="primary"
-              className="checkbox"
-              checked={this.state.checked}
-              onChange={this.handleChange}
-              disabled={this.props.disabled || false}
-            />
-          }
-          label={this.props.text}
-        />
-      </>
+      <FormControlLabel
+        control={
+          <CheckboxUI
+            name={this.props.name}
+            color="primary"
+            className="checkbox"
+            checked={this.state.checked}
+            onChange={this.handleChange}
+            disabled={this.props.disabled || false}
+          />
+        }
+        label={this.props.text}
+      />
     );
   }
 }

src/components/modals/main/settings/KeybindInput.jsx

@@ -1,50 +0,0 @@
-import variables from 'modules/variables';
-import { MdCancel } from 'react-icons/md';
-import { TextField } from '@mui/material';
-
-export default function KeybindInput(props) {
-  const value = props.state[props.setting];
-
-  const getButton = () => {
-    if (!value) {
-      return (
-        <button
-          className="cleanButton"
-          style={{ visibility: 'hidden' }}
-          onClick={() => props.action('reset', props.setting)}
-        >
-          <MdCancel />
-        </button>
-      );
-    } else if (value === variables.getMessage('modals.main.settings.sections.keybinds.recording')) {
-      return (
-        <button className="cleanButton" onClick={() => props.action('cancel', props.setting)}>
-          <MdCancel />
-        </button>
-      );
-    } else {
-      return (
-        <button className="cleanButton" onClick={() => props.action('reset', props.setting)}>
-          <MdCancel />
-        </button>
-      );
-    }
-  };
-
-  return (
-    <>
-      <TextField
-        label={props.name}
-        onClick={() => props.action('listen', props.setting)}
-        value={
-          value || variables.getMessage('modals.main.settings.sections.keybinds.click_to_record')
-        }
-        readOnly
-        spellCheck={false}
-        varient="outlined"
-        InputLabelProps={{ shrink: true }}
-      />
-      {getButton()}
-    </>
-  );
-}

src/components/modals/main/settings/Switch.jsx

@@ -37,20 +37,18 @@ export default class Switch extends PureComponent {
 
   render() {
     return (
-      <>
-        <FormControlLabel
-          control={
-            <SwitchUI
-              name={this.props.name}
-              color="primary"
-              checked={this.state.checked}
-              onChange={this.handleChange}
-            />
-          }
-          label={this.props.header ? '' : this.props.text}
-          labelPlacement="start"
-        />
-      </>
+      <FormControlLabel
+        control={
+          <SwitchUI
+            name={this.props.name}
+            color="primary"
+            checked={this.state.checked}
+            onChange={this.handleChange}
+          />
+        }
+        label={this.props.header ? '' : this.props.text}
+        labelPlacement="start"
+      />
     );
   }
 }

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

@@ -1,255 +0,0 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
-
-import Header from '../Header';
-import KeybindInput from '../KeybindInput';
-
-export default class KeybindSettings extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
-      cancelled: false,
-    };
-  }
-
-  showReminder() {
-    document.querySelector('.reminder-info').style.display = 'none';
-    return localStorage.setItem('showReminder', false);
-  }
-
-  listen(type) {
-    const currentKeybinds = this.state.keybinds;
-    currentKeybinds[type] = variables.getMessage(
-      'modals.main.settings.sections.keybinds.recording',
-    );
-    this.setState({
-      keybinds: currentKeybinds,
-      cancelled: false,
-    });
-    this.forceUpdate();
-
-    let keys = '';
-    let previouskey = '';
-    this.keydown = document.addEventListener('keydown', (event) => {
-      if (event.key === previouskey && this.state.cancelled === true) {
-        return;
-      }
-
-      if (keys === '') {
-        keys = event.key;
-      } else {
-        keys = `${keys}+${event.key}`;
-      }
-
-      previouskey = event.key;
-    });
-
-    this.keyup = document.addEventListener('keyup', () => {
-      if (this.state.cancelled === true) {
-        return;
-      }
-
-      document.removeEventListener('keydown', this.keydown);
-      const keybinds = this.state.keybinds;
-      keybinds[type] = keys.split('+').slice(0, 4).join('+');
-      localStorage.setItem('keybinds', JSON.stringify(keybinds));
-      this.setState({
-        keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
-      });
-    });
-
-    document.removeEventListener('keyup', this.keyup);
-
-    this.showReminder();
-  }
-
-  cancel(type) {
-    document.removeEventListener('keydown', this.keydown);
-    document.removeEventListener('keyup', this.keyup);
-
-    const currentKeybinds = this.state.keybinds;
-    delete currentKeybinds[type];
-
-    this.setState({
-      keybinds: currentKeybinds,
-      cancelled: true,
-    });
-    this.forceUpdate();
-  }
-
-  reset(type) {
-    const keybinds = this.state.keybinds;
-    keybinds[type] = '';
-    localStorage.setItem('keybinds', JSON.stringify(keybinds));
-
-    this.setState({
-      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
-      cancelled: true,
-    });
-
-    this.showReminder();
-  }
-
-  action(action, e) {
-    switch (action) {
-      case 'listen':
-        this.listen(e);
-        break;
-      case 'cancel':
-        this.cancel(e);
-        break;
-      case 'reset':
-        this.reset(e);
-        break;
-      default:
-        break;
-    }
-  }
-
-  render() {
-    return (
-      <>
-        <Header
-          title={variables.getMessage('modals.main.settings.sections.keybinds.title')}
-          setting="keybindsEnabled"
-          element=".other"
-        />
-        <table className="keybind-table">
-          <tbody>
-            <tr>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage(
-                    'modals.main.settings.sections.keybinds.background.favourite',
-                  )}
-                  state={this.state.keybinds}
-                  setting="favouriteBackground"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage(
-                    'modals.main.settings.sections.keybinds.background.maximise',
-                  )}
-                  state={this.state.keybinds}
-                  setting="maximiseBackground"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-            </tr>
-            <tr>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage(
-                    'modals.main.settings.sections.keybinds.background.download',
-                  )}
-                  state={this.state.keybinds}
-                  setting="downloadBackground"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage(
-                    'modals.main.settings.sections.keybinds.background.show_info',
-                  )}
-                  state={this.state.keybinds}
-                  setting="showBackgroundInformation"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-            </tr>
-            <tr>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage(
-                    'modals.main.settings.sections.keybinds.background.show_info',
-                  )}
-                  state={this.state.keybinds}
-                  setting="showBackgroundInformation"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage(
-                    'modals.main.settings.sections.keybinds.quote.favourite',
-                  )}
-                  state={this.state.keybinds}
-                  setting="favouriteQuote"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-            </tr>
-            <tr>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage('modals.main.settings.sections.keybinds.quote.copy')}
-                  state={this.state.keybinds}
-                  setting="copyQuote"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage('modals.main.settings.sections.keybinds.quote.tweet')}
-                  state={this.state.keybinds}
-                  setting="tweetQuote"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-            </tr>
-            <tr>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage('modals.main.settings.sections.keybinds.notes.pin')}
-                  state={this.state.keybinds}
-                  setting="pinNotes"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage('modals.main.settings.sections.keybinds.notes.copy')}
-                  state={this.state.keybinds}
-                  setting="copyNotes"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-            </tr>
-            <tr>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage('modals.main.settings.sections.keybinds.search')}
-                  state={this.state.keybinds}
-                  setting="focusSearch"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage('modals.main.settings.sections.keybinds.quicklinks')}
-                  state={this.state.keybinds}
-                  setting="toggleQuicklinks"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-            </tr>
-            <tr>
-              <th>
-                <KeybindInput
-                  name={variables.getMessage('modals.main.settings.sections.keybinds.modal')}
-                  state={this.state.keybinds}
-                  setting="toggleModal"
-                  action={(type, e) => this.action(type, e)}
-                />
-              </th>
-            </tr>
-          </tbody>
-        </table>
-      </>
-    );
-  }
-}

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

@@ -114,7 +114,7 @@ export default class OrderSettings extends PureComponent {
     </span>*/}
         <div className="overviewGrid">
           <div>
-            <span className="title">Preview</span>
+            <span className="title">{variables.getMessage('modals.welcome.buttons.preview')}</span>
             <div className="tabPreview">
               <div className="previewItem" style={{ maxWidth: '50%' }}>
                 {this.state.items.map((value, index) => {

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

@@ -60,6 +60,7 @@ export default class TimeSettings extends PureComponent {
 
   render() {
     const weatherType = localStorage.getItem('weatherType');
+    
     return (
       <>
         <Header

src/components/modals/main/tabs/Settings.jsx

@@ -15,7 +15,6 @@ import Weather from '../settings/sections/Weather';
 import Appearance from '../settings/sections/Appearance';
 import Language from '../settings/sections/Language';
 import Advanced from '../settings/sections/advanced/Advanced';
-//import Keybinds from '../settings/sections/Keybinds';
 import Stats from '../settings/sections/Stats';
 import Experimental from '../settings/sections/Experimental';
 import Changelog from '../settings/sections/Changelog';
@@ -93,7 +92,6 @@ export default function Settings(props) {
       >
         <Advanced />
       </div>
-      {/*<div label={variables.getMessage('modals.main.settings.sections.keybinds.title')} name='keybinds'><Keybinds/></div>*/}
       <div label={variables.getMessage('modals.main.settings.sections.stats.title')} name="stats">
         <Stats />
       </div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -18,7 +18,6 @@ import {
   MdTranslate as Language,
   MdOutlineSettings as Advanced,
   MdBugReport as Experimental,
-  //KeyboardAltOutlined as Keybinds,
   MdOutlineAssessment as Stats,
   MdOutlineNewReleases as Changelog,
   MdInfoOutline as About,
@@ -99,7 +98,6 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     case variables.getMessage('modals.main.settings.sections.advanced.title'):
       icon = <Advanced />;
       break;
-    //case variables.getMessage('modals.main.settings.sections.keybinds.title'): icon = <Keybinds/>; break;
     case variables.getMessage('modals.main.settings.sections.stats.title'):
       icon = <Stats />;
       break;