style: make comments consistent by placing them on their own line

src/components/modals/marketplace/Item.jsx

@@ -4,7 +4,8 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 export default function Item(props) {
   let warningHTML;
-  try { // For some reason it breaks sometimes so we use try/catch
+  // For some reason it breaks sometimes so we use try/catch
+  try {
     if (props.content.content.data.quote_api) {
       warningHTML = (
         <div className='productInformation'>
@@ -19,7 +20,8 @@ export default function Item(props) {
     // ignore
   }
 
-  let iconsrc = 'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon; // prevent console error
+  // prevent console error
+  let iconsrc = 'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon;
   if (!props.data.icon) {
     iconsrc = null;
   }

src/components/modals/marketplace/Items.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
 export default function Items(props) {
+  // todo: add message here
   if (props.items.length === 0) {
-    return null; // todo: add message here
+    return null;
   }
 
   return (

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

@@ -42,14 +42,15 @@ export default class Marketplace extends React.PureComponent {
   async toggle(type, data) {
     switch (type) {
       case 'item':
-        let info; // get item info
+        let info;
+      // get item info
         try {
           info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
         } catch (e) {
           return toast(this.props.toastLanguage.error);
         }
 
-            // check if already installed
+        // check if already installed
         let button = this.buttons.install;
 
         const installed = JSON.parse(localStorage.getItem('installed'));

src/components/modals/settings/FileUpload.jsx

@@ -10,7 +10,8 @@ export default class FileUpload extends React.PureComponent {
 
       if (this.props.type === 'settings') {
         reader.readAsText(file, 'UTF-8');
-      } else { // background upload
+      } else {
+        // background upload
         if (file.size > 2000000) {
           return toast('File is over 2MB');
         }

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

@@ -25,8 +25,9 @@ export default class About extends React.PureComponent {
       updateMsg = 'Update available: ' + version;
     }
 
+    // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK,
     this.setState({
-      contributors: contributors, // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK,
+      contributors: contributors,
       update: updateMsg
     });
   }
@@ -51,7 +52,8 @@ export default class About extends React.PureComponent {
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
           </Tooltip>
         )}
-        {other_contributors.map((item) => // for those who contributed without opening a pull request
+        {// for those who contributed without opening a pull request
+        other_contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
           </Tooltip>

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

@@ -23,8 +23,9 @@ export default class GreetingSettings extends React.PureComponent {
   }
 
   changeDate(data) {
+    //soon
     if (data === 'reset') {
-      return; //soon
+      return;
     }
 
     localStorage.setItem('birthday', data);

src/components/widgets/background/Background.jsx

@@ -16,7 +16,8 @@ export default class Background extends React.PureComponent {
     return style;
   }
 
-  setBackground(url, colour, credit) { // Sets the attributes of the background image
+  // Sets the attributes of the background image
+  setBackground(url, colour, credit) {
     let gradientSettings = '';
     try {
       gradientSettings = JSON.parse(colour);
@@ -42,8 +43,9 @@ export default class Background extends React.PureComponent {
       `${background}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
     );
 
+    // Hide the credit
     if (credit === 'false' && document.querySelector('#credits')) {
-      document.querySelector('#credits').style.display = 'none'; // Hide the credit
+      document.querySelector('#credits').style.display = 'none';
     }
   }
 
@@ -58,22 +60,27 @@ export default class Background extends React.PureComponent {
     document.getElementById('photographerCard').textContent = credit;
   }
 
-  doOffline() { // Handles setting the background if the user is offline
+  // Handles setting the background if the user is offline
+  doOffline() {
     const offlineImages = require('./offline_images.json');
 
-    const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json
-    const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys
+    // Get all photographers from the keys in offlineImages.json
+    const photographers = Object.keys(offlineImages);
+    // Select a random photographer from the keys
+    const photographer = photographers[Math.floor(Math.random() * photographers.length)];
 
+    // Select a random image
     const randomImage = offlineImages[photographer].photo[
       Math.floor(Math.random() * offlineImages[photographer].photo.length)
-    ]; // Select a random image
+    ];
 
     const url = `./offline-images/${randomImage}.jpg`;
 
     this.setBackground(url);
     this.setCredit(photographer);
 
-    //document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon
+    // Hide the location icon
+    //document.querySelector('#backgroundCredits').style.display = 'none';
   }
 
   async determineMode() {
@@ -113,30 +120,37 @@ export default class Background extends React.PureComponent {
           <source src='${customBackground}'/>
         </video>`;
       } else {
-        this.setBackground(customBackground, null, 'false'); // Local
+        // Local
+        this.setBackground(customBackground, null, 'false');
       }
-    } else { // Online
+    // Online
+    } else {
       if (offlineMode === 'true') {
         return this.doOffline();
       }
 
-      try { // First we try and get an image from the API...
+      // First we try and get an image from the API...
+      try {
         let requestURL;
 
         switch (localStorage.getItem('backgroundAPI')) {
           case 'unsplash':
             requestURL = `${Constants.UNSPLASH_URL}/getImage`;
             break;
-          default: // Defaults to Mue
+          // Defaults to Mue
+          default:
             requestURL = `${Constants.API_URL}/getImage?category=Outdoors`;
             break;
         }
 
-        const data = await (await fetch(requestURL)).json(); // Fetch JSON data from requestURL
+        // Fetch JSON data from requestURL
+        const data = await (await fetch(requestURL)).json();
 
+        // If we hit the rate limit, fallback to local images
         if (data.statusCode === 429) {
-          this.doOffline(); // If we hit the rate limit, fallback to local images
-        } else { // Otherwise, set the background and credit from remote data
+          this.doOffline();
+        // Otherwise, set the background and credit from remote data
+        } else {
           this.setBackground(data.file);
 
           if (localStorage.getItem('backgroundAPI') === 'unsplash') {
@@ -152,16 +166,19 @@ export default class Background extends React.PureComponent {
           return document.querySelector('#backgroundCredits').style.display = 'none';
         }
 
-        document.getElementById('location').innerText = `${data.location.replace('null', '')}`; // Set the location tooltip
-      } catch (e) { // ..and if that fails we load one locally
+        // Set the location tooltip
+        document.getElementById('location').innerText = `${data.location.replace('null', '')}`;
+      // ..and if that fails we load one locally
+      } catch (e) {
         this.doOffline();
       }
     }
   }
 
   componentDidMount() {
+    // Hide the credit
     if (localStorage.getItem('background') === 'false') {
-      return document.querySelector('.photoInformation').style.display = 'none'; // Hide the credit
+      return document.querySelector('.photoInformation').style.display = 'none';
     }
 
     if (localStorage.getItem('customBackgroundColour') !== 'Disabled') {

src/components/widgets/background/Maximise.jsx

@@ -18,7 +18,8 @@ export default class View extends React.PureComponent {
   }
 
   viewStuff() {
-    const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; // elements to hide
+    // elements to hide
+    const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
 
     elements.forEach((element) => {
       try {

src/components/widgets/greeting/Greeting.jsx

@@ -19,12 +19,15 @@ export default class Greeting extends React.PureComponent {
     const month = time.getMonth();
     const date = time.getDate();
 
+    // If it's December 25th, set the greeting string to "Merry Christmas"
     if (month === 11 && date === 25) {
-      message = this.props.language.christmas;  // If it's December 25th, set the greeting string to "Merry Christmas"
+      message = this.props.language.christmas;
+    // If the date is January 1st, set the greeting string to "Happy new year"
     } else if (month === 0 && date === 1) {
-      message = this.props.language.newyear; // If the date is January 1st, set the greeting string to "Happy new year"
+      message = this.props.language.newyear;
+    // If it's October 31st, set the greeting string to "Happy Halloween"
     } else if (month === 9 && date === 31) {
-      message = this.props.language.halloween; // If it's October 31st, set the greeting string to "Happy Halloween"
+      message = this.props.language.halloween;
     }
 
     return message;
@@ -34,11 +37,14 @@ export default class Greeting extends React.PureComponent {
     const now = new Date();
     const hour = now.getHours();
 
-    let message = this.props.language.evening; // Set the default greeting string to "Good evening"
+    // Set the default greeting string to "Good evening"
+    let message = this.props.language.evening;
+    // If it's before 12am, set the greeting string to "Good morning"
     if (hour < 12) {
-      message = this.props.language.morning; // If it's before 12am, set the greeting string to "Good morning"
+      message = this.props.language.morning;
+    // If it's before 6pm, set the greeting string to "Good afternoon"
     } else if (hour < 18) {
-      message = this.props.language.afternoon; // If it's before 6pm, set the greeting string to "Good afternoon"
+      message = this.props.language.afternoon;
     }
 
     // Events

src/components/widgets/navbar/Navbar.jsx

@@ -11,7 +11,8 @@ import * as Constants from '../../../modules/constants';
 
 import './scss/index.scss';
 
-const Notes = React.lazy(() => import('./Notes')); // the user probably won't use the notes feature every time so we lazy load
+// the user probably won't use the notes feature every time so we lazy load
+const Notes = React.lazy(() => import('./Notes'));
 const renderLoader = () => <div></div>;
 
 export default class Navbar extends React.PureComponent {

src/components/widgets/quote/Quote.jsx

@@ -26,12 +26,13 @@ export default class Quote extends React.PureComponent {
 
   doOffline() {
     const quotes = require('./offline_quotes.json');
-
-    const quote = quotes[Math.floor(Math.random() * quotes.length)]; // Get a random quote from our local package
+    // Get a random quote from our local package
+    const quote = quotes[Math.floor(Math.random() * quotes.length)];
+    // Set the quote
     this.setState({
       quote: '"' + quote.quote + '"',
       author: quote.author
-    }); // Set the quote
+    });
   }
 
   getQuotePack() {
@@ -80,11 +81,13 @@ export default class Quote extends React.PureComponent {
       return this.doOffline();
     }
 
-    try { // First we try and get a quote from the API...
+    // First we try and get a quote from the API...
+    try {
       const data = await (await fetch(Constants.API_URL + '/getQuote?language=' + localStorage.getItem('quotelanguage'))).json();
 
+      // If we hit the ratelimit, we fallback to local quotes
       if (data.statusCode === 429) {
-        return this.doOffline(); // If we hit the ratelimit, we fallback to local quotes
+        return this.doOffline();
       }
 
       this.setState({
@@ -92,7 +95,8 @@ export default class Quote extends React.PureComponent {
         author: data.author,
         authorlink: `https://${this.props.languagecode}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`
       });
-    } catch (e) { // ..and if that fails we load one locally
+    } catch (e) {
+      // ..and if that fails we load one locally
       this.doOffline();
     }
   }
@@ -121,8 +125,9 @@ export default class Quote extends React.PureComponent {
   }
 
   componentDidMount() {
+    // todo: fix (localStorage.getItem('favouriteQuoteEnabled') === 'false')
     this.setState({
-      favourited: localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={() => this.favourite()} /> : null, // todo: fix (localStorage.getItem('favouriteQuoteEnabled') === 'false')
+      favourited: localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={() => this.favourite()} /> : null,
       copy: (localStorage.getItem('copyButton') === 'false') ? null : this.state.copy,
       tweet: (localStorage.getItem('tweetButton') === 'false') ? null: this.state.tweet
     });

src/components/widgets/time/Clock.jsx

@@ -28,7 +28,8 @@ export default class Clock extends React.PureComponent {
 
       // Analog clock
       if (localStorage.getItem('analog') === 'true') {
-        require('react-clock/dist/Clock.css'); // load analog clock css
+        // load analog clock css
+        require('react-clock/dist/Clock.css');
 
         this.setState({
           time: now

src/components/widgets/time/Date.jsx

@@ -32,8 +32,9 @@ export default class DateWidget extends React.PureComponent {
           day = dateYear;
           year = dateDay;
           break;
+        // DMY
         default:
-          break; // DMY
+          break;
       }
 
       let format;

src/index.js

@@ -4,7 +4,8 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 import './scss/index.scss';
-import 'react-toastify/dist/ReactToastify.css'; // the toast css is based on default so we need to import it
+// the toast css is based on default so we need to import it
+import 'react-toastify/dist/ReactToastify.css';
 
 import '@fontsource/lexend-deca/latin-400.css';
 import '@fontsource/roboto/cyrillic-400.css';

src/modules/helpers/marketplace.js

@@ -1,7 +1,8 @@
 import { toast } from 'react-toastify';
 
 export default class MarketplaceFunctions {
-  static urlParser (input) { // based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
+  // based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
+  static urlParser (input) {
     const urlPattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/;
     return input.replace(urlPattern, '<a href="$&" target="_blank">$&</a>');
   }

src/modules/helpers/settings.js

@@ -72,7 +72,7 @@ export default class SettingsFunctions {
       localStorage.setItem('showWelcome', false);
     }
 
-      // Finally we set this to true so it doesn't run the function on every load
+    // Finally we set this to true so it doesn't run the function on every load
     localStorage.setItem('firstRun', true);
     window.location.reload();
   }
@@ -106,7 +106,8 @@ export default class SettingsFunctions {
     }
 
     const zoom = localStorage.getItem('zoom');
-    if (zoom !== 100) { // don't bother if it's default zoom
+    // don't bother if it's default zoom
+    if (zoom !== 100) {
       document.body.style.zoom = zoom + '%';
     }
   }

src/scss/_mixins.scss

@@ -1,4 +1,4 @@
-// source: https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
+// Source https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
 @mixin animation($animate...) {
   $max: length($animate);
   $animations: '';

src/scss/react-color-picker-gradient-picker-custom-styles.scss

@@ -1,6 +1,7 @@
 // The following CSS is to work around some assumptions made by the react-color-gradient-picker
 * {
-  box-sizing: inherit; // Required to work around https://github.com/arthay/react-color-gradient-picker/issues/11
+// workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
+  box-sizing: inherit;
 }
 
 div.picker-area > div.preview > div.color-hue-alpha > div.alpha,