simple1.cljs

(ns exfn.app
  (:require [reagent.dom :as dom]
            [reagent.core :as reagent]
            [re-frame.core :as rf]
            [goog.string :as gstring]
            [goog.string.format]
            [clojure.string :as string]))

(comment
  (str "DEV NOTE.
        --------------------------------------------------------------------------------------------------")
  (str "Run with shadow using npx shadow-cljs watch app"
       "If using INtelliJ and Cursive::"
       "Run repl after connecting in the browser."
       "To switch to cljs repl evaluate this, don't use cljs drop down in repl tab.")
  (shadow/repl :app)
  (str "Now test that the repl is connected"
       "you should see the alert go to the repl, return nil and also an alert in the browser.")
  (js/alert "hello!")
  (str "If dependencies aren't being resolved run shadow-cljs pom and reload all from disk in File menu.
        --------------------------------------------------------------------------------------------------"))

;;-- Events --------------------------------------------------------------------------
(rf/reg-event-db
  :initialize
  (fn [_ _]
    {:time-remaining 0
     :countdown-visible false
     :initiator-visible true}))

(rf/reg-event-db
  :start
  (fn [db [_ time]]
    (-> db 
        (assoc :time-remaining time)
        (assoc :countdown-visible true)
        (assoc :initiator-visible false))))

;; -- Subscriptions ------------------------------------------------------------------
(rf/reg-sub
  :time-remaining
  (fn [db _]
    (let [time (:time-remaining db)]
      (gstring/format "%02d" (if (nil? time) 0 time)))))

(rf/reg-sub
 :initiator-visible
 (fn [db _]
   (db :initiator-visible)))

(rf/reg-sub
 :countdown-visible
 (fn [db _]
   (db :countdown-visible)))

;; -- Reagent Forms ------------------------------------------------------------------
(defn countdown-initiator []
  (let [time-entered (reagent.core/atom 0)
        visible @(rf/subscribe [:initiator-visible])]
    (fn []
      [:div.initiator {:style {:visibility (if visible :visible :hidden)}}
       [:div.timer @time-entered]
       [:div
        [:button.btn.up
         {:on-click #(swap! time-entered inc)}
         [:i.fas.fa-chevron-up]]
        [:button.btn.down
         {:on-click #(if (> @time-entered 0)
                       (swap! time-entered dec))}
         [:i.fas.fa-chevron-down]]]
       [:div
        [:button.btn.btn-danger {:on-click #(rf/dispatch [:start @time-entered])
                                 :style    {:margin-top 10}} "Start"]]])))

(defn selected-time []
  (let [visible @(rf/subscribe [:countdown-visible])]
    [:div.countdown {:style {:visibility (if visible :visible :hidden)} }
     @(rf/subscribe [:time-remaining])]))

;; -- App -------------------------------------------------------------------------
(defn app []
  [:div.container
   [:h1 "Countdown"]
   [countdown-initiator]
   [selected-time]])

;; -- After-Load --------------------------------------------------------------------
;; Do this after the page has loaded.
;; Initialize the initial db state.
(defonce initialize (rf/dispatch-sync [:initialize]))       ; dispatch the event which will create the initial state.)

(defn ^:dev/after-load start
  []
  (dom/render [app]
              (.getElementById js/document "app")))

(defn ^:export init []
  (js/console.log "Lets learn re-frame!")
  (start))