fix: more translation support for settings and feedback

src/components/modals/ErrorBoundary.jsx

@@ -6,6 +6,7 @@ export default class ErrorBoundary extends React.PureComponent {
     this.state = {
       error: false
     };
+    this.language = window.language.modals.main.error_boundary;
   }
 
   static getDerivedStateFromError(error) {
@@ -19,9 +20,9 @@ export default class ErrorBoundary extends React.PureComponent {
     if (this.state.error) {
       return (
         <div style={{'textAlign': 'center'}}>
-          <h1>Error</h1>
-          <p>Failed to load this component of Mue.</p>
-          <button className='refresh' onClick={() => window.location.reload()}>Refresh</button>
+          <h1>{this.language.title}</h1>
+          <p>{this.language.message}</p>
+          <button className='refresh' onClick={() => window.location.reload()}>{this.language.refresh}</button>
         </div>
       );
     }

src/components/modals/feedback/Feedback.jsx

@@ -12,17 +12,18 @@ export default class FeedbackModal extends React.PureComponent {
       questionfourerror: '',
       formsubmit: ''
     };
+    this.language = window.language.modals.feedback;
   }
 
   async submitForm () {
     let questiontwoerror, questionfourerror;
 
     if (document.getElementById('questiontwo').value.length <= 0) {
-      questiontwoerror = 'Question box must be filled';
+      questiontwoerror = this.language.not_filled;
     }
 
     if (document.getElementById('questionfour').value.length <= 0) {
-      questionfourerror = 'Question box must be filled';
+      questionfourerror = this.language.not_filled;
     }
 
     if (questiontwoerror || questionfourerror) {
@@ -41,7 +42,7 @@ export default class FeedbackModal extends React.PureComponent {
       });
 
       this.setState({
-        formsubmit: 'Sent successfully!'
+        formsubmit: this.language.success
       });
 
       setTimeout(() => {
@@ -51,16 +52,14 @@ export default class FeedbackModal extends React.PureComponent {
   }
 
   render() {
-    const { feedback } = window.language.modals;
-
     return (
       <div className='feedback'>
-        <h1>{feedback.title}</h1>
+        <h1>{this.language.title}</h1>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <>
           <input type='hidden' name='version' value={window.constants.VERSION} />
           <>
-            <label>{feedback.question_one}</label>
+            <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 })}/>
@@ -68,12 +67,12 @@ export default class FeedbackModal extends React.PureComponent {
           </>
           <br/><br/>
           <>
-            <label>{feedback.question_two}</label>
+            <label>{this.language.question_two}</label>
             <textarea name='question2' id='questiontwo'/>
             <p className='feedbackerror'>{this.state.questiontwoerror}</p>
           </>
           <>
-            <label>{feedback.question_three}</label>
+            <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 })}/>
@@ -81,12 +80,12 @@ export default class FeedbackModal extends React.PureComponent {
           </>
           <br/><br/>
           <>
-            <label>{feedback.question_four}</label>
+            <label>{this.language.question_four}</label>
             <textarea name='question4' id='questionfour'/>
             <p className='feedbackerror'>{this.state.questionfourerror}</p>
           </>
           {this.state.formsubmit}
-          <button onClick={() => this.submitForm()}>{feedback.submit}</button>
+          <button onClick={() => this.submitForm()}>{this.language.submit}</button>
         </>
       </div>
     );

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

@@ -9,7 +9,7 @@ export default class Dropdown extends React.PureComponent {
     };
   }
 
-  getLabel() {
+  getLabel = () => {
     return this.props.label ? <label>{this.props.label}</label> : null;
   }
 
@@ -39,7 +39,7 @@ export default class Dropdown extends React.PureComponent {
   render() {
     return (
       <>
-        {this.getLabel()}
+        {this.getLabel}
         <select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{width: `${(8*this.state.title.length) + 50}px`}}>
           {this.props.children}
         </select>

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

@@ -13,7 +13,7 @@ export default class FileUpload extends React.PureComponent {
       } else {
         // background upload
         if (file.size > 2000000) {
-          return toast('File is over 2MB');
+          return toast(window.language.modals.main.file_upload_error);
         }
 
         reader.readAsDataURL(file);

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

@@ -34,7 +34,7 @@ export default class TimeSettings extends React.PureComponent {
     const digitalSettings = (
       <>
         <h3>{time.digital.title}</h3>
-        <Radio title='Format' name='timeformat' options={digitalOptions} />
+        <Radio title={time.format} name='timeformat' options={digitalOptions} />
         <br/>
         <Checkbox name='seconds' text={time.digital.seconds} />
         <Checkbox name='zero' text={time.digital.zero} />
@@ -94,7 +94,7 @@ export default class TimeSettings extends React.PureComponent {
       <>
         <h2>{time.title}</h2>
         <Switch name='time' text={this.language.enabled} />
-        <Dropdown label='Type' name='timeType' onChange={(value) => this.setState({ timeType: value })}>
+        <Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })}>
           <option value='digital'>{time.digital.title}</option>
           <option value='analogue'>{time.analogue.title}</option>
           <option value='percentageComplete'>{time.percentage_complete}</option>
@@ -103,7 +103,7 @@ export default class TimeSettings extends React.PureComponent {
 
         <h3>{time.date.title}</h3>
         <Switch name='date' text={this.language.enabled} />
-        <Dropdown label='Type' name='dateType' onChange={(value) => this.setState({ dateType: value })}>
+        <Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })}>
           <option value='long'>{time.date.type.long}</option>
           <option value='short'>{time.date.type.short}</option>
         </Dropdown>

src/modules/constants.js

@@ -1,6 +1,6 @@
 export const API_URL = 'https://api.muetab.com';
 export const UNSPLASH_URL = 'https://unsplash.muetab.com';
-export const MARKETPLACE_URL = 'http://127.0.0.1:8080';
+export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const WEBSITE_URL = 'https://muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';

src/translations/en_GB.json

@@ -30,16 +30,24 @@
     "main": {
       "title": "Options",
       "loading": "Loading...",
+      "file_upload_error": "File is over 2MB",
       "navbar": {
         "settings": "Settings",
         "addons": "My Add-ons",
         "marketplace": "Marketplace"
       },
+      "error_boundary": {
+        "title": "Error",
+        "message": "Failed to load this component of Mue",
+        "refresh": "Refresh"
+      },
       "settings": {
         "enabled": "Enabled",
         "sections": {
           "time": {
             "title": "Time",
+            "format": "Format",
+            "type": "Type",
             "digital": {
               "title": "Digital",
               "seconds": "Seconds",
@@ -302,6 +310,8 @@
       "question_two": "What bugs did you encounter in your use of Mue?",
       "question_three": "How likely would you be to recommend this version of Mue to a friend or colleague?",
       "question_four": "What do you want adding to the next Mue build?",
+      "not_filled": "Question box must be filled",
+      "success": "Sent successfully!",
       "submit": "Submit"
     }
   },