fix: generalization countdown for any year

src/App/index.js

@@ -1,45 +1,54 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import './index.scss';
+import './index.scss'
 
-const _second = 1000;
+const _second = 1000
-const _minute = _second * 60;
+const _minute = _second * 60
-const _hour = _minute * 60;
+const _hour = _minute * 60
-const _day = _hour * 24;
+const _day = _hour * 24
 
 class App extends Component {
   constructor() {
-    super();
+    super()
 
-    const now = new Date();
+    const now = new Date()
-    let imWaitingForDrinking = true; // of course default to true
+    let imWaitingForDrinking = true // of course default to true
-    let year = now.getFullYear() + 1;
+    let year = now.getFullYear() + 1
     let countdownData = {}
 
     if (now.getMonth() === 0 && now.getDate() === 1) {
-      imWaitingForDrinking = false;
+      imWaitingForDrinking = false
-      year = now.getFullYear();
+      year = now.getFullYear()
-    }
+    } else {
-    else {
+      countdownData = this.getMissingTime(now)
-      countdownData = this.getMissingTime(now);
     }
 
     this.state = {
       isNewYear: !imWaitingForDrinking,
       newYear: year,
       countdownID: null,
-      countdownData: countdownData,
+      countdownData: countdownData
-    };
+    }
   }
 
-  getMissingTime = now => {
+  getMissingTime = (now) => {
-    const midnight = new Date('2019-01-01 00:00');
+    const newYear = now.getFullYear() + 1
-    const delta = midnight - now;
 
-    return {
+    if (this.state && this.state.newYear && this.state.newYear === now.getFullYear()) {
-      days: Math.floor(delta / _day),
+      this.setState({
-      hours: Math.floor((delta % _day) / _hour),
+        isNewYear: true
-      minutes: Math.floor((delta % _hour) / _minute),
+      })
-      seconds: Math.floor((delta % _minute) / _second),
+
+      return this.state.countdownData
+    } else {
+      const midnight = new Date(`${newYear}-01-01 00:00`)
+      const delta = midnight - now
+
+      return {
+        days: Math.floor(delta / _day),
+        hours: Math.floor((delta % _day) / _hour),
+        minutes: Math.floor((delta % _hour) / _minute),
+        seconds: Math.floor((delta % _minute) / _second)
+      }
     }
   }
 
@@ -90,8 +99,8 @@ class App extends Component {
               </p>
             </div>
             <div className="pyro">
-              <div className="before"></div>
+              <div className="before" />
-              <div className="after"></div>
+              <div className="after" />
             </div>
           </React.Fragment>
         )}
@@ -99,7 +108,7 @@ class App extends Component {
           <div className="text-wrapper">
             <p>Countdown to {newYear}</p>
             <div className="countdown">
-              {getCountdownMarkup(countdownData['days'], 's')}
+              {getCountdownMarkup(countdownData['days'], 'd')}
               {getCountdownMarkup(countdownData['hours'], 'h')}
               {getCountdownMarkup(countdownData['minutes'], 'm')}
               {getCountdownMarkup(countdownData['seconds'], 's')}
@@ -107,8 +116,8 @@ class App extends Component {
           </div>
         )}
       </div>
-    );
+    )
   }
 }
 
-export default App;
+export default App