refactor: make modals like widgets

src/components/modals/update/Update.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import './update.scss';
+
+export default class Update extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      title: this.props.language.title,
+      date: null,
+      content: this.props.language.title,
+      html: this.props.language.loading,
+      image: null
+    };
+ }
+
+ async getUpdate() {
+  const data = await (await fetch(window.constants.API_URL + '/getUpdate')).json();
+
+  if (data.statusCode === 500 || data.title === null) {
+    const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
+    return this.setState({
+      title: this.props.language.error.title,
+      html: this.props.language.error.description + supportText
+    });
+  }
+
+  this.setState({
+    title: data.title,
+    date: data.published,
+    image: data.image || null,
+    author: data.author,
+    html: data.content
+  });
+ }
+
+ componentDidMount() {
+  if (localStorage.getItem('offlineMode') === 'true') {
+    return this.setState({
+      title: this.props.language.offline.title,
+      html: this.props.language.offline.description
+    });
+  }
+
+  this.getUpdate();
+ }
+
+  render() {
+    return <div className='updateContent'>
+      <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+      <h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
+      <h5 style={{ 'lineHeight': '0px' }}>{this.state.date}</h5>
+      {this.state.image ? <img draggable='false' src={this.state.image} alt='Update'></img> : null}
+      <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
+      </div>;
+  }
+}