sortable.cljs

(ns mapillary.components.user-feeds
  (:require [keechma.ui-component :as ui]
            [cljsjs.jquery-ui]
            [mapillary.util :refer [current-timestamp]]
            [reagent.core :as reagent]))

(defn render-user-column [ctx user]
  (let [username (:username user)]
    ;; key here is a hack to force React to re-render the list contents
    [:li {:key (str username (current-timestamp)) :data-username username}
     [(ui/component ctx :events) username]]))

(defn make-sortable [ctx dom-node]
  (let [$ul (js/$ dom-node)]
    ;; Make sure that jQueryUI picks up the DOM nodes added
    ;; by React
    (.setTimeout js/window #(.sortable $ul "refresh") 4)
    (.sortable $ul
     #js {:handle ".header"
          :update (fn [e ui]
                    (let [column (.-item ui)
                          new-position (.index (.find $ul "> li") column)
                          username (.data column "username")]
                      (ui/send-command ctx :move-to-position [{:username username} new-position])))})))

(defn refresh-sortable [dom-node]
  (.sortable (js/$ dom-node) "refresh"))

(defn render [ctx]
  ;; Renders the user feeds component. It will render one column for each of
  ;; the selected users. It will also make the columns sortable by drag and drop.
  (let [selected-user-list-sub (ui/subscription ctx :selected-user-list)]
    (reagent/create-class
     {:component-did-mount
      #(make-sortable ctx (.findDOMNode js/ReactDOM %))
      :component-did-update
      #(refresh-sortable (.findDOMNode js/ReactDOM %))
      :reagent-render
      (fn []
        (let [selected-user-list @selected-user-list-sub]
          [:ul.events-wrap
           (map #(render-user-column ctx %) selected-user-list)]))})))

(def component
  (ui/constructor
   {:renderer render
    :subscription-deps [:selected-user-list]
    :component-deps [:events]
    :topic :selected-users}))