update modal fixes

src/components/modals/Settings.jsx

@@ -90,11 +90,11 @@ export default class Settings extends React.PureComponent {
             <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
           </Section>
           <div className='section'>
-            <h4 class='nodropdown'>{this.props.language.offline}</h4>
+            <h4 className='nodropdown'>{this.props.language.offline}</h4>
             <Slider name='offlineMode'/>
           </div>
           <div className='section'>
-            <h4 class='nodropdown'>{this.props.language.experimental.dark}</h4>
+            <h4 className='nodropdown'>{this.props.language.experimental.dark}</h4>
             <Slider name='darkTheme'/>
           </div>
           <Section title={this.props.language.experimental.title} name='experimental' slider={false}>

src/components/modals/Update.jsx

@@ -8,31 +8,36 @@ export default class Update extends React.PureComponent {
       title: this.props.language.title,
       date: '???',
       content: this.props.language.title,
-      url: '',
-      author: 'Mue'
+      author: 'Mue',
+      html: this.props.language.loading
     };
  }
 
  async getUpdate() {
+  let supportText = `<br/><p>${this.props.language.contactsupport}: <a target='_blank' class='modalLink' href='https://muetab.xyz/contact.html'</a>https://muetab.xyz/contact</p>`;
+
   if (localStorage.getItem('offlineMode') === 'true') return this.setState({
     title: this.props.language.offline.title,
-    content: this.props.language.offline.description
+    html: this.props.language.offline.description
   });
 
   try { // Get update log from the API
     const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
+    if (data.statusCode === 500) return this.setState({
+      title: this.props.language.error.title,
+      html: this.props.language.error.description + supportText
+    });
     this.setState({
       title: data.title,
-      content: data.content,
       date: data.published,
       image: data.image,
-      url: data.url,
-      author: data.author
+      author: data.author,
+      html: data.content + `<br/><p>${this.props.language.readblog}: <a target='_blank' class='modalLink' href='${data.url}'>${data.url}</a></p>`
     });
   } catch (e) { // If it fails, we send an error
     this.setState({
       title: this.props.language.error.title,
-      content: this.props.language.error.description
+      html: this.props.language.error.description + supportText
     });
   }
  }
@@ -47,7 +52,7 @@ export default class Update extends React.PureComponent {
         <h1 style={{ 'marginBottom':'-10px' }}>{this.state.title}</h1>
         <h5 style={{ 'lineHeight':'0px' }}> By {this.state.author} • {this.state.date}</h5>
         <img draggable='false' src={this.state.image} alt='Update'></img>
-        <p dangerouslySetInnerHTML={{__html: this.state.content + `<br/><p>Read on the blog here: <a target='_blank' class='modalLink' href='${this.state.url}'>${this.state.url}</a></p>`}}></p>
+        <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
       </div>;
     }
 }

src/translations/en.json

@@ -75,9 +75,11 @@
         },
         "error": {
             "title": "Error",
-            "content": "Could not connect to the server"
+            "description": "Could not connect to the server"
         },
-        "loading": "Loading..."
+        "loading": "Loading...",
+        "readblog": "Read on the blog here",
+        "contactsupport": "Contact us here"
     },
     "toasts": {
         "quote": "Quote Copied",