WIP: project creation now work.

2025-03-28 15:41:25 -05:00 · 2015-12-14 14:17:18 +02:00 · 2015-12-14 14:17:18 +02:00 · 56f7613453
commit 56f7613453
parent 62b9267d4f
11 changed files with 201 additions and 103 deletions
--- a/frontend/uxbox/core.cljs
+++ b/frontend/uxbox/core.cljs
@ -1,9 +1,9 @@
 (ns uxbox.core
  (:require [uxbox.state]
            [uxbox.ui :as ui]
-            [uxbox.ui.navigation]
            [uxbox.router]
-            [uxbox.rstore]
+            [uxbox.rstore :as rs]
+            [uxbox.data.projects :as dp]
            [goog.dom :as dom]))

 (enable-console-print!)
@ -11,3 +11,19 @@
 (let [dom (dom/getElement "app")]
  (ui/mount! dom))

+(defonce +setup-stuff+
+  (do
+    (rs/emit! (dp/create-project {:name "foo"
+                                  :width 600
+                                  :height 600
+                                  :layout :mobile}))
+    (rs/emit! (dp/create-project {:name "bar"
+                                  :width 600
+                                  :height 600
+                                  :layout :mobile}))
+    (rs/emit! (dp/create-project {:name "baz"
+                                  :width 600
+                                  :height 600
+                                  :layout :mobile}))
+    nil))
+
--- a/frontend/uxbox/data/projects.cljs
+++ b/frontend/uxbox/data/projects.cljs
@ -0,0 +1,32 @@
+(ns uxbox.data.projects
+  (:require [uxbox.rstore :as rs]
+            [uxbox.state :as st]
+            [uxbox.schema :as sc]
+            [bouncer.validators :as v]))
+
+(def ^:static +project-schema+
+  {:name [v/required v/string]
+   :width [v/required v/integer]
+   :height [v/required v/integer]
+   :layout [v/required sc/keyword?]})
+
+(defn create-project
+  [{:keys [name width height layout] :as data}]
+  (sc/validate! +project-schema+ data)
+  (println "create-project")
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (let [uuid (random-uuid)
+            proj {:id uuid
+                  :name name
+                  :width width
+                  :height height
+                  :pages []}]
+        (-> state
+            (update-in [:projects] conj uuid)
+            (update-in [:projects-by-id] assoc uuid {:name name}))))
+
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.s.p/create-project>"))))
--- a/frontend/uxbox/rstore.cljs
+++ b/frontend/uxbox/rstore.cljs
@ -1,7 +1,6 @@
 (ns uxbox.rstore
  "Reactive storage management architecture helpers."
-  (:require [beicon.core :as rx]
-            [promesa.core :as prom]))
+  (:require [beicon.core :as rx]))

 ;; An abstraction for implement a simple state
 ;; transition. The `-apply-update` function receives
@ -45,7 +44,7 @@
  [e]
  (satisfies? EffectEvent e))

-(defonce ^:static bus (rx/bus))
+(defonce bus (rx/bus))

 (defn emit!
  "Emits an event or a collection of them.
--- a/frontend/uxbox/schema.cljs
+++ b/frontend/uxbox/schema.cljs
@ -0,0 +1,30 @@
+(ns uxbox.schema
+  (:refer-clojure :exclude [keyword?])
+  (:require [bouncer.core :as b]
+            [bouncer.validators :as v]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Validators
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(v/defvalidator keyword?
+  "Validates maybe-an-int is a valid integer.
+  For use with validation functions such as `validate` or `valid?`"
+  {:default-message-format "%s must be a keyword"}
+  [v]
+  (cljs.core/keyword? v))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Public Api
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn validate
+  ([schema] #(validate schema %))
+  ([schema data] (first (b/validate data schema))))
+
+(defn validate!
+  ([schema] #(validate! schema %))
+  ([schema data]
+   (when-let [errors (validate schema data)]
+     (throw (ex-info "Invalid data" errors)))))
+
--- a/frontend/uxbox/state.cljs
+++ b/frontend/uxbox/state.cljs
@ -6,10 +6,15 @@

 (defonce state (atom {}))

-(def stream
+(defonce stream
  (rs/init {:user {:fullname "Cirilla"
                   :avatar "http://lorempixel.com/50/50/"}
+            :projects []
+            :pages []
            :projects-by-id {}
            :pages-by-id {}}))

-(rx/to-atom stream state)
+(defonce +setup-stuff+
+  (do
+    (rx/to-atom stream state)))
+
--- a/frontend/uxbox/ui.cljs
+++ b/frontend/uxbox/ui.cljs
@ -8,7 +8,7 @@
            [uxbox.ui.users :as ui.u]
            [uxbox.ui.dashboard :as ui.d]))

-(def ^:private ^:static state
+(def ^:static state
  (as-> (l/select-keys [:location :location-params]) $
    (l/focus-atom $ s/state)))

--- a/frontend/uxbox/ui/dashboard.cljs
+++ b/frontend/uxbox/ui/dashboard.cljs
@ -1,48 +1,53 @@
 (ns uxbox.ui.dashboard
  (:require [sablono.core :as html :refer-macros [html]]
            [rum.core :as rum]
+            [cats.labs.lens :as l]
            [cuerdas.core :as str]
            [uxbox.util :as util]
            [uxbox.router :as r]
+            [uxbox.rstore :as rs]
+            [uxbox.state :as s]
+            [uxbox.data.projects :as dp]
+            [uxbox.ui.icons.dashboard :as icons]
            [uxbox.ui.icons :as i]
            [uxbox.ui.dom :as dom]
            [uxbox.ui.header :as ui.h]
            [uxbox.ui.lightbox :as lightbox]
-            ;; [uxbox.ui.activity :refer [timeline]]
-            [uxbox.ui.icons.dashboard :as icons]
-            ;; [uxbox.projects.queries :as q]
-            ;; [uxbox.projects.actions :as actions]
            [uxbox.time :refer [ago]]))

-;; Config
-;; TODO: i18nized names
-(def project-orderings {:project/name "name"
-                        :project/last-updated "date updated"
-                        :project/created "date created"})
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Helpers & Constants
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

-(def project-layouts {:mobile {:name "Mobile"
-                               :id "mobile"
-                               :width 320
-                               :height 480}
-                      :tablet {:name "Tablet"
-                               :id "tablet"
-                               :width 1024
-                               :height 768}
-                      :notebook {:name "Notebook"
-                                 :id "notebook"
-                                 :width 1366
-                                 :height 768}
-                      :desktop {:name "Desktop"
-                                :id "desktop"
-                                :width 1920
-                                :height 1080}})
+;; FIXME rename
+(def +ordering-options+ {:name "name"
+                         :last-updated "date updated"
+                         :created "date created"})

-(def new-project-defaults {:name ""
-                           :width 1920
-                           :height 1080
-                           :layout :desktop})
+(def +layouts+ {:mobile {:name "Mobile"
+                         :id "mobile"
+                         :width 320
+                         :height 480}
+                :tablet {:name "Tablet"
+                         :id "tablet"
+                         :width 1024
+                         :height 768}
+                :notebook {:name "Notebook"
+                           :id "notebook"
+                           :width 1366
+                           :height 768}
+                :desktop {:name "Desktop"
+                          :id "desktop"
+                          :width 1920
+                          :height 1080}})

-(def name->order (into {} (for [[k v] project-orderings] [v k])))
+(def ^:static ^:private
+  +project-defaults+ {:name ""
+                      :width 1920
+                      :height 1080
+                      :layout :desktop})
+
+;; (def name->order (into {} (for [[k v] project-orderings] [v k])))

 ;; Views

@ -52,28 +57,31 @@

 (defn layout-input
  [local layout-id]
-  (let [layout (get-in project-layouts [layout-id])
+  (let [layout (get-in +layouts+ [layout-id])
        id (:id layout)
        name (:name layout)
        width (:width layout)
        height (:height layout)]
    (html
-     [:input
-      {:type "radio"
-       :key id
-       :id id
-       :name "project-layout"
-       :value name
-       :checked (= layout-id (:layout @local))
-       :on-change #(swap! local merge {:layout layout-id :width width :height height})}]
-     [:label {:value (:name @local) :for id} name])))
+     [:div
+      [:input
+       {:type "radio"
+        :key id
+        :id id
+        :name "project-layout"
+        :value name
+        :checked (= layout-id (:layout @local))
+        :on-change #(swap! local merge {:layout layout-id :width width :height height})}]
+      [:label {:value (:name @local) :for id} name]])))

 (defn- layout-selector
  [local]
  (html
   [:div.input-radio.radio-primary
-    (vec (cons :div.input-radio.radio-primary
-               (mapcat #(layout-input local %) (keys project-layouts))))]))
+    (layout-input local :mobile)
+    (layout-input local :tablet)
+    (layout-input local :notebook)
+    (layout-input local :desktop)]))

 (defn- new-project-lightbox-render
  [own]
@ -116,10 +124,15 @@
      (when-not (empty? (str/trim name))
        [:input#project-btn.btn-primary
         {:value "Go go go!"
+          :on-click #(do
+                       (dom/prevent-default %)
+                       (rs/emit! (dp/create-project @local))
+                       (lightbox/close!))
+
          :type "submit"}])]
-     [:a.close
-      {:href "#"
-       :on-click #(lightbox/close!)}
+     [:a.close {:href "#"
+                :on-click #(do (dom/prevent-default %)
+                               (lightbox/close!))}
      i/close]])))

                    ;; (.preventDefault e)
@ -134,7 +147,7 @@
  (util/component
   {:render new-project-lightbox-render
    :name "new-project-lightbox"
-    :mixins [(rum/local new-project-defaults)]}))
+    :mixins [(rum/local +project-defaults+)]}))

 (defmethod lightbox/render-lightbox :new-project
  [_]
@ -144,35 +157,39 @@
 ;; Menu
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

+(def ^:static menu-state
+  (as-> (l/select-keys [:projects]) $
+    (l/focus-atom $ s/state)))
+
 (rum/defc project-sort-selector < rum/reactive
  [sort-order]
-  (let [sort-name (get project-orderings (rum/react sort-order))]
-    [:select.input-select
-     {:on-change #(reset! sort-order (name->order (.-value (.-target %))))
-      :value sort-name}
-     (for [order (keys project-orderings)
-           :let [name (get project-orderings order)]]
-       [:option {:key name} name])]))
-
-(rum/defc project-count < rum/static
-  [n]
-  [:span.dashboard-projects n " projects"])
+  nil)
+  ;; (let [sort-name (get project-orderings (rum/react sort-order))]
+  ;;   [:select.input-select
+  ;;    {:on-change #(reset! sort-order (name->order (.-value (.-target %))))
+  ;;     :value sort-name}
+  ;;    (for [order (keys project-orderings)
+  ;;          :let [name (get project-orderings order)]]
+  ;;      [:option {:key name} name])]))

 (defn menu-render
  []
-  (html
-   [:section#dashboard-bar.dashboard-bar
-    [:div.dashboard-info
-     (project-count 0)
-     [:span "Sort by"]
-     (project-sort-selector (atom :name))]
-    [:div.dashboard-search
-     icons/search]]))
+  (let [state (rum/react menu-state)
+        pcount (count (:projects state))]
+    (html
+     [:section#dashboard-bar.dashboard-bar
+      [:div.dashboard-info
+       [:span.dashboard-projects pcount " projects"]
+       [:span "Sort by"]
+       #_(project-sort-selector (atom :name))]
+      [:div.dashboard-search
+       icons/search]])))

 (def menu
  (util/component
   {:render menu-render
-    :name "dashboard-menu"}))
+    :name "dashboard-menu"
+    :mixins [rum/reactive]}))

 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Project Item
@ -200,7 +217,7 @@
                    %)}
      icons/trash]]]))

-(def project
+(def project-item
  (util/component
   {:render project-render
    :name "project"
@ -217,18 +234,26 @@
 ;; Grid
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

+(def ^:static grid-state
+  (as-> (l/select-keys [:projects :projects-by-id]) $
+    (l/focus-atom $ s/state)))
+
 (defn grid-render
  [own]
  (letfn [(on-click [e]
            (dom/prevent-default e)
            (lightbox/set! :new-project))]
-    (html
-     [:section.dashboard-grid
-      [:h2 "Your projects"]
-      [:div.dashboard-grid-content
-       [:div.dashboard-grid-content
-        [:div.grid-item.add-project {:on-click on-click}
-         [:span "+ New project"]]]]])))
+    (let [state (rum/react grid-state)]
+      (html
+       [:section.dashboard-grid
+        [:h2 "Your projects"]
+        [:div.dashboard-grid-content
+         [:div.dashboard-grid-content
+          [:div.grid-item.add-project {:on-click on-click}
+           [:span "+ New project"]]
+          (for [pid (:projects state)]
+            (let [item (get-in state [:projects-by-id pid])]
+              (rum/with-key (project-item item) (str pid))))]]]))))

 (def grid
  (util/component
@ -247,17 +272,9 @@
    (ui.h/header)
    [:section.dashboard-content
     (menu)
-     (grid)]
-    #_(timeline conn)]))
-
+     (grid)]]))

 (def dashboard
  (util/component {:render dashboard-render
-                   :mixins [rum/reactive]
+                   :mixins [rum/static]
                   :name "dashboard"}))
-
-;; (rum/defc dashboard
-;;   [conn]
-;;   [:div
-;;    (dashboard* conn)
-;;    #_(lightbox conn)])
--- a/frontend/uxbox/ui/header.cljs
+++ b/frontend/uxbox/ui/header.cljs
@ -20,6 +20,3 @@
   {:render header-render
    :name "header"
    :mixins [rum/static]}))
-
-
-
--- a/frontend/uxbox/ui/icons.cljs
+++ b/frontend/uxbox/ui/icons.cljs
@ -24,7 +24,8 @@
       "m159.4607 552.36219-52.57675 74.05348 0 41.86098-45.753774 21.76184-0.412151-0.19478 0 17.20283 0 255.89707 178.379885 84.27239 10.90209 5.1462 10.89926-5.1462 178.38271-84.27239 0-273.0999-0.33593 0.15808-45.76789-21.76749 0-41.81863-1.60059-2.25268-50.97899-71.8008-52.57958 74.05348 0 0.0734-38.25894-53.88377-37.96254 53.4688-1.35782-1.91111-50.97899-71.8008zm9.3015 43.01555 20.33627 28.64128-59.27553 0 20.09914-28.30535 18.84012-0.33593zm181.13787 0 20.33626 28.64128-59.27553 0 20.09632-28.30535 18.84295-0.33593zm-90.83852 20.24593 20.33626 28.63846-59.2727 0 20.09631-28.30535 18.84013-0.33311zm-134.85903 22.82891 28.11339 0 0 94.66356-28.11339-13.2818 0-81.38176zm42.54695 0 27.97224 0-0.003 114.69495-27.97224-13.21405 0.003-101.4809zm138.58809 0 28.11622 0-0.003 101.38492-28.11057 13.27898-0.003-114.6639zm42.54695 0 27.97224 0 0 81.3507-27.97224 13.21406 0-94.56476zm-133.38265 20.24311 28.11339 0 0 117.07749-28.11339-13.2818 0-103.79569zm42.54695 0 27.97225 0-0.003 104.02152-27.97224 13.21688 0.003-117.2384zm136.12651 31.11133 24.75131 10.12014-24.75131 11.6925 0-21.81264zm-286.29137 0.0367 0 21.80982-24.748483-11.6925 24.748483-10.11732zm-24.367392 34.4113 156.581352 73.96879 0 224.87888-156.581352-73.96877 0-224.8789zm334.964042 0 0 224.8789-156.58134 73.96877 0-224.87888 156.58134-73.96879z"}]]])

 (def toggle
-  [:svg
+  (html
+   [:svg
    {:viewBox "0 0 500 500"
     :height "500"
     :width "500"}
@ -32,10 +33,11 @@
     {:transform "translate(0,-552.36216)"}
     [:path
      {:d
-       "M242.73663 599.38868C163.57806 601.0776 88.346101 653.99887 60.111 727.95837c-8.390852 20.57554-12.24129 42.66061-15.117359 64.45053-4.803234 8.88466-16.33794 5.54629-24.470319 6.43033C13.682384 798.91173 6.840036 798.83905-9.9999995e-7 798.99372 25.63356 832.47115 51.422449 865.84222 78.249131 898.37694c26.307739-32.91176 52.665089-65.76455 78.102589-99.34039-16.06651-0.36539-32.13758-0.0441-48.20603-0.18485 0.29693-58.54979 41.79772-113.77646 97.616-131.0965 41.18685-13.76752 88.1145-6.40366 123.9888 17.75689 4.01222-0.61662 6.93149-7.42265 10.38107-10.53887 9.65474-12.2476 19.62255-24.45846 28.60936-37.07428-34.7249-25.56995-77.57435-39.35496-120.55113-38.53281-1.81793-0.0145-3.6354-0.006-5.45316 0.0225zm170.60569 117.51909c-24.0119 29.3282-47.72899 58.93963-70.99027 88.83533 15.77603 0.57194 31.70034 0.36368 47.53423 0.7304 1.59863 35.02643-14.72674 69.17811-38.46406 94.213-29.08175 30.109-71.7312 46.59472-113.53911 42.72692-25.16607-1.4966-49.21373-11.48724-70.15843-24.89653-12.52259 15.82689-25.56921 31.55174-37.1667 48.2173 36.91833 28.00994 83.87484 41.27591 130.05674 38.23121 69.0409-1.8477 134.5274-44.51738 167.50906-105.00819 14.61985-25.97408 22.86126-55.03915 24.94387-84.7032 1.04015-6.42585 7.52749-10.31884 13.78912-9.20721 11.04527-0.30586 22.09669-0.11472 33.14323-0.33751-25.59796-33.40251-51.66435-66.44474-78.10936-99.18034-2.84944 3.45961-5.69888 6.91921-8.54832 10.37882z"}]]])
+       "M242.73663 599.38868C163.57806 601.0776 88.346101 653.99887 60.111 727.95837c-8.390852 20.57554-12.24129 42.66061-15.117359 64.45053-4.803234 8.88466-16.33794 5.54629-24.470319 6.43033C13.682384 798.91173 6.840036 798.83905-9.9999995e-7 798.99372 25.63356 832.47115 51.422449 865.84222 78.249131 898.37694c26.307739-32.91176 52.665089-65.76455 78.102589-99.34039-16.06651-0.36539-32.13758-0.0441-48.20603-0.18485 0.29693-58.54979 41.79772-113.77646 97.616-131.0965 41.18685-13.76752 88.1145-6.40366 123.9888 17.75689 4.01222-0.61662 6.93149-7.42265 10.38107-10.53887 9.65474-12.2476 19.62255-24.45846 28.60936-37.07428-34.7249-25.56995-77.57435-39.35496-120.55113-38.53281-1.81793-0.0145-3.6354-0.006-5.45316 0.0225zm170.60569 117.51909c-24.0119 29.3282-47.72899 58.93963-70.99027 88.83533 15.77603 0.57194 31.70034 0.36368 47.53423 0.7304 1.59863 35.02643-14.72674 69.17811-38.46406 94.213-29.08175 30.109-71.7312 46.59472-113.53911 42.72692-25.16607-1.4966-49.21373-11.48724-70.15843-24.89653-12.52259 15.82689-25.56921 31.55174-37.1667 48.2173 36.91833 28.00994 83.87484 41.27591 130.05674 38.23121 69.0409-1.8477 134.5274-44.51738 167.50906-105.00819 14.61985-25.97408 22.86126-55.03915 24.94387-84.7032 1.04015-6.42585 7.52749-10.31884 13.78912-9.20721 11.04527-0.30586 22.09669-0.11472 33.14323-0.33751-25.59796-33.40251-51.66435-66.44474-78.10936-99.18034-2.84944 3.45961-5.69888 6.91921-8.54832 10.37882z"}]]]))

 (def chat
-  [:svg#svg2
+  (html
+   [:svg#svg2
    {:viewBox "0 0 500.00001 500.00001"
     :height "500"
     :width "500"}
@ -43,10 +45,11 @@
     {:transform "translate(0,-552.36216)"}
     [:path
      {:d
-       "M245.37443 560.1539C172.43183 561.04855 97.905533 588.76783 48.423952 643.62506 15.67037 679.30951-3.7043597 728.21528 0.59304145 776.92522 4.0123162 833.37045 37.0557 884.73674 81.104903 918.73698c8.098235 6.39662 16.538249 12.35111 25.158027 18.0212 0.95406 31.91859-0.82752 64.10242 2.36912 95.85342 5.26909 12.8142 23.80421 15.9744 33.66354 6.5707 26.23006-21.6325 52.72651-42.96164 78.96925-64.59768 24.56188 2.49228 49.46518 1.12 73.87321-2.21543 68.69794-11.16255 134.94494-48.38561 173.49703-107.33344 26.15943-39.43305 37.9981-89.1593 27.62356-135.76607C486.16938 681.36056 455.05913 639.8301 415.67534 611.62635 366.73341 575.99591 305.60292 559.0112 245.37443 560.1539Zm5.61963 42.2586c60.35202 0.21034 122.75637 21.19128 165.3291 65.52883 25.94218 26.56891 42.87607 63.05006 40.95847 100.32047-0.7981 42.23442-23.44831 81.85956-54.77729 109.38195-44.67518 39.7667-105.84101 58.81146-164.93222 55.55457-10.1878 0.36226-20.63735-2.84553-30.55684-1.60842-19.30569 15.7333-38.62146 31.45426-57.90097 47.21962-0.49451-22.26332-0.39985-44.53369-0.63345-66.80017C104.31499 889.73884 64.261664 853.73701 48.832688 805.66642 35.513029 765.19011 43.174207 718.30247 69.658619 684.4439 111.31831 628.35156 182.93963 602.05496 250.99406 602.4125Z"}]]])
+       "M245.37443 560.1539C172.43183 561.04855 97.905533 588.76783 48.423952 643.62506 15.67037 679.30951-3.7043597 728.21528 0.59304145 776.92522 4.0123162 833.37045 37.0557 884.73674 81.104903 918.73698c8.098235 6.39662 16.538249 12.35111 25.158027 18.0212 0.95406 31.91859-0.82752 64.10242 2.36912 95.85342 5.26909 12.8142 23.80421 15.9744 33.66354 6.5707 26.23006-21.6325 52.72651-42.96164 78.96925-64.59768 24.56188 2.49228 49.46518 1.12 73.87321-2.21543 68.69794-11.16255 134.94494-48.38561 173.49703-107.33344 26.15943-39.43305 37.9981-89.1593 27.62356-135.76607C486.16938 681.36056 455.05913 639.8301 415.67534 611.62635 366.73341 575.99591 305.60292 559.0112 245.37443 560.1539Zm5.61963 42.2586c60.35202 0.21034 122.75637 21.19128 165.3291 65.52883 25.94218 26.56891 42.87607 63.05006 40.95847 100.32047-0.7981 42.23442-23.44831 81.85956-54.77729 109.38195-44.67518 39.7667-105.84101 58.81146-164.93222 55.55457-10.1878 0.36226-20.63735-2.84553-30.55684-1.60842-19.30569 15.7333-38.62146 31.45426-57.90097 47.21962-0.49451-22.26332-0.39985-44.53369-0.63345-66.80017C104.31499 889.73884 64.261664 853.73701 48.832688 805.66642 35.513029 765.19011 43.174207 718.30247 69.658619 684.4439 111.31831 628.35156 182.93963 602.05496 250.99406 602.4125Z"}]]]))

 (def close
-  [:svg
+  (html
+   [:svg
    {:viewBox "0 0 500 500"
     :height "500"
     :width "500"}
@ -54,7 +57,7 @@
     {:transform "translate(0,-552.36216)"}
     [:path
      {:d
-       "m254.83206 1051.8787c-2.65759 0.6446-7.00641 0.6446-9.66407 0-5.77272-1.4-13.14681-8.2641-14.84551-13.8188-0.64086-2.0956-1.13697-50.68291-1.10251-107.97192 0.0345-57.28903-0.56181-104.78648-1.32503-105.5499-0.76322-0.76342-48.24831-1.35984-105.52242-1.32537-57.274094 0.0345-105.848829-0.46179-107.943842-1.10281-2.095015-0.641-5.7968829-3.15684-8.2263775-5.59077-8.2697477-8.28472-8.2697131-19.89906 0-28.18382 2.4299131-2.4335 6.1313615-4.94977 8.2263775-5.59077 2.095016-0.64101 50.66975-1.13727 107.943842-1.1028 57.27411 0.0345 104.7592-0.56195 105.52242-1.32538 0.76322-0.76342 1.35948-48.26087 1.32503-105.54989-0.0345-57.28901 0.46168-105.87639 1.10252-107.97196 0.64083-2.09555 3.15602-5.79839 5.58931-8.22852 8.28279-8.27168 19.89389-8.27186 28.17649 0 2.43287 2.43055 4.94848 6.13297 5.58931 8.22852 0.64085 2.09557 1.13698 50.68295 1.10252 107.97196-0.0345 57.28901 0.56181 104.78647 1.32503 105.54989 0.76322 0.76343 48.24831 1.35984 105.52241 1.32539 57.2741-0.0345 105.84882 0.46176 107.94383 1.10278 2.09504 0.64101 5.79694 3.1569 8.22638 5.59077 8.26952 8.28494 8.26976 19.8991 0 28.18383-2.43138 2.43202-6.13137 4.94974-8.22634 5.5908-2.09503 0.64098-50.66977 1.13725-107.94386 1.10278-57.27411-0.0345-104.7592 0.56195-105.52242 1.32537-0.76322 0.76342-1.35948 48.26087-1.32504 105.54989 0.0345 57.28902-0.46166 105.87643-1.10248 107.97203-1.69867 5.5546-9.07281 12.4187-14.84557 13.8187z"}]]])
+       "m254.83206 1051.8787c-2.65759 0.6446-7.00641 0.6446-9.66407 0-5.77272-1.4-13.14681-8.2641-14.84551-13.8188-0.64086-2.0956-1.13697-50.68291-1.10251-107.97192 0.0345-57.28903-0.56181-104.78648-1.32503-105.5499-0.76322-0.76342-48.24831-1.35984-105.52242-1.32537-57.274094 0.0345-105.848829-0.46179-107.943842-1.10281-2.095015-0.641-5.7968829-3.15684-8.2263775-5.59077-8.2697477-8.28472-8.2697131-19.89906 0-28.18382 2.4299131-2.4335 6.1313615-4.94977 8.2263775-5.59077 2.095016-0.64101 50.66975-1.13727 107.943842-1.1028 57.27411 0.0345 104.7592-0.56195 105.52242-1.32538 0.76322-0.76342 1.35948-48.26087 1.32503-105.54989-0.0345-57.28901 0.46168-105.87639 1.10252-107.97196 0.64083-2.09555 3.15602-5.79839 5.58931-8.22852 8.28279-8.27168 19.89389-8.27186 28.17649 0 2.43287 2.43055 4.94848 6.13297 5.58931 8.22852 0.64085 2.09557 1.13698 50.68295 1.10252 107.97196-0.0345 57.28901 0.56181 104.78647 1.32503 105.54989 0.76322 0.76343 48.24831 1.35984 105.52241 1.32539 57.2741-0.0345 105.84882 0.46176 107.94383 1.10278 2.09504 0.64101 5.79694 3.1569 8.22638 5.59077 8.26952 8.28494 8.26976 19.8991 0 28.18383-2.43138 2.43202-6.13137 4.94974-8.22634 5.5908-2.09503 0.64098-50.66977 1.13725-107.94386 1.10278-57.27411-0.0345-104.7592 0.56195-105.52242 1.32537-0.76322 0.76342-1.35948 48.26087-1.32504 105.54989 0.0345 57.28902-0.46166 105.87643-1.10248 107.97203-1.69867 5.5546-9.07281 12.4187-14.84557 13.8187z"}]]]))

 (def page
  (html
--- a/frontend/uxbox/ui/users.cljs
+++ b/frontend/uxbox/ui/users.cljs
@ -5,8 +5,6 @@
            [uxbox.router :as r]
            [uxbox.state :as s]
            [uxbox.util :as util]
-            ;; [uxbox.users.queries :as q]
-            ;; [uxbox.ui.mixins :as mx]
            [uxbox.ui.icons :as icons]
            [uxbox.ui.navigation :as nav]))

--- a/profiles.clj
+++ b/profiles.clj
@ -41,6 +41,7 @@
   :dependencies [[org.clojure/clojurescript "1.7.189"]
                  [funcool/cuerdas "0.7.0"]
                  [rum "0.6.0"]
+                  [bouncer "0.3.3"]
                  [funcool/promesa "0.6.0"]
                  [funcool/beicon "0.3.0"]
                  [funcool/cats "1.2.0"]