From 2f640ef7aa6b7865d91a6a2674543b3f8eb54459 Mon Sep 17 00:00:00 2001
From: Adam Borowski <adam@adamboro.com>
Date: Tue, 7 Jul 2020 23:35:28 +0200
Subject: [PATCH] feat: live-updating time display on Todos

---
 client/src/components/LiveTime.jsx | 35 ++++++++++++++++++++++++++++++
 client/src/components/Todos.jsx    | 20 +++++++++++------
 2 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/LiveTime.jsx

diff --git a/client/src/components/LiveTime.jsx b/client/src/components/LiveTime.jsx
new file mode 100644
index 0000000..bb56831
--- /dev/null
+++ b/client/src/components/LiveTime.jsx
@@ -0,0 +1,35 @@
+// @flow
+
+import React, { useEffect, useState } from 'react'
+import cx from 'classnames'
+
+const HOUR = 1000 * 60 * 60
+
+/**
+ * A Component that self-updates evey hour.
+ */
+const LiveTime = ({ children, className, getDynamicClassName, ...props }) => {
+  const [dynamicChildren, setDynamicChildren] = useState(children())
+  const [dynamicClassName, setDynamicClassName] = useState(
+    getDynamicClassName ? getDynamicClassName() : undefined
+  )
+  useEffect(() => {
+    const updateComponent = () => {
+      setDynamicChildren(children())
+      if (getDynamicClassName) {
+        setDynamicClassName(getDynamicClassName())
+      }
+    }
+    const interval = setInterval(updateComponent, HOUR)
+    return () => clearInterval(interval)
+  }, [])
+  return (
+    <div
+      className={cx(className, dynamicClassName)}
+      children={dynamicChildren}
+      {...props}
+    />
+  )
+}
+
+export default LiveTime
diff --git a/client/src/components/Todos.jsx b/client/src/components/Todos.jsx
index 35534a4..d703188 100644
--- a/client/src/components/Todos.jsx
+++ b/client/src/components/Todos.jsx
@@ -10,6 +10,7 @@ import Table from 'components/Table'
 import RouteLink from 'components/RouteLink'
 import BookLink from 'components/BookLink'
 import Button from 'components/Button'
+import LiveTime from 'components/LiveTime'
 import { TODOS_VIEW_URL } from 'utils/api'
 import { todosActions } from 'store/actions'
 import { todosCollection } from 'store/selectors'
@@ -54,17 +55,22 @@ export const SingleTodo = ({ todo, withRemoveButtons, shouldUpdateAll }) => {
         />
       </span>
       <div className='flex items-center'>
-        <div
+        <LiveTime
+          todo={todo}
+          title={todo.completed_on || todo.due_date}
           className={cx('pr3', {
-            'light-red': !todo.is_completed && dueMoment.isBefore(),
             blue: todo.is_completed,
           })}
-          title={todo.completed_on || todo.due_date}
+          getDynamicClassName={() =>
+            cx({ 'light-red': !todo.is_completed && dueMoment.isBefore() })
+          }
         >
-          {todo.completed_on
-            ? `Completed on ${moment(todo.completed_on).format(DATE_FORMAT)}`
-            : dueMoment.fromNow()}
-        </div>
+          {() =>
+            todo.completed_on
+              ? `Completed on ${moment(todo.completed_on).format(DATE_FORMAT)}`
+              : dueMoment.fromNow()
+          }
+        </LiveTime>
         <Button
           disabled={isDisabled}
           onClick={toggleComplete(!todo.is_completed)}