Time Since Waking - Roam Component

roam_time_since_waking.cljs

(ns com.luisthiamnye.roam-render.waking-time
  (:require
   [reagent.core :as r]))

(def default-hour 7)
(def default-minute 30)

(defn time-since [date]
  (let [mins (/ (- (js/Date.) date)
                1000 60)]
    [:<> [:b (quot mins 60) ]"h " [:b (int (rem mins 60))] "m"]))

(defn get-time-elapsed [wake-time-str]
  (time-since (.parseDate (.-en_GB js/chrono)
                                  wake-time-str
                                  (- (js/Date.) (* 4 60 60 1000)))))

(defn component [_ hour minute]
   (let [wake-time-str (str (or hour default-hour) ":" (or minute default-minute))
         time-elapsed (r/atom (get-time-elapsed wake-time-str))
         update-time (fn [] (reset! time-elapsed (get-time-elapsed wake-time-str)))]
     (fn [_ _ _]
     (js/setTimeout update-time (* 1000 60))
     [:div {:on-click update-time
            :style {:display :flex
            :justify-content :center}}
      [:span {:style {:font-family "Helvetica Neue"
                     :font-size "24px"
                     :background :azure
                     :color "rgb(0,57,96)"
                     :padding "5px 8px"
                     :border-radius "5px"
                     :box-shadow "0px 0px 4px hsla(230 50% 50% / 0.2)"}}
      @time-elapsed " since waking"]])))

Used just like any other roam/render component.

{{[[roam/render]]: ((codeblock-uid)) 8 30}} would be used if you had emerged from unconsciousness at 8:30AM.