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>