From 88e54ad26a613e5ab81ff5cd0fafe6c6addf30b3 Mon Sep 17 00:00:00 2001
From: David Ralph <davetheprogrammer2@gmail.com>
Date: Sat, 5 Dec 2020 14:34:52 +0000
Subject: [PATCH] WIP countdown widget

---
 package.json                                  |  1 +
 src/App.jsx                                   |  2 ++
 .../settings/sections/CountdownSettings.jsx   |  0
 .../widgets/countdown/Countdown.jsx           | 22 +++++++++++++++++++
 .../widgets/countdown/countdown.scss          |  5 +++++
 5 files changed, 30 insertions(+)
 create mode 100644 src/components/modals/settings/sections/CountdownSettings.jsx
 create mode 100644 src/components/widgets/countdown/Countdown.jsx
 create mode 100644 src/components/widgets/countdown/countdown.scss

diff --git a/package.json b/package.json
index 8a1a2fb2..76257bad 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-beforeunload": "^2.4.0",
     "react-clock": "^3.0.0",
     "react-color-gradient-picker": "^0.1.2",
+    "react-countdown": "^2.3.1",
     "react-date-picker": "^8.0.5",
     "react-dom": "17.0.1",
     "react-modal": "3.12.1",
diff --git a/src/App.jsx b/src/App.jsx
index 0015b80f..cf2d69e7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,7 @@ 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';
 
@@ -72,6 +73,7 @@ export default class App extends React.PureComponent {
           <Clock/>
           <Date/>
           <Quote language={language.toasts} languagecode={languagecode} />
+          <Countdown/>
           <PhotoInformation language={language} className={tooltipClassList} />
           <div className='bottom-navbar'>
             <Maximise/>
diff --git a/src/components/modals/settings/sections/CountdownSettings.jsx b/src/components/modals/settings/sections/CountdownSettings.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/widgets/countdown/Countdown.jsx b/src/components/widgets/countdown/Countdown.jsx
new file mode 100644
index 00000000..0b859ccd
--- /dev/null
+++ b/src/components/widgets/countdown/Countdown.jsx
@@ -0,0 +1,22 @@
+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>;
+  }
+}
diff --git a/src/components/widgets/countdown/countdown.scss b/src/components/widgets/countdown/countdown.scss
new file mode 100644
index 00000000..a02df73c
--- /dev/null
+++ b/src/components/widgets/countdown/countdown.scss
@@ -0,0 +1,5 @@
+.countdown {
+    position: absolute;
+    bottom: 0;
+    font-size: 0.95em;
+}
\ No newline at end of file