Last active
September 23, 2020 13:15
-
-
Save saskali/1398f41345ea4df551b0c370ac1ac822 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(ns simple.core | |
(:require [reagent.core :as reagent] | |
[re-frame.core :as rf] | |
[clojure.string :as str])) | |
;; A detailed walk-through of this source code is provied in the docs: | |
;; https://github.com/Day8/re-frame/blob/master/docs/CodeWalkthrough.md | |
;; -- Domino 1 - Event Dispatch ----------------------------------------------- | |
(defn dispatch-timer-event | |
[] | |
(let [now (js/Date.)] | |
(rf/dispatch [:timer now]))) ;; <-- dispatch used | |
;; Call the dispatching function every second. | |
;; `defonce` is like `def` but it ensures only one instance is ever | |
;; created in the face of figwheel hot-reloading of this file. | |
(defonce do-timer (js/setInterval dispatch-timer-event 1000)) | |
;; -- Domino 2 - Event Handlers ----------------------------------------------- | |
(rf/reg-event-db ;; sets up initial application state | |
:initialize ;; usage: (dispatch [:initialize]) | |
(fn [_ _] ;; the two parameters are not important here, so use _ | |
{:time (js/Date.) ;; What it returns becomes the new application state | |
:time-color "#f88"})) ;; so the application state will initially be a map with two keys | |
(rf/reg-event-db ;; usage: (dispatch [:time-color-change 34562]) | |
:time-color-change ;; dispatched when the user enters a new colour into the UI text field | |
(fn [db [_ new-color-value]] ;; -db event handlers given 2 parameters: current application state and event (a vector) | |
(assoc db :time-color new-color-value))) ;; compute and return the new application state | |
(rf/reg-event-db ;; usage: (dispatch [:timer a-js-Date]) | |
:timer ;; every second an event of this kind will be dispatched | |
(fn [db [_ new-time]] ;; note how the 2nd parameter is destructured to obtain the data value | |
(assoc db :time new-time))) ;; compute and return the new application state | |
;; -- Domino 4 - Query ------------------------------------------------------- | |
(rf/reg-sub | |
:time | |
(fn [db _] ;; db is current app state. 2nd unused param is query vector | |
(:time db))) ;; return a query computation over the application state | |
(rf/reg-sub | |
:time-color | |
(fn [db _] | |
(:time-color db))) | |
;; -- Domino 5 - View Functions ---------------------------------------------- | |
(defn clock | |
[] | |
[:div.example-clock | |
{:style {:color @(rf/subscribe [:time-color])}} | |
(-> @(rf/subscribe [:time]) | |
.toTimeString | |
(str/split " ") | |
first)]) | |
(defn color-input | |
[] | |
[:div.color-input | |
"Time color: " | |
[:input {:type "text" | |
:value @(rf/subscribe [:time-color]) | |
:on-change #(rf/dispatch [:time-color-change (-> % .-target .-value)])}]]) ;; <--- | |
(defn ui | |
[] | |
[:div | |
[:h1 "Hello world, it is now"] | |
[clock] | |
[color-input]]) | |
;; -- Entry Point ------------------------------------------------------------- | |
(defn ^:export run | |
[] | |
(rf/dispatch-sync [:initialize]) ;; puts a value into application state | |
(reagent/render [ui] ;; mount the application's ui into '<div id="app" />' | |
(js/document.getElementById "app"))) | |
(run) |
Hey there,
thanks for picking this up, I saw you made a pull request for updating the gists.
I imagine it's not a lot to check, but I'm not available and mostly offline for the next seven weeks, so I hope someone else can jump in.
thank you!
Perfect, of course, thank you.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I see your demos on re-playground are break since Reagent use now
reagent.dom
namespace for the render function.Can you update your two gist ?
My forks:
Thx!
Cheers.