refactor: imports etc

src/components/modals/main/Main.jsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import { Suspense, lazy } from 'react';
 
 import Tabs from './tabs/backend/Tabs';
 
 import './scss/index.scss';
 
 // Lazy load all the tabs instead of the modal itself
-const Settings = React.lazy(() => import('./tabs/Settings'));
-const Addons = React.lazy(() => import('./tabs/Addons'));
-const Marketplace = React.lazy(() => import('./tabs/Marketplace'));
+const Settings = lazy(() => import('./tabs/Settings'));
+const Addons = lazy(() => import('./tabs/Addons'));
+const Marketplace = lazy(() => import('./tabs/Marketplace'));
 
 const renderLoader = () => (
   <Tabs>
@@ -30,19 +30,19 @@ export default function MainModal(props) {
       <span className='closeModal' onClick={props.modalClose}>&times;</span>
       <Tabs navbar={true}>
         <div label={language.settings} name='settings'>
-          <React.Suspense fallback={renderLoader()}>
+          <Suspense fallback={renderLoader()}>
             <Settings/>
-          </React.Suspense>
+          </Suspense>
         </div>
         <div label={language.addons} name='addons'>
-          <React.Suspense fallback={renderLoader()}>
+          <Suspense fallback={renderLoader()}>
             <Addons/>
-          </React.Suspense>
+          </Suspense>
         </div>
         <div label={language.marketplace} name='marketplace'>
-          <React.Suspense fallback={renderLoader()}>
+          <Suspense fallback={renderLoader()}>
             <Marketplace/>
-          </React.Suspense>
+          </Suspense>
         </div>
       </Tabs>
     </>

src/components/modals/main/marketplace/Item.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Modal from 'react-modal';
 
@@ -6,7 +6,7 @@ import Lightbox from './Lightbox';
 
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-export default class Item extends React.PureComponent {
+export default class Item extends PureComponent {
   constructor() {
     super();
     this.state = {

src/components/modals/main/marketplace/sections/Added.jsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import LocalMallIcon from '@material-ui/icons/LocalMall';
 import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 
-import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
+import { uninstall, urlParser } from '../../../../../modules/helpers/marketplace';
 
 import { toast } from 'react-toastify';
 
-export default class Added extends React.PureComponent {
+export default class Added extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -34,7 +34,7 @@ export default class Added extends React.PureComponent {
           name: data,
           display_name: info.name,
           author: info.author,
-          description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
+          description: urlParser(info.description.replace(/\n/g, '<br>')),
           //updated: info.updated,
           version: info.version,
           icon: info.screenshot_url,
@@ -51,7 +51,7 @@ export default class Added extends React.PureComponent {
   }
 
   uninstall() {
-    MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name);
+    uninstall(this.state.item.type, this.state.item.display_name);
     
     toast(window.language.toasts.uninstalled);
 

src/components/modals/main/marketplace/sections/Create.jsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import FileUpload from '../../settings/FileUpload';
 
-import SettingsFunctions from '../../../../../modules/helpers/settings/modals';
+import { saveFile } from '../../../../../modules/helpers/settings/modals';
 
 import { toast } from 'react-toastify';
 
-export default class Create extends React.PureComponent {
+export default class Create extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -72,7 +72,7 @@ export default class Create extends React.PureComponent {
   }
 
   downloadAddon() {
-    SettingsFunctions.saveFile({
+    saveFile({
       name: this.state.addonMetadata.name,
       description: this.state.addonMetadata.description,
       type: this.state.addonMetadata.type,

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import WifiOffIcon from '@material-ui/icons/WifiOff';
 import LocalMallIcon from '@material-ui/icons/LocalMall';
@@ -7,11 +7,11 @@ import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 
-import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
+import { install, urlParser, uninstall } from '../../../../../modules/helpers/marketplace';
 
 import { toast } from 'react-toastify';
 
-export default class Marketplace extends React.PureComponent {
+export default class Marketplace extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -59,7 +59,7 @@ export default class Marketplace extends React.PureComponent {
           type: info.data.type,
           display_name: info.data.name,
           author: info.data.author,
-          description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+          description: urlParser(info.data.description.replace(/\n/g, '<br>')),
           //updated: info.updated,
           version: info.data.version,
           icon: info.data.screenshot_url,
@@ -96,9 +96,9 @@ export default class Marketplace extends React.PureComponent {
 
   manage(type) {
     if (type === 'install') {
-      MarketplaceFunctions.install(this.state.item.type, this.state.item.data);
+      install(this.state.item.type, this.state.item.data);
     } else {
-      MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name);
+      uninstall(this.state.item.type, this.state.item.display_name);
     }
 
     toast(window.language.toasts[type + 'ed']);

src/components/modals/main/marketplace/sections/Sideload.jsx

@@ -2,13 +2,12 @@ import LocalMallIcon from '@material-ui/icons/LocalMall';
 
 import FileUpload from '../../settings/FileUpload';
 
-import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
-
+import { install } from '../../../../../modules/helpers/marketplace';
 import { toast } from 'react-toastify';
 
 export default function Sideload() {
-  const install = (input) => {
-    MarketplaceFunctions.install(input.type, input);
+  const installAddon = (input) => {
+    install(input.type, input);
     toast(window.language.toasts.installed);
     window.stats.postEvent('marketplace', 'Sideload');
   };
@@ -16,7 +15,7 @@ export default function Sideload() {
   return (
     <div className='emptyitems'>
       <div className='emptyMessage'>
-        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => install(JSON.parse(e.target.result))} />
+        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => installAddon(JSON.parse(e.target.result))} />
         <LocalMallIcon/>
         <h1>{window.language.modals.main.addons.sideload}</h1>
         <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.settings.sections.background.source.upload}</button>

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
 import CheckboxUI from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-export default class Checkbox extends React.PureComponent {
+export default class Checkbox extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-export default class Dropdown extends React.PureComponent {
+export default class Dropdown extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import { toast } from 'react-toastify';
 
-export default class FileUpload extends React.PureComponent {
+export default class FileUpload extends PureComponent {
   componentDidMount() {
     document.getElementById(this.props.id).onchange = (e) => {
       const reader = new FileReader();

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
@@ -8,7 +8,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
 
-export default class Radio extends React.PureComponent {
+export default class Radio extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

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

@@ -1,14 +1,14 @@
 import CloseIcon from '@material-ui/icons/Close';
 import DeleteIcon from '@material-ui/icons/Delete';
 
-import SettingsFunctions from '../../../../modules/helpers/settings';
+import { setDefaultSettings } from '../../../../modules/helpers/settings';
 
 export default function ResetModal(props) {
   const language = window.language.modals.main.settings.sections.advanced.reset_modal;
 
   const reset = () => {
     window.stats.postEvent('setting', 'Reset');
-    SettingsFunctions.setDefaultSettings('reset');
+    setDefaultSettings('reset');
     window.location.reload();
   };
 

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

@@ -1,11 +1,11 @@
 // todo: find a better method to do width of number input
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
 import { toast } from 'react-toastify';
 
-export default class Slider extends React.PureComponent {
+export default class Slider extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
 import SwitchUI from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-export default class Switch extends React.PureComponent {
+export default class Switch extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
 import { toast } from 'react-toastify';
 
-export default class Text extends React.PureComponent {
+export default class Text extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Tooltip from '../../../../helpers/tooltip/Tooltip';
 import EmailIcon from '@material-ui/icons/Email';
@@ -9,7 +9,7 @@ import FacebookIcon from '@material-ui/icons/Facebook';
 
 const other_contributors = require('../../../../../modules/other_contributors.json');
 
-export default class About extends React.PureComponent {
+export default class About extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
@@ -7,13 +7,13 @@ import Switch from '../Switch';
 import ResetModal from '../ResetModal';
 import Dropdown from '../Dropdown';
 
-import SettingsFunctions from '../../../../../modules/helpers/settings/modals';
+import { exportSettings, importSettings } from '../../../../../modules/helpers/settings/modals';
 
 import Modal from 'react-modal';
 
 const time_zones = require('../../../../widgets/time/timezones.json');
 
-export default class AdvancedSettings extends React.PureComponent {
+export default class AdvancedSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -38,9 +38,9 @@ export default class AdvancedSettings extends React.PureComponent {
 
         <h3>{advanced.data}</h3>
         <button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.language.buttons.reset}</button>
-        <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.language.buttons.export}</button>
+        <button className='export' onClick={() => exportSettings()}>{this.language.buttons.export}</button>
         <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.language.buttons.import}</button>
-        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => SettingsFunctions.importSettings(e)}/>
+        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => importSettings(e)}/>
 
         <h3>{advanced.customisation}</h3>
         <Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Modal from 'react-modal';
 
@@ -6,7 +6,7 @@ import Lightbox from '../../marketplace/Lightbox';
 
 import WifiOffIcon from '@material-ui/icons/WifiOff';
 
-export default class Changelog extends React.PureComponent {
+export default class Changelog extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
 import Slider from '../Slider';
 
-export default class GreetingSettings extends React.PureComponent {
+export default class GreetingSettings extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Radio from '../Radio';
 
 const languages = require('../../../../../modules/languages.json');
 
-export default class BackgroundSettings extends React.PureComponent {
+export default class BackgroundSettings extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../../modules/helpers/eventbus';
 
@@ -36,7 +36,7 @@ const SortableContainer = sortableContainer(({ children }) => {
   return <ul className='sortablecontainer'>{children}</ul>;
 });
 
-export default class OrderSettings extends React.PureComponent {
+export default class OrderSettings extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
 import Text from '../Text';
@@ -6,7 +6,7 @@ import Switch from '../Switch';
 import Slider from '../Slider';
 import Dropdown from '../Dropdown';
 
-export default class QuoteSettings extends React.PureComponent {
+export default class QuoteSettings extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
@@ -12,7 +12,7 @@ import { toast } from 'react-toastify';
 const searchEngines = require('../../../../widgets/search/search_engines.json');
 const autocompleteProviders = require('../../../../widgets/search/autocomplete_providers.json');
 
-export default class SearchSettings extends React.PureComponent {
+export default class SearchSettings extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Switch from '../Switch';
 
 import EventBus from '../../../../../modules/helpers/eventbus';
 
-export default class Stats extends React.PureComponent {
+export default class Stats extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
@@ -6,7 +6,7 @@ import Switch from '../Switch';
 import Radio from '../Radio';
 import Slider from '../Slider';
 
-export default class TimeSettings extends React.PureComponent {
+export default class TimeSettings extends PureComponent {
   constructor() {
     super();
     this.state = {

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Switch from '../Switch';
 import Radio from '../Radio';
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
 
-export default class TimeSettings extends React.PureComponent {
+export default class TimeSettings extends PureComponent {
   constructor() {
     super();
     this.state = {

src/components/modals/main/settings/sections/background/Background.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../../../modules/helpers/eventbus';
 
@@ -13,7 +13,7 @@ import ColourSettings from './Colour';
 
 import { toast } from 'react-toastify';
 
-export default class BackgroundSettings extends React.PureComponent {
+export default class BackgroundSettings extends PureComponent {
   constructor() {
     super();
     this.state = {

src/components/modals/main/settings/sections/background/Colour.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent, Fragment } from 'react';
 
 import { ColorPicker } from 'react-color-gradient-picker';
 
@@ -10,7 +10,7 @@ import { toast } from 'react-toastify';
 import 'react-color-gradient-picker/dist/index.css';
 import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
 
-export default class ColourSettings extends React.PureComponent {
+export default class ColourSettings extends PureComponent {
   DefaultGradientSettings = { angle: '180', gradient: [{ colour: '#ffb032', stop: 0 }], type: 'linear' };
   GradientPickerInitalState = undefined;
   
@@ -166,10 +166,10 @@ export default class ColourSettings extends React.PureComponent {
       } else {
         gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
           return (
-            <React.Fragment key={i}>
+            <Fragment key={i}>
               <input id={'colour_' + i} type='color' name='colour' className='colour' onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
               <label htmlFor={'colour_' + i} className='customBackgroundHex'>{g.colour}</label>
-            </React.Fragment>
+            </Fragment>
           );
         });
       }

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

@@ -18,11 +18,7 @@ import Tabs from './backend/Tabs';
 
 export default function Settings() {
   const { reminder, sections } = window.language.modals.main.settings;
-
-  let display = 'none';
-  if (localStorage.getItem('showReminder') === 'true') {
-    display = 'block';
-  }
+  const display = (localStorage.getItem('showReminder') === 'true') ? 'block' : 'none';
 
   return (
     <>
@@ -38,7 +34,7 @@ export default function Settings() {
         <div label={sections.order.title} name='order'><Order/></div>
         <div label={sections.language.title} name='language'><Language/></div>
         <div label={sections.advanced.title} name='advanced'><Advanced/></div>
-        <div label='Stats' name='stats'><Stats/></div>
+        <div label={sections.stats.title} name='stats'><Stats/></div>
         <div label={sections.experimental.title} name='experimental'><Experimental/></div>
         <div label={sections.changelog} name='changelog'><Changelog/></div>
         <div label={sections.about.title} name='about'><About/></div>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 // Navbar
 import Settings from '@material-ui/icons/SettingsRounded';
@@ -96,4 +96,4 @@ function Tab(props) {
   );
 }
 
-export default React.memo(Tab);
+export default memo(Tab);

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Tab from './Tab';
 import ErrorBoundary from '../../../ErrorBoundary';
 
-export default class Tabs extends React.PureComponent {
+export default class Tabs extends PureComponent {
   constructor(props) {
     super(props);