Skip to content

Instantly share code, notes, and snippets.

@stuartstein777
Created March 31, 2021 19:33
Show Gist options
  • Save stuartstein777/a1e9e40146489392cca4af97b7bfb23d to your computer and use it in GitHub Desktop.
Save stuartstein777/a1e9e40146489392cca4af97b7bfb23d to your computer and use it in GitHub Desktop.
(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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment