feat: live-updating time display on Todos

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

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)}