fix: search dropdown select, cleanup functional components

src/components/helpers/tooltip/Tooltip.jsx

@@ -1,10 +1,10 @@
 import './tooltip.scss';
 
-export default function Tooltip(props) {
+export default function Tooltip({ children, title }) {
   return (
     <div className='tooltip'>
-      {props.children}
-      <span className='tooltipTitle'>{props.title}</span>
+      {children}
+      <span className='tooltipTitle'>{title}</span>
     </div>
   );
 }

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>
   );

src/components/widgets/background/PhotoInformation.jsx

@@ -21,30 +21,30 @@ const downloadImage = async (info) => {
   window.stats.postEvent('feature', 'Background download');
 };
 
-export default function PhotoInformation(props) {
+export default function PhotoInformation({ info, url, api }) {
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
 
   const language = window.language.widgets.background;
 
-  if (props.info.hidden === true || !props.info.credit) {
+  if (info.hidden === true || !info.credit) {
     return null;
   }
 
   // remove unsplash and pexels text
-  const photographer = props.info.credit.split(` ${language.unsplash}`)[0].split(` ${language.pexels}`);
+  const photographer = info.credit.split(` ${language.unsplash}`)[0].split(` ${language.pexels}`);
 
-  let credit = props.info.credit;
+  let credit = info.credit;
   let photo = language.credit;
 
   // unsplash and pexels credit
-  if (props.info.photographerURL && props.info.photographerURL !== '' && !props.info.offline && props.api) {
-    if (props.api === 'unsplash') {
-      photo = <a href={props.info.photoURL + '?utm_source=mue'} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
-      credit = <><a href={props.info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{language.unsplash}</a></>;
+  if (info.photographerURL && info.photographerURL !== '' && !info.offline && api) {
+    if (api === 'unsplash') {
+      photo = <a href={info.photoURL + '?utm_source=mue'} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
+      credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{language.unsplash}</a></>;
     } else {
-      photo = <a href={props.info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
-      credit = <><a href={props.info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://pexels.com' target='_blank' rel='noopener noreferrer'>{language.pexels}</a></>;
+      photo = <a href={info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
+      credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://pexels.com' target='_blank' rel='noopener noreferrer'>{language.pexels}</a></>;
     }
   }
 
@@ -54,7 +54,7 @@ export default function PhotoInformation(props) {
     setWidth(event.target.width);
     setHeight(event.target.height);
   };
-  img.src = (localStorage.getItem('ddgProxy') === 'true' && !props.info.offline && !props.url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + props.url : props.url;
+  img.src = (localStorage.getItem('ddgProxy') === 'true' && !info.offline && !url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + url : url;
 
   // info is still there because we want the favourite button to work
   if (localStorage.getItem('photoInformation') === 'false') {
@@ -62,18 +62,18 @@ export default function PhotoInformation(props) {
       <div className='photoInformation'>
         <h1>{photo} <span id='credit'>{credit}</span></h1>
         <div style={{ display: 'none' }}>
-          <span id='infoLocation'>{props.info.location || 'N/A'}</span>
-          <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
+          <span id='infoLocation'>{info.location || 'N/A'}</span>
+          <span id='infoCamera'>{info.camera || 'N/A'}</span>
           <span id='infoResolution'>{width}x{height}</span>
         </div>
       </div>
     );
   }
 
-  const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL;
+  const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !info.offline && !info.photographerURL;
   const downloadBackground = () => { 
     if (downloadEnabled) {
-      downloadImage(props.info);
+      downloadImage(info);
     }
   };
 
@@ -97,13 +97,13 @@ export default function PhotoInformation(props) {
         <h1>{language.information}</h1>
         <hr/>
         {/* fix console error by using fragment and key */}
-        {props.info.location && props.info.location !== 'N/A' ? <Fragment key='location'>
+        {info.location && info.location !== 'N/A' ? <Fragment key='location'>
           <LocationOn/>
-          <span id='infoLocation'>{props.info.location}</span>
+          <span id='infoLocation'>{info.location}</span>
         </Fragment> : null}
-        {props.info.camera && props.info.camera !== 'N/A' ? <Fragment key='camera'>
+        {info.camera && info.camera !== 'N/A' ? <Fragment key='camera'>
           <PhotoCamera/>
-          <span id='infoCamera'>{props.info.camera}</span>
+          <span id='infoCamera'>{info.camera}</span>
         </Fragment> : null}
         <Resolution/>
         <span id='infoResolution'>{width}x{height}</span>
@@ -112,7 +112,7 @@ export default function PhotoInformation(props) {
         {downloadEnabled ? 
           <>
             <Download/>
-            <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
+            <span className='download' onClick={() => downloadImage(info)}>{language.download}</span>
           </> 
         : null}
       </div>

src/components/widgets/search/search.scss

@@ -53,10 +53,7 @@
   display: inline-block;
   margin-top: 10px;
   font-size: calc(5px + 1.2vmin);
-
-  .searchSelected {
-    cursor: pointer;
-  }
+  user-select: none;
 
   .searchDropdownList {
     cursor: pointer;

src/components/widgets/weather/WeatherIcon.jsx

@@ -1,10 +1,10 @@
 import { WiDaySunny, WiNightClear, WiDayCloudy, WiNightCloudy, WiCloud, WiCloudy, WiDayShowers, WiNightShowers, WiRain, WiThunderstorm, WiSnow, WiFog } from 'weather-icons-react';
 
-export default function WeatherIcon(props) {
+export default function WeatherIcon({ name }) {
   let icon;
 
-  // props.name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
-  switch (props.name) {
+  // name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
+  switch (name) {
     case '01d': icon = <WiDaySunny/>; break;
     case '01n': icon = <WiNightClear/>; break;
     case '02d': icon = <WiDayCloudy/>; break;

src/components/widgets/weather/WindDirectionIcon.jsx

@@ -1,9 +1,8 @@
 import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirectionLeft, WiDirectionRight, WiDirectionUpLeft, WiDirectionUpRight, WiDirectionUp } from 'weather-icons-react';
 
-export default function WindDirectionIcon(props) {
+// degrees is imported because of a potential bug, idk what causes it but now it is fixed
+export default function WindDirectionIcon({ degrees }) {
   let icon;
-  // fix potential bug, idk what causes it but now it is fixed
-  let degrees = props.degrees;
 
   // convert the number openweathermap gives us to closest direction or something
   const directions = ['North', 'North-West', 'West', 'South-West', 'South', 'South-East', 'East', 'North-East'];