example.cljs

(ns mate-heatmap.index
  [:require [reagent.dom :as dom]
            [reagent.core :as reagent]
            [ajax.core :refer [ajax-request json-request-format json-response-format]]
            ["react-heatmap-grid" :default HeatMap]])

(def heatmap (reagent/atom nil))

(defn heatmap-component
  [data]
  [:div
   [:> HeatMap
    {:xLabels ["A" "B" "C" "D" "E" "F" "G" "H"]
     :yLabels [1 2 3 4 5 6 7 8]
     :data    data}]])

(defn get-game-data
  "Fetches the game data from the Backend"
  [user-id]
  (let [url (str "/user/" user-id)
        handler (fn
                  [response]
                  (swap! heatmap (heatmap-component (second response))))]
    (ajax-request
      {:uri             url
       :method          :get
       :handler         handler
       :format          (json-request-format)
       :response-format (json-response-format {:keywords? true})})))

(defn base-component
  []
  (fn []
    [:div
     [:form {:onSubmit (fn [e]
                         (.preventDefault e)
                         (get-game-data "Jepetto"))}
      [:input {:type "text"}]
      [:button {:type "submit"} "Run"]]
     @heatmap]))


(defn render []
  (dom/render
    [base-component]
    (.getElementById js/document "app")))

(defn ^:dev/after-load reload
  []
  (render))