refactor: remove lots of unused/unfinished code, change vite to mjs

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

@@ -1,6 +1,5 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Checkbox as CheckboxUI, FormControlLabel } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
@@ -59,13 +58,4 @@ class Checkbox extends PureComponent {
   }
 }
 
-Checkbox.propTypes = {
-  name: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  category: PropTypes.string,
-  element: PropTypes.string,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-};
-
 export default Checkbox;

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

@@ -1,5 +1,4 @@
 import { useState, memo } from 'react';
-import PropTypes from 'prop-types';
 
 import Box from '@mui/material/Box';
 import OutlinedInput from '@mui/material/OutlinedInput';
@@ -55,10 +54,4 @@ function ChipSelect({ label, options, name }) {
   );
 }
 
-ChipSelect.propTypes = {
-  label: PropTypes.string,
-  options: PropTypes.array,
-  name: PropTypes.string,
-};
-
 export default memo(ChipSelect);

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

@@ -1,6 +1,5 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import PropTypes from 'prop-types';
 import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
@@ -80,16 +79,4 @@ class Dropdown extends PureComponent {
   }
 }
 
-Dropdown.propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  category: PropTypes.string,
-  element: PropTypes.string,
-  onChange: PropTypes.func,
-  noSetting: PropTypes.bool,
-  manual: PropTypes.bool,
-  value2: PropTypes.string,
-  name2: PropTypes.string,
-};
-
 export default Dropdown;

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

@@ -1,6 +1,5 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
 import { videoCheck } from 'modules/helpers/background/widget';
@@ -63,11 +62,4 @@ class FileUpload extends PureComponent {
   }
 }
 
-FileUpload.propTypes = {
-  id: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  loadFunction: PropTypes.func.isRequired,
-  accept: PropTypes.string,
-};
-
 export default FileUpload;

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

@@ -1,7 +1,6 @@
 import variables from 'modules/variables';
 
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import {
   /*MdHelpOutline,*/ MdFlag,
   MdArrowBack,
@@ -115,16 +114,4 @@ class Header extends PureComponent {
   }
 }
 
-Header.propTypes = {
-  title: PropTypes.string.isRequired,
-  setting: PropTypes.string.isRequired,
-  category: PropTypes.string.isRequired,
-  element: PropTypes.string,
-  backButton: PropTypes.bool,
-  clickEffect: PropTypes.func,
-  switch: PropTypes.bool,
-  zoomSetting: PropTypes.string,
-  zoomCategory: PropTypes.string,
-};
-
 export default Header;

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

@@ -1,6 +1,5 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import {
   Radio as RadioUI,
   RadioGroup,
@@ -85,19 +84,4 @@ class Radio extends PureComponent {
   }
 }
 
-Radio.propTypes = {
-  name: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  onChange: PropTypes.func,
-  category: PropTypes.string,
-  element: PropTypes.string,
-  smallTitle: PropTypes.bool,
-};
-
 export default Radio;

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

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import PropTypes from 'prop-types';
 import variables from 'modules/variables';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { setDefaultSettings } from 'modules/helpers/settings';
@@ -46,8 +45,4 @@ function ResetModal({ modalClose }) {
   );
 }
 
-ResetModal.propTypes = {
-  modalClose: PropTypes.func.isRequired,
-};
-
 export default memo(ResetModal);

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

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import PropTypes from 'prop-types';
 
 function SettingsItem({ final, title, subtitle, children }) {
   return (
@@ -13,11 +12,4 @@ function SettingsItem({ final, title, subtitle, children }) {
   );
 }
 
-SettingsItem.propTypes = {
-  title: PropTypes.string.isRequired,
-  subtitle: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  final: PropTypes.bool,
-};
-
 export default memo(SettingsItem);

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

@@ -1,6 +1,5 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { Slider } from '@mui/material';
 import { MdRefresh } from 'react-icons/md';
@@ -86,16 +85,4 @@ class SliderComponent extends PureComponent {
   }
 }
 
-SliderComponent.propTypes = {
-  name: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  default: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-  marks: PropTypes.array,
-  element: PropTypes.string,
-  category: PropTypes.string,
-};
-
 export default SliderComponent;

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

@@ -1,6 +1,5 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Switch as SwitchUI, FormControlLabel } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
@@ -54,12 +53,4 @@ class Switch extends PureComponent {
   }
 }
 
-Switch.propTypes = {
-  name: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  category: PropTypes.string,
-  element: PropTypes.string,
-  header: PropTypes.bool,
-};
-
 export default Switch;

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

@@ -1,6 +1,5 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { TextField } from '@mui/material';
 
@@ -79,15 +78,4 @@ class Text extends PureComponent {
   }
 }
 
-Text.propTypes = {
-  title: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  category: PropTypes.string.isRequired,
-  default: PropTypes.string,
-  element: PropTypes.string,
-  customcss: PropTypes.bool,
-  textarea: PropTypes.bool,
-  upperCaseFirst: PropTypes.bool,
-};
-
 export default Text;

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

@@ -102,7 +102,7 @@ export default class AdvancedSettings extends PureComponent {
             'modals.main.settings.sections.advanced.custom_css_subtitle',
           )}
         >
-          <Text name="customcss" textarea={true} category="other" />
+          <Text name="customcss" textarea={true} category="other" customcss={true} />
         </SettingsItem>
         <SettingsItem
           title={variables.getMessage('modals.main.settings.sections.experimental.title')}

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

@@ -1,161 +0,0 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
-import Modal from 'react-modal';
-import { MenuItem } from '@mui/material';
-import {
-  MdUpload as ImportIcon,
-  MdDownload as ExportIcon,
-  MdRestartAlt as ResetIcon,
-  /* MdDataUsage, */
-  /* MdOutlineKeyboardArrowRight, */
-} from 'react-icons/md';
-
-import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
-
-import FileUpload from '../../FileUpload';
-import Text from '../../Text';
-import Switch from '../../Switch';
-import ResetModal from '../../ResetModal';
-import Dropdown from '../../Dropdown';
-import SettingsItem from '../../SettingsItem';
-
-//import Data from './Data';
-
-import time_zones from 'components/widgets/time/timezones.json';
-
-export default class AdvancedSettings extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      resetModal: false,
-      showData: false,
-    };
-  }
-
-  render() {
-    /*if (this.state.showData) {
-      return <Data goBack={() => this.setState({ showData: false })} />;
-    }*/
-
-    return (
-      <>
-        <span className="mainTitle">
-          {variables.getMessage('modals.main.settings.sections.advanced.title')}
-        </span>
-        {/* {localStorage.getItem('welcomePreview') !== 'true' ? (
-          <div className="moreSettings" onClick={() => this.setState({ showData: true })}>
-            <div className="left">
-              <MdDataUsage />
-              <div className="content">
-                <span className="title">
-                  {variables.getMessage('modals.main.settings.sections.advanced.data')}
-                </span>
-                <span className="subtitle">
-                  Sync, export, import etc your data. You have control, this is Mue.
-                </span>
-              </div>
-            </div>
-            <div className="action">
-              {' '}
-              <MdOutlineKeyboardArrowRight />
-            </div>
-          </div>
-        ) : null} */}
-        <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
-          subtitle={variables.getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
-        >
-          <Switch name="offlineMode" element=".other" />
-        </SettingsItem>
-        {localStorage.getItem('welcomePreview') !== 'true' && (
-          <div className="settingsRow">
-            <div className="content">
-              <span className="title">
-                {variables.getMessage('modals.main.settings.sections.advanced.data')}
-              </span>
-              <span className="subtitle">
-                {variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
-              </span>
-            </div>
-            <div className="action activityButtons">
-              <button onClick={() => this.setState({ resetModal: true })}>
-                {variables.getMessage('modals.main.settings.buttons.reset')}
-                <ResetIcon />
-              </button>
-              <button onClick={() => exportSettings()}>
-                {variables.getMessage('modals.main.settings.buttons.export')}
-                <ExportIcon />
-              </button>
-              <button onClick={() => document.getElementById('file-input').click()}>
-                {variables.getMessage('modals.main.settings.buttons.import')}
-                <ImportIcon />
-              </button>
-            </div>
-          </div>
-        )}
-        <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.advanced.timezone.subtitle',
-          )}
-        >
-          <Dropdown name="timezone" category="timezone" manual={true}>
-            <MenuItem value="auto">
-              {variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
-            </MenuItem>
-            {time_zones.map((timezone) => (
-              <MenuItem value={timezone} key={timezone}>
-                {timezone}
-              </MenuItem>
-            ))}
-          </Dropdown>
-        </SettingsItem>
-        <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.advanced.tab_name_subtitle',
-          )}
-        >
-          <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
-        </SettingsItem>
-        <FileUpload
-          id="file-input"
-          accept="application/json"
-          type="settings"
-          loadFunction={(e) => importSettings(e)}
-        />
-        <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.advanced.custom_css_subtitle',
-          )}
-        >
-          <Text name="customcss" textarea={true} category="other" customcss={true} />
-        </SettingsItem>
-        <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.experimental.title')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.advanced.experimental_warning',
-          )}
-          final={true}
-        >
-          <Switch
-            name="experimental"
-            text={variables.getMessage('modals.main.settings.enabled')}
-            element=".other"
-          />
-        </SettingsItem>
-        <Modal
-          closeTimeoutMS={100}
-          onRequestClose={() => this.setState({ resetModal: false })}
-          isOpen={this.state.resetModal}
-          className="Modal resetmodal mainModal"
-          overlayClassName="Overlay resetoverlay"
-          ariaHideApp={false}
-        >
-          <ResetModal modalClose={() => this.setState({ resetModal: false })} />
-        </Modal>
-      </>
-    );
-  }
-}

src/components/modals/main/settings/sections/advanced/Data.jsx

@@ -1,64 +0,0 @@
-import variables from 'modules/variables';
-import SettingsItem from '../../SettingsItem';
-import { PureComponent } from 'react';
-import {
-  MdOutlineKeyboardArrowRight,
-  MdUpload as ImportIcon,
-  MdDownload as ExportIcon,
-  MdRestartAlt as ResetIcon,
-  MdOutlineSync,
-} from 'react-icons/md';
-
-export default class Data extends PureComponent {
-  render() {
-    return (
-      <>
-        <span className="mainTitle" onClick={() => this.props.goBack()}>
-          {variables.getMessage('modals.main.settings.sections.advanced.title')}
-          <MdOutlineKeyboardArrowRight /> Data
-        </span>
-        <div
-          className="moreSettings"
-          style={{
-            display: 'flex',
-            flexFlow: 'column',
-            alignItems: 'center',
-            gap: '10px',
-            padding: '30px',
-          }}
-        >
-          <MdOutlineSync />
-          <span className="title">Sync</span>
-          {/*<span className='subtitle'>Last synced at: Sun 10:12PM, 1st May 2022</span>*/}
-          <span className="subtitle">Sync is not setup yet.</span>
-        </div>
-        <div className="settingsRow">
-          <div className="content">
-            <span className="title">
-              {variables.getMessage('modals.main.settings.sections.advanced.data')}
-            </span>
-            <span className="subtitle">
-              Choose whether to export your Mue settings to your computer, import an existing
-              settings file, or reset your settings to their default values.
-            </span>
-          </div>
-          <div className="action activityButtons">
-            <button>
-              {variables.getMessage('modals.main.settings.buttons.reset')}
-              <ResetIcon />
-            </button>
-            <button>
-              {variables.getMessage('modals.main.settings.buttons.export')}
-              <ExportIcon />
-            </button>
-            <button>
-              {variables.getMessage('modals.main.settings.buttons.import')}
-              <ImportIcon />
-            </button>
-          </div>
-        </div>
-        <SettingsItem title="Sync" subtitle="Setup sync to sync lol"></SettingsItem>
-      </>
-    );
-  }
-}

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

@@ -1,6 +1,5 @@
 import variables from 'modules/variables';
 import { useState, memo } from 'react';
-import PropTypes from 'prop-types';
 import { MdClose, MdOutlineAddLink } from 'react-icons/md';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
@@ -42,10 +41,4 @@ function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
   );
 }
 
-CustomURLModal.propTypes = {
-  modalClose: PropTypes.func.isRequired,
-  urlError: PropTypes.string.isRequired,
-  modalCloseOnly: PropTypes.func.isRequired,
-};
-
 export default memo(CustomURLModal);

src/components/modals/main/settings/sections/quicklinks/AddModal.jsx

@@ -1,7 +1,6 @@
 import variables from 'modules/variables';
 
 import { useState, memo } from 'react';
-import PropTypes from 'prop-types';
 import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
@@ -74,14 +73,4 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
   );
 }
 
-AddModal.propTypes = {
-  urlError: PropTypes.string.isRequired,
-  iconError: PropTypes.string.isRequired,
-  addLink: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  edit: PropTypes.bool.isRequired,
-  editData: PropTypes.object.isRequired,
-  editLink: PropTypes.func.isRequired,
-};
-
 export default memo(AddModal);