From 04fb389d59ddf8775584fac2143416378a87936a Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Wed, 17 Mar 2021 22:01:07 +0000
Subject: [PATCH] fix: error boundary bugs and some translation issues with
 modal

---
 src/components/ErrorBoundary.jsx              |  8 +--
 .../modals/settings/sections/About.jsx        | 20 ++++----
 .../modals/settings/sections/Time.jsx         | 28 +++++------
 src/components/modals/tabs/Settings.jsx       |  2 +-
 src/scss/modules/modals/_main.scss            |  2 +-
 src/translations/en-GB.json                   | 50 +++++++++++--------
 src/translations/en-US.json                   |  5 ++
 7 files changed, 65 insertions(+), 50 deletions(-)

diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
index f3efcf82..4c5cac3c 100644
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -10,16 +10,18 @@ export default class ErrorBoundary extends React.PureComponent {
 
   static getDerivedStateFromError(error) {
     console.log(error);
-    return { error: true };
+    return { 
+      error: true 
+    };
   }
 
   render() {
     if (this.state.error) {
       return (
-        <div style={{'text-align': 'center'}}>
+        <div style={{'textAlign': 'center'}}>
           <h1>Error</h1>
           <p>Failed to load this component of Mue.</p>
-          <button class='refresh' onClick={() => window.location.reload()}>Refresh</button>
+          <button className='refresh' onClick={() => window.location.reload()}>Refresh</button>
         </div>
       )
     }
diff --git a/src/components/modals/settings/sections/About.jsx b/src/components/modals/settings/sections/About.jsx
index 7e5c40ad..40db0d49 100644
--- a/src/components/modals/settings/sections/About.jsx
+++ b/src/components/modals/settings/sections/About.jsx
@@ -19,10 +19,10 @@ export default class About extends React.PureComponent {
     const contributors = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
     const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
 
-    let updateMsg = 'No update available';
+    let updateMsg = this.props.language.version.no_update;
     let version = versionData[0].tag_name;
     if (version !== '5.0' && version !== '4.1') {
-      updateMsg = 'Update available: ' + version;
+      updateMsg = `${this.props.language.version.update_available}: ${version}`;
     }
 
     // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK
@@ -39,14 +39,14 @@ export default class About extends React.PureComponent {
   render() {
     return (
       <div>
-        <h2>About</h2>
+        <h2>{this.props.language.title}</h2>
         <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
-        <p>Copyright 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
-        <p>Version {Constants.VERSION} ({this.state.update})</p>
-        <h3>Resources Used</h3>
-        <p>Pexels (Background Images)</p>
-        <p>Google (Pin Icon)</p>
-        <h3>Contributors</h3>
+        <p>{this.props.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
+        <p>{this.props.language.version.title} {Constants.VERSION} ({this.state.update})</p>
+        <h3>{this.props.language.resources_used.title}</h3>
+        <p>Pexels ({this.props.language.resources_used.bg_images})</p>
+        <p>Google ({this.props.language.resources_used.pin_icon})</p>
+        <h3>{this.props.language.contributors}</h3>
         {this.state.contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
@@ -58,7 +58,7 @@ export default class About extends React.PureComponent {
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
           </Tooltip>
         )}
-        <h3>Supporters</h3>
+        <h3>{this.props.language.supporters}</h3>
         <p>to be implemented</p>
       </div>
     );
diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/settings/sections/Time.jsx
index 4a5a32a5..1d8e9eb6 100644
--- a/src/components/modals/settings/sections/Time.jsx
+++ b/src/components/modals/settings/sections/Time.jsx
@@ -27,22 +27,22 @@ export default class TimeSettings extends React.PureComponent {
   render() {
     let digitalSettings = (
       <React.Fragment>
-        <h3>Digital</h3>
-        <Checkbox name='seconds' text={this.props.language.seconds} />
-        <Checkbox name='24hour' text={this.props.language.twentyfourhour} />
-        <Checkbox name='ampm' text={this.props.language.ampm} />
-        <Checkbox name='zero' text={this.props.language.zero} />
+        <h3>{this.props.language.digital.title}</h3>
+        <Checkbox name='seconds' text={this.props.language.digital.seconds} />
+        <Checkbox name='24hour' text={this.props.language.digital.twentyfourhour} />
+        <Checkbox name='ampm' text={this.props.language.digital.ampm} />
+        <Checkbox name='zero' text={this.props.language.digital.zero} />
       </React.Fragment>
     );
 
     let analogSettings = (
       <React.Fragment>
-        <h3>Analog</h3>
-        <Checkbox name='secondHand' text='Seconds Hand' />
-        <Checkbox name='minuteHand' text='Minutes Hand' />
-        <Checkbox name='hourHand' text='Hours Hand' />
-        <Checkbox name='hourMarks' text='Hour Marks' />
-        <Checkbox name='minuteMarks' text='Minute Marks' />
+        <h3>{this.props.language.analogue.title}</h3>
+        <Checkbox name='secondHand' text={this.props.language.analogue.second_hand} />
+        <Checkbox name='minuteHand' text={this.props.language.analogue.minute_hand} />
+        <Checkbox name='hourHand' text={this.props.language.analogue.hour_hand} />
+        <Checkbox name='hourMarks' text={this.props.language.analogue.hour_marks} />
+        <Checkbox name='minuteMarks' text={this.props.language.analogue.minute_marks} />
       </React.Fragment>
     );
 
@@ -57,9 +57,9 @@ export default class TimeSettings extends React.PureComponent {
         <h2>{this.props.language.title}</h2>
         <Checkbox name='time' text='Enabled' />
         <Dropdown label='Type' name='timeType' id='timeType' onChange={() => this.changeType()}>
-          <option className='choices' value='digital'>Digital</option>
-          <option className='choices' value='analogue'>Analog</option>
-          <option className='choices' value='percentageComplete'>Percentage of Day</option>
+          <option className='choices' value='digital'>{this.props.language.digital.title}</option>
+          <option className='choices' value='analogue'>{this.props.language.analogue.title}</option>
+          <option className='choices' value='percentageComplete'>{this.props.language.percentage_complete}</option>
         </Dropdown>
         {digitalSettings}
         <h3>{this.props.language.date.title}</h3>
diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx
index 49b7cc94..4cffcc89 100644
--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -47,7 +47,7 @@ export default function Settings (props) {
           <About/>
         </div>
         <div label={props.language.sections.about.title}>
-          <About/>
+          <About language={props.language.sections.about}/>
         </div>
       </SettingsTabs>
     </React.Fragment>
diff --git a/src/scss/modules/modals/_main.scss b/src/scss/modules/modals/_main.scss
index cebe4e74..d5be3f3e 100644
--- a/src/scss/modules/modals/_main.scss
+++ b/src/scss/modules/modals/_main.scss
@@ -323,4 +323,4 @@ li {
   height: auto;
   border-radius: 50%;
   padding-right: 5px;
-}
\ No newline at end of file
+}
diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json
index 1fdffb13..688a4036 100644
--- a/src/translations/en-GB.json
+++ b/src/translations/en-GB.json
@@ -37,12 +37,22 @@
         "sections": {
           "time": {
             "title": "Time",
-            "seconds": "Seconds",
-            "twentyfourhour": "24 Hour",
-            "ampm": "AM/PM (12 hour)",
-            "zero": "Zero-padded",
-            "analog": "Analog",
-            "percentageComplete": "Percentage of the Day Complete",
+            "digital": {
+              "title": "Digital",
+              "seconds": "Seconds",
+              "twentyfourhour": "24 Hour",
+              "ampm": "AM/PM (12 hour)",
+              "zero": "Zero-padded"
+            },
+            "analogue": {
+              "title": "Analogue",
+              "second_hand": "Seconds Hand",
+              "minute_hand": "Minutes Hand",
+              "hour_hand": "Hours Hand",
+              "hour_marks": "Hour Marks",
+              "minute_marks": "Minute Marks"
+            },
+            "percentage_complete": "Percentage of the Day Complete",
             "date": {
               "title": "Date",
               "short_date": "Short Date",
@@ -94,21 +104,19 @@
           "changelog": "Change Log",
           "about": {
             "title": "About",
-            "about": {
-              "copyright": "Copyright",
-              "version": {
-                "title": "Version",
-                "update_available": "Update available",
-                "no_update": "No update available"
-              },
-              "resources_used": {
-                "title": "Resources Used",
-                "bg_images": "Background Images",
-                "pin_icon": "Pin Icon"
-              },
-              "contributors": "Contributors",
-              "supporters": "Supporters"
-            }
+            "copyright": "Copyright",
+            "version": {
+              "title": "Version",
+              "update_available": "Update available",
+              "no_update": "No update available"
+            },
+            "resources_used": {
+              "title": "Resources Used",
+              "bg_images": "Background Images",
+              "pin_icon": "Pin Icon"
+            },
+            "contributors": "Contributors",
+            "supporters": "Supporters"
           }
         },
         "buttons": {
diff --git a/src/translations/en-US.json b/src/translations/en-US.json
index a3eb0ec7..cba3f472 100644
--- a/src/translations/en-US.json
+++ b/src/translations/en-US.json
@@ -10,6 +10,11 @@
             "custom_colour": "Custom Background Color",
             "add_colour": "Add color",
             "favourite": "Favorite"
+          },
+          "time": {
+            "analogue": {
+              "title": "Analog"
+            }
           }
         }
       }