refactor: codacy and some style changes etc

2026-06-12 11:38:53 +02:00 · 2021-08-27 19:42:40 +01:00
parent abe70617d8
commit fcff3e44a6
21 changed files with 110 additions and 76 deletions
--- 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>
    );
  }
--- 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;
  }
--- 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
    });
  
--- 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}`);
--- 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)
    });

--- 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) {
--- 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
    });
--- 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
--- 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>
--- 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;
--- 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);
--- 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;
  }
--- 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 })} />
--- 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'
    });
--- 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'
            });
          }
--- 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,
--- 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'; 
--- 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}`
  };
-};
+}
--- 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) {
--- 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]);
  });
-};
+}
--- 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');
-};
+}