From 670f897a80e7587afb14e6b30f368236960e06be Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Tue, 6 Apr 2021 22:34:47 +0100
Subject: [PATCH] fix: more translation support for settings and feedback

---
 package.json                                  | 14 ++++++-------
 src/components/modals/ErrorBoundary.jsx       |  7 ++++---
 src/components/modals/feedback/Feedback.jsx   | 21 +++++++++----------
 .../modals/main/settings/Dropdown.jsx         |  4 ++--
 .../modals/main/settings/FileUpload.jsx       |  2 +-
 .../modals/main/settings/sections/Time.jsx    |  6 +++---
 src/modules/constants.js                      |  2 +-
 src/translations/en_GB.json                   | 10 +++++++++
 8 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 8a116153..3a0974a1 100644
--- a/package.json
+++ b/package.json
@@ -18,13 +18,13 @@
     "@material-ui/icons": "4.11.2",
     "array-move": "^3.0.1",
     "react": "17.0.2",
-    "react-clock": "^3.0.0",
-    "react-color-gradient-picker": "^0.1.2",
-    "react-day-picker": "^7.4.10",
-    "react-device-detect": "^1.17.0",
+    "react-clock": "3.0.0",
+    "react-color-gradient-picker": "0.1.2",
+    "react-day-picker": "7.4.10",
+    "react-device-detect": "1.17.0",
     "react-dom": "17.0.2",
     "react-modal": "3.12.1",
-    "react-sortable-hoc": "^2.0.0",
+    "react-sortable-hoc": "2.0.0",
     "react-toastify": "7.0.3"
   },
   "devDependencies": {
@@ -34,14 +34,14 @@
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
     "babel-loader": "^8.2.2",
-    "copy-webpack-plugin": "^8.1.0",
+    "copy-webpack-plugin": "^8.1.1",
     "css-loader": "^5.2.0",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^1.4.0",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^2.0.1",
-    "webpack": "^5.28.0",
+    "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   },
diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx
index f64d3566..0c5b9622 100644
--- a/src/components/modals/ErrorBoundary.jsx
+++ b/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>
       );
     }
diff --git a/src/components/modals/feedback/Feedback.jsx b/src/components/modals/feedback/Feedback.jsx
index fbbe3b9d..73b56590 100644
--- a/src/components/modals/feedback/Feedback.jsx
+++ b/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>
     );
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx
index 12eb0a58..194ea8f0 100644
--- a/src/components/modals/main/settings/Dropdown.jsx
+++ b/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>
diff --git a/src/components/modals/main/settings/FileUpload.jsx b/src/components/modals/main/settings/FileUpload.jsx
index 8134c21a..fe3b03c0 100644
--- a/src/components/modals/main/settings/FileUpload.jsx
+++ b/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);
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index 173029a9..433b6a9d 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/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>
diff --git a/src/modules/constants.js b/src/modules/constants.js
index 93677f96..463c1acd 100644
--- a/src/modules/constants.js
+++ b/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';
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index ac70ba12..c9d40ed7 100644
--- a/src/translations/en_GB.json
+++ b/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"
     }
   },