diff --git a/src_cljs/sketchbook/core.cljs b/src_cljs/sketchbook/core.cljs index 29f1151..5a4eaf6 100644 --- a/src_cljs/sketchbook/core.cljs +++ b/src_cljs/sketchbook/core.cljs @@ -1,19 +1,35 @@ (ns sketchbook.core - (:require [reagent.core :as r])) + (:require [reagent.core :as r] + [re-frame.core :refer [dispatch subscribe]] + [sketchbook.events] + [sketchbook.subs])) -(defonce state (r/atom {:thing "world"})) +(defn sketch [sketch-item width height] + [:div {:key (:path sketch-item)} + [:h1 (:title sketch-item)] + [:img {:src (str "/api/sketches/" + (:path sketch-item) + "?width=" width + "&height=" height) + :width width + :height height}]]) -(defn hello [] - [:div - [:h1 (str "Hello " (:thing @state)"!")] - [:button {:onClick (fn [] (swap! state #(assoc % :thing "universe")))} - "Universe"] - [:button {:onClick (fn [] (swap! state #(assoc % :thing "world")))} - "World"]]) +(defn sketches [] + (let [sketch-list @(subscribe [:sketches]) + loading @(subscribe [:loading-sketches])] + (if loading + [:div "Loading..."] + (if (> (count sketch-list) 0) + [:div + (map #(sketch % 300 300) sketch-list)] + [:div "No sketches found"])))) (defn app [] [:div - [hello]]) + [sketches]]) + +(dispatch [:initialize]) +(dispatch [:fetch-sketches]) (r/render [app] (.getElementById js/document "app")) diff --git a/src_cljs/sketchbook/db.cljs b/src_cljs/sketchbook/db.cljs new file mode 100644 index 0000000..9f82022 --- /dev/null +++ b/src_cljs/sketchbook/db.cljs @@ -0,0 +1,5 @@ +(ns sketchbook.db) + +(def initial-db + {:sketches [] + :loading-sketches false}) diff --git a/src_cljs/sketchbook/events.cljs b/src_cljs/sketchbook/events.cljs new file mode 100644 index 0000000..c58ad7c --- /dev/null +++ b/src_cljs/sketchbook/events.cljs @@ -0,0 +1,27 @@ +(ns sketchbook.events + (:require [re-frame.core :refer [reg-event-db reg-event-fx]] + [ajax.core :as ajax] + [day8.re-frame.http-fx] + [sketchbook.db :as db])) + +(reg-event-db + :initialize + (fn [_ _] + db/initial-db)) + +(reg-event-fx + :fetch-sketches + (fn [{db :db} _] + {:http-xhrio {:method :get + :uri "/api/sketches" + :format (ajax/json-request-format) + :response-format (ajax/json-response-format {:keywords? true}) + :on-success [:sketches-fetched]} + :db (assoc db :loading-sketches true)})) + +(reg-event-db + :sketches-fetched + (fn [db [_ response]] + (-> db + (assoc :loading-sketches false) + (assoc :sketches (js->clj response))))) diff --git a/src_cljs/sketchbook/subs.cljs b/src_cljs/sketchbook/subs.cljs new file mode 100644 index 0000000..5372be7 --- /dev/null +++ b/src_cljs/sketchbook/subs.cljs @@ -0,0 +1,12 @@ +(ns sketchbook.subs + (:require [re-frame.core :refer [reg-sub]])) + +(reg-sub + :sketches + (fn [db _] + (:sketches db))) + +(reg-sub + :loading-sketches + (fn [db _] + (:loading-sketches db)))