improve update modal etc

package.json

@@ -11,6 +11,7 @@
   "license": "BSD-3-Clause",
   "version": "5.0.0",
   "dependencies": {
+    "@eartharoid/dtf": "^1.0.8",
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "4.11.2",
     "deepmerge": "^4.2.2",

src/App.jsx

@@ -9,7 +9,6 @@ import Maximise from './components/widgets/background/Maximise';
 import Favourite from './components/widgets/background/Favourite';
 import PhotoInformation from './components/widgets/background/PhotoInformation';
 import Date from './components/widgets/time/Date';
-import Countdown from './components/widgets/countdown/Countdown';
 
 import Navbar from './components/widgets/navbar/Navbar';
 
@@ -22,7 +21,7 @@ import merge from 'deepmerge';
 const Main = React.lazy(() => import('./components/modals/Main'));
 const Update = React.lazy(() => import('./components/modals/Update'));
 const Welcome = React.lazy(() => import('./components/modals/Welcome'));
-const Feedback = React.lazy(() => import('./components/modals/Feedback'));
+//const Feedback = React.lazy(() => import('./components/modals/Feedback'));
 const renderLoader = () => <div></div>;
 
 export default class App extends React.PureComponent {
@@ -51,6 +50,7 @@ export default class App extends React.PureComponent {
 
   // Render all the components
   render() {
+    // dark theme support for modals and info card
     let modalClassList = 'Modal';
     let tooltipClassList = 'infoCard';
     if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
@@ -59,6 +59,7 @@ export default class App extends React.PureComponent {
     }
     const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay';
 
+    /// language
     const languagecode = localStorage.getItem('language') || 'en';
     const language = merge(require('./translations/en.json'), require(`./translations/${languagecode}.json`));
 
@@ -73,27 +74,22 @@ export default class App extends React.PureComponent {
           <Clock/>
           <Date/>
           <Quote language={language.toasts} languagecode={languagecode} />
-          <Countdown/>
           <PhotoInformation language={language} className={tooltipClassList} />
           <Maximise/>
           <Favourite/>
           <React.Suspense fallback={renderLoader()}>
             <Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
-              <Main
-                language={language}
-                modalClose={() => this.setState({ mainModal: false })} />
+              <Main language={language} modalClose={() => this.setState({ mainModal: false })} />
             </Modal>
             <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
-              <Update
-                language={language.update}
-                modalClose={() => this.setState({ updateModal: false })} />
+              <Update language={language.update} modalClose={() => this.setState({ updateModal: false })} />
             </Modal>
             <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Welcome modalClose={() => this.closeWelcome()} language={language.welcome} />
             </Modal>
-            <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
+            {/* <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Feedback modalClose={() => this.setState({ feedbackModal: false })} />
-            </Modal>
+            </Modal> */}
           </React.Suspense>
         </div>
       </React.Fragment>

src/components/modals/Update.jsx

@@ -16,17 +16,29 @@ export default class Update extends React.PureComponent {
  async getUpdate() {
   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>`;
 
-  if (localStorage.getItem('offlineMode') === 'true') return this.setState({
-    title: this.props.language.offline.title,
-    html: this.props.language.offline.description
-  });
+  const removeStuff = () => { // quick code to make update modal a bit better, will replace later
+    document.getElementById('author').innerText = '';
+    const img = document.getElementsByTagName('img')[0];
+    img.parentNode.removeChild(img);
+  }
+
+  if (localStorage.getItem('offlineMode') === 'true') {
+    removeStuff();
+    return this.setState({
+      title: this.props.language.offline.title,
+      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
-    });
+    if (data.statusCode === 500) {
+      removeStuff();
+      return this.setState({
+        title: this.props.language.error.title,
+        html: this.props.language.error.description + supportText
+      });
+  }
 
     this.setState({
       title: data.title,
@@ -36,6 +48,7 @@ export default class Update extends React.PureComponent {
       html: data.content + `<br/><p>${this.props.language.read_blog}: <a target='_blank' class='modalLink' href='${data.url}'>${data.url}</a></p>`
     });
   } catch (e) { // If it fails, we send an error
+    removeStuff();
     this.setState({
       title: this.props.language.error.title,
       html: this.props.language.error.description + supportText
@@ -51,7 +64,7 @@ export default class Update extends React.PureComponent {
     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' }}> By {this.state.author} • {this.state.date}</h5>
+        <h5 style={{ 'lineHeight':'0px' }} id='author'> By {this.state.author} • {this.state.date}</h5>
         <img draggable='false' src={this.state.image} alt='Update'></img>
         <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
       </div>;

src/components/widgets/countdown/Countdown.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import Countdown from 'react-countdown';
-
-import './countdown.scss';
-
-export default class CountdownWidget extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-        countdown: new Date(localStorage.getItem('birthday')),
-        message: localStorage.getItem('countdownmessage') || 'until tomorrow'
-    };
-  }
-
-  render() {
-    if (localStorage.getItem('countdown') === 'false') return;
-    return <h4 className='countdown'>
-        <Countdown date={this.state.countdown + 10000} onComplete={() => this.setState({ message: 'Today\'s the day!'})} /><br/>
-        {this.state.message}
-    </h4>;
-  }
-}

src/components/widgets/countdown/countdown.scss

@@ -1,6 +0,0 @@
-.countdown {
-    position: absolute;
-    bottom: 0;
-    font-size: 0.95em;
-    cursor: default;
-}