From fcff3e44a61cdb9b16c41a4c958069fa3feaa102 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Fri, 27 Aug 2021 19:42:40 +0100
Subject: [PATCH] refactor: codacy and some style changes etc

---
 src/components/modals/feedback/Feedback.jsx   | 86 +++++++++++--------
 src/components/modals/feedback/feedback.scss  |  4 +
 .../modals/main/settings/Dropdown.jsx         |  2 +-
 src/components/modals/main/settings/Radio.jsx |  2 +-
 .../modals/main/settings/Slider.jsx           |  2 +-
 src/components/modals/main/settings/Text.jsx  |  2 +-
 .../modals/main/settings/sections/About.jsx   | 10 +--
 .../main/settings/sections/Changelog.jsx      |  2 +-
 src/components/modals/main/tabs/Settings.jsx  |  4 +-
 .../modals/main/tabs/backend/Tab.jsx          |  6 +-
 src/components/modals/welcome/welcome.scss    | 25 +++++-
 .../background/scss/_photoinformation.scss    |  2 +-
 .../widgets/quicklinks/QuickLinks.jsx         |  6 +-
 src/components/widgets/search/Search.jsx      | 16 ++--
 src/components/widgets/time/Clock.jsx         |  4 +-
 src/components/widgets/weather/Weather.jsx    |  2 +-
 src/modules/constants.js                      |  2 -
 src/modules/helpers/background/widget.js      |  3 +-
 src/modules/helpers/marketplace.js            |  2 +-
 src/modules/helpers/settings/index.js         |  2 +-
 src/modules/helpers/settings/modals.js        |  2 +-
 21 files changed, 110 insertions(+), 76 deletions(-)

diff --git a/src/components/modals/feedback/Feedback.jsx b/src/components/modals/feedback/Feedback.jsx
index 8c31208c..310c140b 100644
--- a/src/components/modals/feedback/Feedback.jsx
+++ b/src/components/modals/feedback/Feedback.jsx
@@ -6,35 +6,51 @@ export default class FeedbackModal extends PureComponent {
   constructor() {
     super();
     this.state = {
-      questionone: 5,
-      questionthree: 5,
-      questiontwoerror: '',
-      questionfourerror: '',
+      question_one: 5,
+      question_two: {
+        value: '',
+        error: ''
+      },
+      question_three: 5,
+      question_four: {
+        value: '',
+        error: ''
+      },
       formsubmit: ''
     };
     this.language = window.language.modals.feedback;
   }
 
-  async submitForm () {
-    let questiontwoerror, questionfourerror;
+  async submitForm(e) {
+    e.preventDefault();
 
-    if (document.getElementById('questiontwo').value.length <= 0) {
-      questiontwoerror = this.language.not_filled;
+    let question_two_error, question_four_error;
+
+    if (this.state.question_two.value.length <= 0) {
+      question_two_error = this.language.not_filled;
     }
 
-    if (document.getElementById('questionfour').value.length <= 0) {
-      questionfourerror = this.language.not_filled;
+    if (this.state.question_four.value.length <= 0) {
+      question_four_error = this.language.not_filled;
     }
 
-    if (questiontwoerror || questionfourerror) {
+    if (question_two_error || question_four_error) {
       this.setState({
-        questiontwoerror: questiontwoerror,
-        questionfourerror: questionfourerror
+        question_two: {
+          error: question_two_error
+        },
+        question_four: {
+          error: question_four_error
+        }
       });
     } else {
       this.setState({
-        questiontwoerror: '',
-        questionfourerror: ''
+        question_two: {
+          error: ''
+        },
+        question_four: {
+          error: ''
+        }
       });
 
       await fetch(window.constants.FEEDBACK_FORM, {
@@ -56,37 +72,35 @@ export default class FeedbackModal extends PureComponent {
       <div className='feedback'>
         <h1>{this.language.title}</h1>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <>
+        <form>
           <input type='hidden' name='version' value={window.constants.VERSION} />
-          <>
+          <div className='question'>
             <label>{this.language.question_one}</label>
             <br/><br/>
             <label className='values'>0</label>
-            <input className='range' type='range' min='0' max='10' name='question1' value={this.state.questionone} onChange={(e) => this.setState({ questionone: e.target.value })}/>
-            <label className='values'>10 ({this.state.questionone})</label>
-          </>
-          <br/><br/>
-          <>
+            <input className='range' type='range' min='0' max='10' name='questionone' value={this.state.question_one} onChange={(e) => this.setState({ question_one: e.target.value })}/>
+            <label className='values'>10 ({this.state.question_one})</label>
+          </div>
+          <div className='question'>
             <label>{this.language.question_two}</label>
-            <textarea name='question2' id='questiontwo'/>
-            <p className='feedbackerror'>{this.state.questiontwoerror}</p>
-          </>
-          <>
+            <textarea name='questiontwo' onChange={(e) => this.setState({ question_two: { value: e.target.value }})}/>
+            <p className='feedbackerror'>{this.state.question_two.error}</p>
+          </div>
+          <div className='question'>
             <label>{this.language.question_three}</label>
             <br/><br/>
             <label className='values'>0</label>
-            <input className='range' type='range' min='0' max='10' name='question3' value={this.state.questionthree} onChange={(e) => this.setState({ questionthree: e.target.value })}/>
-            <label className='values'>10 ({this.state.questionthree})</label>
-          </>
-          <br/><br/>
-          <>
+            <input className='range' type='range' min='0' max='10' name='questionthree' value={this.state.question_three} onChange={(e) => this.setState({ question_three: e.target.value })}/>
+            <label className='values'>10 ({this.state.question_three})</label>
+          </div>
+          <div className='question'>
             <label>{this.language.question_four}</label>
-            <textarea name='question4' id='questionfour'/>
-            <p className='feedbackerror'>{this.state.questionfourerror}</p>
-          </>
+            <textarea name='questionfour' value={this.state.question_four.value} onChange={(e) => this.setState({ question_four: { value: e.target.value }})}/>
+            <p className='feedbackerror'>{this.state.question_four.error}</p>
+          </div>
           <p>{this.state.formsubmit}</p>
-          <button onClick={() => this.submitForm()}>{this.language.submit}</button>
-        </>
+          <button onClick={(e) => this.submitForm(e)}>{this.language.submit}</button>
+        </form>
       </div>
     );
   }
diff --git a/src/components/modals/feedback/feedback.scss b/src/components/modals/feedback/feedback.scss
index f7476ab1..31449e05 100644
--- a/src/components/modals/feedback/feedback.scss
+++ b/src/components/modals/feedback/feedback.scss
@@ -62,6 +62,10 @@
     background-color: var(--sidebar) !important;
   }
 
+  .question {
+    margin-bottom: 20px;
+  }
+
   .feedbackerror {
     color: red;
   }
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx
index caac0956..2b9eacaf 100644
--- a/src/components/modals/main/settings/Dropdown.jsx
+++ b/src/components/modals/main/settings/Dropdown.jsx
@@ -25,7 +25,7 @@ export default class Dropdown extends PureComponent {
     window.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
 
     this.setState({
-      value: value,
+      value,
       title: e.target[e.target.selectedIndex].text
     });
   
diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx
index 87e5894c..837e02eb 100644
--- a/src/components/modals/main/settings/Radio.jsx
+++ b/src/components/modals/main/settings/Radio.jsx
@@ -28,7 +28,7 @@ export default class Radio extends PureComponent {
     localStorage.setItem(this.props.name, value);
   
     this.setState({
-      value: value
+      value
     });
 
     window.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index f9073626..b92a0a2d 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -36,7 +36,7 @@ export default class Slider extends PureComponent {
   
     localStorage.setItem(this.props.name, value);
     this.setState({
-      value: value,
+      value,
       numberWidth: ((value.length + 1) * this.widthCalculation)
     });
 
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index 72d80f69..6e8f982f 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@@ -22,7 +22,7 @@ export default class Text extends PureComponent {
 
     localStorage.setItem(this.props.name, value);
     this.setState({
-      value: value
+      value
     });
 
     if (this.props.element) {
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 882f179c..76cf9c93 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -47,17 +47,17 @@ export default class About extends PureComponent {
 
     const newVersion = versionData[0].tag_name;
 
-    let updateMsg = this.language.version.no_update;
+    let update = this.language.version.no_update;
     if (Number(window.constants.VERSION.replaceAll('.', '')) < Number(newVersion.replaceAll('.', ''))) {
-      updateMsg = `${this.language.version.update_available}: ${newVersion}`;
+      update = `${this.language.version.update_available}: ${newVersion}`;
     }
 
     this.setState({
       // exclude bots
       contributors: contributors.filter((contributor) => !contributor.login.includes('bot')),
-      sponsors: sponsors,
-      update: updateMsg,
-      other_contributors: other_contributors,
+      sponsors,
+      update,
+      other_contributors,
       photographers: photographers.sort().join(', '), 
       loading: null
     });
diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx
index 808093e1..88320500 100644
--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -32,7 +32,7 @@ export default class Changelog extends PureComponent {
 
     this.setState({
       title: data.title,
-      date: date,
+      date,
       image: data.featured_image || null,
       author: 'By ' + data.authors.join(', '),
       html: data.html
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index 967e7a9d..747a5b1d 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -35,13 +35,13 @@ export default function Settings() {
         <div label={sections.order.title} name='order'><Order/></div>
         <div label={sections.language.title} name='language'><Language/></div>
         <div label={sections.advanced.title} name='advanced'><Advanced/></div>
-        <div label='Keybinds' name='keybinds'><Keybinds/></div>
+        <div label={sections.keybinds.title} name='keybinds'><Keybinds/></div>
         <div label={sections.stats.title} name='stats'><Stats/></div>
         <div label={sections.experimental.title} name='experimental'><Experimental/></div>
         <div label={sections.changelog} name='changelog'><Changelog/></div>
         <div label={sections.about.title} name='about'><About/></div>
       </Tabs>
-      <div className='reminder-info' style={{ display: display }}>
+      <div className='reminder-info' style={{ display }}>
         <h1>{reminder.title}</h1>
         <p>{reminder.message}</p>
         <button className='pinNote' onClick={() => window.location.reload()}>{window.language.modals.main.error_boundary.refresh}</button>
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 46cd1342..254962b6 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -42,12 +42,10 @@ function Tab(props) {
 
   let icon, divider;
   switch (props.label) {
-    // Navbar
     case navbar.settings: icon = <Settings/>; break;
     case navbar.addons: icon = <Addons/>; break;
     case navbar.marketplace: icon = <Marketplace/>; break;
 
-    // Settings
     case settings.time.title: icon = <Time/>; break;
     case settings.greeting.title: icon = <Greeting/>; break;
     case settings.quote.title: icon = <Quote/>; break;
@@ -59,18 +57,16 @@ function Tab(props) {
     case settings.order.title: icon = <Order/>; break;
     case settings.language.title: icon = <Language/>; divider = true; break;
     case settings.advanced.title: icon = <Advanced/>; break;
-    case 'Keybinds': icon = <Keybinds/>; break;
+    case settings.keybinds.title: icon = <Keybinds/>; break;
     case settings.stats.title: icon = <Stats/>; break;
     case settings.experimental.title: icon = <Experimental/>; divider = true; break;
     case settings.changelog: icon = <Changelog/>; break;
     case settings.about.title: icon = <About/>; break;
 
-    // Addons
     case addons.added: icon = <Added/>; break;
     case addons.sideload: icon = <Sideload/>; break;
     case addons.create.title: icon = <Create/>; break;
 
-    // Marketplace
     case marketplace.photo_packs: icon = <Background/>; break;
     case marketplace.quote_packs: icon = <Quote/>; break;
     case marketplace.preset_settings: icon = <Advanced/>; break;
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index 594d535a..b3b07f3d 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -77,7 +77,6 @@
   }
 }
 
-
 .themesToggleArea {
   .active {
     background: var(--tab-active) !important;
@@ -123,6 +122,30 @@
   }
 }
 
+.upload {
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  border: none;
+  outline: none;
+  padding: 50px;
+  background: var(--sidebar);
+  color: var(--modal-text);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--tab-active);
+  }
+
+  svg {
+    font-size: 4em;
+  }
+
+  span {
+    font-size: 2em;
+  }
+}
+
 a.privacy {
   text-decoration: none;
   color: var(--modal-text);
diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss
index 6749a35f..ca31462c 100644
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@@ -82,7 +82,7 @@
     border: none;
   }
 
-  &:hover, 
+  &:hover,
   span {
     display: block !important;
   }
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index d2b7464a..ff711d7d 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -53,8 +53,8 @@ export default class QuickLinks extends PureComponent {
 
     if (nameError || urlError) {
       return this.setState({
-        nameError: nameError,
-        urlError: urlError
+        nameError,
+        urlError
       });
     }
 
@@ -169,7 +169,7 @@ export default class QuickLinks extends PureComponent {
           quickLink(item)
         ))}
         <button className='quicklinks' onClick={this.toggleAdd}>+</button>
-        <span className='quicklinkscontainer' style={{ visibility: this.state.showAddLink, marginTop: marginTop }}>
+        <span className='quicklinkscontainer' style={{ visibility: this.state.showAddLink, marginTop }}>
           <div className='topbarquicklinks'>
             <h4>{this.language.new}</h4>
             <TextareaAutosize rowsmax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index 11051d74..3dc0f86b 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -108,12 +108,12 @@ export default class Search extends PureComponent {
     }
 
     this.setState({
-      url: url,
-      query: query,
-      autocompleteURL: autocompleteURL,
-      autocompleteQuery: autocompleteQuery,
-      autocompleteCallback: autocompleteCallback,
-      microphone: microphone,
+      url,
+      query,
+      autocompleteURL,
+      autocompleteQuery,
+      autocompleteCallback,
+      microphone,
       currentSearch: info.name
     });
   }
@@ -147,8 +147,8 @@ export default class Search extends PureComponent {
     }
 
     this.setState({
-      url: url,
-      query: query,
+      url,
+      query,
       currentSearch: name,
       searchDropdown: 'none'
     });
diff --git a/src/components/widgets/time/Clock.jsx b/src/components/widgets/time/Clock.jsx
index 9dc27fd6..7535dd76 100644
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -58,7 +58,7 @@ export default class Clock extends PureComponent {
             }
 
             this.setState({
-              time: time,
+              time,
               ampm: ''
             });
           } else {
@@ -78,7 +78,7 @@ export default class Clock extends PureComponent {
             }
 
             this.setState({
-              time: time,
+              time,
               ampm: now.getHours() > 11 ? 'PM' : 'AM'
             });
           }
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index 93477570..0fdbd212 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -93,7 +93,7 @@ export default class Weather extends PureComponent {
 
     this.setState({
       icon: data.weather[0].icon,
-      temp_text: temp_text,
+      temp_text,
       weather: {
         temp: Math.round(temp),
         description: data.weather[0].description,
diff --git a/src/modules/constants.js b/src/modules/constants.js
index 9d748dd5..88bb58b5 100644
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@@ -26,9 +26,7 @@ export const COPYRIGHT_YEAR = '2018';
 export const COPYRIGHT_LICENSE = 'BSD-3 License';
 export const DONATE_USERNAME = 'davidjcralph'; // this only works if you use the same username for Patreon, GitHub and Ko-Fi
 
-// Offline images
 export const OFFLINE_IMAGES = 20;
 
-// Version
 export const BETA_VERSION = false;
 export const VERSION = '5.3.3'; 
diff --git a/src/modules/helpers/background/widget.js b/src/modules/helpers/background/widget.js
index f84f5ea4..be544baa 100644
--- a/src/modules/helpers/background/widget.js
+++ b/src/modules/helpers/background/widget.js
@@ -23,7 +23,6 @@ export function offlineBackground() {
   };
 
   localStorage.setItem('currentBackground', JSON.stringify(object));
-
   return object;
 }
 
@@ -36,4 +35,4 @@ export function gradientStyleBuilder({ type, angle, gradient }) {
     type: 'colour',
     style: `background:${gradient[0]?.colour};${grad}`
   };
-};
+}
diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js
index 7a41675f..3fc87b71 100644
--- a/src/modules/helpers/marketplace.js
+++ b/src/modules/helpers/marketplace.js
@@ -40,7 +40,7 @@ export function uninstall(type, name) {
     }
   }
   localStorage.setItem('installed', JSON.stringify(installed));
-};
+}
 
 export function install(type, input, sideload) {
   switch (type) {
diff --git a/src/modules/helpers/settings/index.js b/src/modules/helpers/settings/index.js
index 1d9060b8..74dd3c50 100644
--- a/src/modules/helpers/settings/index.js
+++ b/src/modules/helpers/settings/index.js
@@ -165,4 +165,4 @@ export function moveSettings() {
   Object.keys(settings).forEach((key) => {
     localStorage.setItem(key, settings[key]);
   });
-};
+}
diff --git a/src/modules/helpers/settings/modals.js b/src/modules/helpers/settings/modals.js
index 3e5ffd38..4a7bbd48 100644
--- a/src/modules/helpers/settings/modals.js
+++ b/src/modules/helpers/settings/modals.js
@@ -36,4 +36,4 @@ export function importSettings(e) {
 
   toast(window.language.toasts.imported);
   window.stats.postEvent('tab', 'Settings imported');
-};
+}