fix: search dropdown select, cleanup functional components

src/components/modals/main/Main.jsx

@@ -22,12 +22,12 @@ const renderLoader = () => (
   </Tabs>
 );
 
-export default function MainModal(props) {
+export default function MainModal({ modalClose }) {
   const language = window.language.modals.main.navbar;
 
   return (
     <>
-      <span className='closeModal' onClick={props.modalClose}>&times;</span>
+      <span className='closeModal' onClick={modalClose}>&times;</span>
       <Tabs navbar={true}>
         <div label={language.settings} name='settings'>
           <Suspense fallback={renderLoader()}>

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

@@ -1,8 +1,8 @@
-export default function Items(props) {
+export default function Items({ items, toggleFunction }) {
   return (
     <div className='items'>
-      {props.items.map((item) => (
-        <div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
+      {items.map((item) => (
+        <div className='item' onClick={() => toggleFunction(item.name)} key={item.name}>
           <img alt='icon' draggable='false' src={window.constants.DDG_IMAGE_PROXY + item.icon_url} />
           <div className='details'>
             <h4>{item.display_name || item.name}</h4>

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

@@ -1,10 +1,10 @@
-export default function Lightbox(props) {
+export default function Lightbox({ modalClose, img }) {
   window.stats.postEvent('modal', 'Opened lightbox');
 
   return (
     <>
-      <span className='closeModal' onClick={props.modalClose}>&times;</span>
-      <img src={props.img} className='lightboximg' draggable={false} alt='Item screenshot'/>
+      <span className='closeModal' onClick={modalClose}>&times;</span>
+      <img src={img} className='lightboximg' draggable={false} alt='Item screenshot'/>
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 import { Close, Delete } from '@material-ui/icons';
 import { setDefaultSettings } from 'modules/helpers/settings';
 
-export default function ResetModal(props) {
+export default function ResetModal({ modalClose }) {
   const language = window.language.modals.main.settings.sections.advanced.reset_modal;
 
   const reset = () => {
@@ -20,7 +20,7 @@ export default function ResetModal(props) {
         <button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
           <Delete/>
         </button>
-        <button className='round import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>
+        <button className='round import' style={{ marginLeft: '5px' }} onClick={modalClose}>
           <Close/>
         </button>
       </div>

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

@@ -25,10 +25,8 @@ export default class About extends PureComponent {
 
     try {
       versionData = await (await fetch(window.constants.GITHUB_URL + '/repos/' + window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/releases', { signal: this.controller.signal })).json();
-
       contributors = await (await fetch(window.constants.GITHUB_URL + '/repos/'+ window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/contributors', { signal: this.controller.signal })).json();
       sponsors = (await (await fetch(window.constants.SPONSORS_URL + '/list', { signal: this.controller.signal })).json()).sponsors;
-
       photographers = await (await fetch(window.constants.API_URL + '/images/photographers', { signal: this.controller.signal })).json();
     } catch (e) {
       if (this.controller.signal.aborted === true) {

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

@@ -24,15 +24,15 @@ import {
   KeyboardAltOutlined as Keybinds
 } from '@material-ui/icons';
 
-function Tab(props) {
+function Tab({ currentTab, label, navbarTab, onClick }) {
   let className = 'tab-list-item';
-  if (props.currentTab === props.label) {
+  if (currentTab === label) {
     className += ' tab-list-active';
   }
 
-  if (props.navbar === true) {
+  if (navbarTab === true) {
     className = 'navbar-item';
-    if (props.currentTab === props.label) {
+    if (currentTab === label) {
       className += ' navbar-item-active';
     }
   }
@@ -41,7 +41,7 @@ function Tab(props) {
   const { navbar, marketplace, addons } = window.language.modals.main;
 
   let icon, divider;
-  switch (props.label) {
+  switch (label) {
     case navbar.settings: icon = <Settings/>; break;
     case navbar.addons: icon = <Addons/>; break;
     case navbar.marketplace: icon = <Marketplace/>; break;
@@ -74,7 +74,7 @@ function Tab(props) {
     default: break;
   }
 
-  if (props.label === settings.experimental.title) {
+  if (label === settings.experimental.title) {
     if (localStorage.getItem('experimental') === 'false') {
       return <hr/>;
     }
@@ -82,8 +82,8 @@ function Tab(props) {
 
   return (
     <>
-      <li className={className} onClick={() => props.onClick(props.label)}>
-      {icon} <span>{props.label}</span>
+      <li className={className} onClick={() => onClick(label)}>
+      {icon} <span>{label}</span>
       </li>
       {(divider === true) ? <hr/> : null}
     </>

src/components/modals/welcome/ProgressBar.jsx

@@ -1,15 +1,15 @@
-export default function ProgressBar(props) {
+export default function ProgressBar({ count, currentTab, switchTab }) {
   return (
     <div className='progressbar'>
-      {props.count.map((num) => {
+      {count.map((num) => {
         let className = 'step';
 
-        const index = props.count.indexOf(num);
-        if (index === props.currentTab) {
+        const index = count.indexOf(num);
+        if (index === currentTab) {
           className = 'step active';
         }
 
-        return <div className={className} key={index} onClick={() => props.switchTab(index)}></div>;
+        return <div className={className} key={index} onClick={() => switchTab(index)}></div>;
       })}
     </div>
   );