feat(dev): jsdoc and prop-types

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

@@ -1,10 +1,11 @@
 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';
 
-export default class Checkbox extends PureComponent {
+class Checkbox extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -36,7 +37,7 @@ export default class Checkbox extends PureComponent {
       }
     }
 
-    EventBus.dispatch('refresh', this.props.category);
+    EventBus.emit('refresh', this.props.category);
   };
 
   render() {
@@ -57,3 +58,14 @@ export default 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,4 +1,6 @@
 import { useState, memo } from 'react';
+import PropTypes from 'prop-types';
+
 import Box from '@mui/material/Box';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import InputLabel from '@mui/material/InputLabel';
@@ -53,4 +55,10 @@ 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,10 +1,11 @@
 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';
 
-export default class Dropdown extends PureComponent {
+class Dropdown extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -43,7 +44,7 @@ export default class Dropdown extends PureComponent {
       }
     }
 
-    EventBus.dispatch('refresh', this.props.category);
+    EventBus.emit('refresh', this.props.category);
   };
 
   render() {
@@ -76,3 +77,17 @@ export default 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,10 +1,11 @@
 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';
 
-export default class FileUpload extends PureComponent {
+class FileUpload extends PureComponent {
   componentDidMount() {
     document.getElementById(this.props.id).onchange = (e) => {
       const reader = new FileReader();
@@ -61,3 +62,12 @@ export default 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,6 +1,7 @@
 import variables from 'modules/variables';
 
 import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import { /*MdHelpOutline,*/ MdFlag, MdArrowBack } from 'react-icons/md';
 
 import Slider from './Slider';
@@ -10,7 +11,7 @@ import SettingsItem from './SettingsItem';
 import { values } from 'modules/helpers/settings/modals';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
-export default class Header extends PureComponent {
+class Header extends PureComponent {
   render() {
     return (
       <>
@@ -89,3 +90,17 @@ export default 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,5 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import {
   Radio as RadioUI,
   RadioGroup,
@@ -11,7 +12,7 @@ import {
 import EventBus from 'modules/helpers/eventbus';
 import translations from 'modules/translations';
 
-export default class Radio extends PureComponent {
+class Radio extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -52,7 +53,7 @@ export default class Radio extends PureComponent {
       }
     }
 
-    EventBus.dispatch('refresh', this.props.category);
+    EventBus.emit('refresh', this.props.category);
   };
 
   render() {
@@ -83,3 +84,20 @@ export default 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,4 +1,5 @@
 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';
@@ -45,4 +46,8 @@ function ResetModal({ modalClose }) {
   );
 }
 
+ResetModal.propTypes = {
+  modalClose: PropTypes.func.isRequired,
+};
+
 export default memo(ResetModal);

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

@@ -1,15 +1,23 @@
 import { memo } from 'react';
+import PropTypes from 'prop-types';
 
-function SettingsItem(props) {
+function SettingsItem({ final, title, subtitle, children }) {
   return (
-    <div className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
+    <div className={final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
       <div className="content">
-        <span className="title">{props.title}</span>
-        <span className="subtitle">{props.subtitle}</span>
+        <span className="title">{title}</span>
+        <span className="subtitle">{subtitle}</span>
       </div>
-      <div className="action">{props.children}</div>
+      <div className="action">{children}</div>
     </div>
   );
 }
 
+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,12 +1,13 @@
 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';
 
 import EventBus from 'modules/helpers/eventbus';
 
-export default class SliderComponent extends PureComponent {
+class SliderComponent extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -46,7 +47,7 @@ export default class SliderComponent extends PureComponent {
       }
     }
 
-    EventBus.dispatch('refresh', this.props.category);
+    EventBus.emit('refresh', this.props.category);
   };
 
   resetItem = () => {
@@ -84,3 +85,17 @@ export default 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,10 +1,11 @@
 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';
 
-export default class Switch extends PureComponent {
+class Switch extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -32,7 +33,7 @@ export default class Switch extends PureComponent {
       }
     }
 
-    EventBus.dispatch('refresh', this.props.category);
+    EventBus.emit('refresh', this.props.category);
   };
 
   render() {
@@ -52,3 +53,13 @@ export default 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,11 +1,12 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { TextField } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
 
-export default class Text extends PureComponent {
+class Text extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -33,7 +34,7 @@ export default class Text extends PureComponent {
       }
     }
 
-    EventBus.dispatch('refresh', this.props.category);
+    EventBus.emit('refresh', this.props.category);
   };
 
   resetItem = () => {
@@ -77,3 +78,16 @@ export default 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/Experimental.jsx

@@ -51,7 +51,7 @@ function ExperimentalSettings() {
           varient="outlined"
           InputLabelProps={{ shrink: true }}
         />
-        <button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>
+        <button className="uploadbg" onClick={() => EventBus.emit(eventType, eventName)}>
           Send
         </button>
       </SettingsItem>

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

@@ -23,7 +23,7 @@ export default class Message extends PureComponent {
       messages: [],
     });
     toast(variables.getMessage(this.languagecode, 'toasts.reset'));
-    EventBus.dispatch('refresh', 'message');
+    EventBus.emit('refresh', 'message');
   };
 
   modifyMessage(type, index) {

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

@@ -124,7 +124,7 @@ export default class OrderSettings extends PureComponent {
   componentDidUpdate() {
     localStorage.setItem('order', JSON.stringify(this.state.items));
     variables.stats.postEvent('setting', 'Widget order');
-    EventBus.dispatch('refresh', 'widgets');
+    EventBus.emit('refresh', 'widgets');
   }
 
   componentDidMount() {

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

@@ -46,7 +46,7 @@ export default class QuoteSettings extends PureComponent {
       ],
     });
     toast(variables.getMessage('toasts.reset'));
-    EventBus.dispatch('refresh', 'background');
+    EventBus.emit('refresh', 'background');
   };
 
   customQuote(e, text, index, type) {

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

@@ -47,7 +47,7 @@ export default class SearchSettings extends PureComponent {
       localStorage.setItem('customSearchEngine', this.state.customValue);
     }
 
-    EventBus.dispatch('refresh', 'search');
+    EventBus.emit('refresh', 'search');
   }
 
   setSearchEngine(input) {
@@ -64,7 +64,7 @@ export default class SearchSettings extends PureComponent {
       localStorage.setItem('searchEngine', input);
     }
 
-    EventBus.dispatch('refresh', 'search');
+    EventBus.emit('refresh', 'search');
   }
 
   render() {

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

@@ -40,7 +40,7 @@ export default class CustomSettings extends PureComponent {
       customBackground: [],
     });
     toast(variables.getMessage('toasts.reset'));
-    EventBus.dispatch('refresh', 'background');
+    EventBus.emit('refresh', 'background');
   };
 
   customBackground(e, text, index) {

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

@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { useState, memo } from 'react';
-import { MdAdd, MdClose, MdOutlineAddLink } from 'react-icons/md';
+import PropTypes from 'prop-types';
+import { MdClose, MdOutlineAddLink } from 'react-icons/md';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
@@ -20,14 +21,14 @@ function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
           </div>
         </Tooltip>
       </div>
-        <input
-          type="text"
-          value={url}
-          onChange={(e) => setURL(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
-          varient="outlined"
-        />
-        <span className="dropdown-error">{urlError}</span>
-        <div className="resetFooter">
+      <input
+        type="text"
+        value={url}
+        onChange={(e) => setURL(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
+        varient="outlined"
+      />
+      <span className="dropdown-error">{urlError}</span>
+      <div className="resetFooter">
         <button className="textButton" onClick={modalCloseOnly}>
           <MdClose />
           {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
@@ -37,8 +38,14 @@ function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
           {variables.getMessage('modals.main.settings.sections.background.source.add_url')}
         </button>
       </div>
-      </div>
+    </div>
   );
 }
 
+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,6 +1,7 @@
 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';
@@ -69,4 +70,14 @@ 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);