feat(frontend): more work on refactoring components

frontend/deps.edn

@@ -20,7 +20,7 @@
  :aliases
  {:dev {:extra-deps {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
                      com.bhauman/rebel-readline {:mvn/version "0.1.4"}
-                     com.bhauman/figwheel-main {:mvn/version "0.2.1"}
+                     com.bhauman/figwheel-main {:mvn/version "0.2.3"}
                      org.clojure/tools.namespace {:mvn/version "0.3.0"}}
         :extra-paths ["test"]}
 

frontend/src/uxbox/main.cljs

@@ -22,6 +22,8 @@
    [uxbox.util.router :as rt]
    [uxbox.util.timers :as ts]))
 
+
+
 ;; --- i18n
 
 (declare reinit)
@@ -84,8 +86,3 @@
 (defn ^:after-load after-load
   []
   (reinit))
-
-
-
-
-

frontend/src/uxbox/main/ui/dashboard/header.cljs

@@ -20,7 +20,7 @@
 
 (mx/defc header-link
   [{:keys [section content] :as props}]
-  (let [on-click #(st/emit! (rt/navigate section))]
+  (let [on-click #(st/emit! (rt/nav section))]
     [:a {:on-click on-click} content]))
 
 (mf/def header

frontend/src/uxbox/main/ui/settings/header.cljs

@@ -6,45 +6,51 @@
 ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.settings.header
-  (:require [potok.core :as ptk]
+  (:require
    [lentes.core :as l]
-            [uxbox.util.i18n :refer [tr]]
+   [rumext.alpha :as mf]
-            [uxbox.util.router :as r]
+   [uxbox.builtins.icons :as i]
-            [uxbox.main.store :as st]
    [uxbox.main.data.auth :as da]
    [uxbox.main.data.projects :as dp]
+   [uxbox.main.store :as st]
    [uxbox.main.ui.navigation :as nav]
-            [uxbox.builtins.icons :as i]
    [uxbox.main.ui.users :refer [user]]
-            [rumext.core :as mx :include-macros true]))
+   [uxbox.util.i18n :refer [tr]]
+   [uxbox.util.router :as rt]))
 
 (def ^:private section-ref
   (-> (l/in [:route :id])
       (l/derive st/state)))
 
-(mx/defc header-link
+(mf/defc header-link
-  [section content]
+  [{:keys [section content] :as props}]
-  (let [link (r/route-for section)]
+  (let [on-click #(st/emit! (rt/nav section))]
-    [:a {:href (str "/#" link)} content]))
+    [:a {:on-click on-click} content]))
 
-(mx/defc header
+(mf/def header
-  {:mixins [mx/static mx/reactive]}
+  :mixins [mf/static mf/reactive]
-  []
+  :render
-  (let [section (mx/react section-ref)
+  (fn [own props]
+    (let [section (mf/react section-ref)
           profile? (= section :settings/profile)
           password? (= section :settings/password)
           notifications? (= section :settings/notifications)]
       [:header#main-bar.main-bar
        [:div.main-logo
-      (header-link :dashboard/projects i/logo)]
+        [:& header-link {:section :dashboard/projects
+                         :content i/logo}]]
        [:ul.main-nav
         [:li {:class (when profile? "current")}
-       (header-link :settings/profile (tr "settings.profile"))]
+         [:& header-link {:setion :settings/profile
+                          :content (tr "settings.profile")}]]
         [:li {:class (when password? "current")}
-       (header-link :settings/password (tr "settings.password"))]
+         [:& header-link {:section :settings/password
+                          :content (tr "settings.password")}]]
         [:li {:class (when notifications? "current")}
-       (header-link :settings/notifications (tr "settings.notifications"))]
+         [:& header-link {:section :settings/notifications
+                          :content (tr "settings.notifications")}]]
         [:li {:on-click #(st/emit! (da/logout))}
-       (header-link :auth/login (tr "settings.exit"))]]
+         [:& header-link {:section :auth/login
-     (user)]))
+                          :content (tr "settings.exit")}]]]
+       (user)])))
 

frontend/src/uxbox/main/ui/users.cljs

@@ -9,7 +9,7 @@
    [cuerdas.core :as str]
    [lentes.core :as l]
    [potok.core :as ptk]
-   [rumext.core :as mx :include-macros true]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.auth :as da]
    [uxbox.main.data.lightbox :as udl]
@@ -20,17 +20,16 @@
 
 ;; --- User Menu
 
-(mx/defc user-menu
+(mf/defc user-menu
-  {:mixins [mx/static]}
+  [props]
-  [open?]
+  [:ul.dropdown #_{:class (when-not open? "hide")}
-  [:ul.dropdown {:class (when-not open? "hide")}
+   [:li {:on-click #(st/emit! (rt/nav :settings/profile))}
-   [:li {:on-click #(st/emit! (rt/navigate :settings/profile))}
     i/user
     [:span (tr "ds.user.profile")]]
-   [:li {:on-click #(st/emit! (rt/navigate :settings/password))}
+   [:li {:on-click #(st/emit! (rt/nav :settings/password))}
     i/lock
     [:span (tr "ds.user.password")]]
-   [:li {:on-click #(st/emit! (rt/navigate :settings/notifications))}
+   [:li {:on-click #(st/emit! (rt/nav :settings/notifications))}
     i/mail
     [:span (tr "ds.user.notifications")]]
    [:li {:on-click #(st/emit! (da/logout))}
@@ -43,17 +42,19 @@
   (-> (l/key :profile)
       (l/derive st/state)))
 
-(mx/defcs user
+(mf/def user
-  {:mixins [mx/static mx/reactive (mx/local {:open false})]}
+  :mixins [mf/static mf/reactive (mf/local false)]
-  [own]
+
-  (let [profile (mx/react profile-ref)
+  :render
-        local (::mx/local own)
+  (fn [{:keys [::mf/local] :as own} props]
+    (let [profile (mf/react profile-ref)
           photo (if (str/empty? (:photo profile ""))
                   "/images/avatar.jpg"
                   (:photo profile))]
       [:div.user-zone {:on-click #(st/emit! (rt/navigate :settings/profile))
-                     :on-mouse-enter #(swap! local assoc :open true)
+                       :on-mouse-enter #(reset! local true)
-                     :on-mouse-leave #(swap! local assoc :open false)}
+                       :on-mouse-leave #(reset! local false)}
        [:span (:fullname profile)]
        [:img {:src photo}]
-     (user-menu (:open @local))]))
+       (when @local
+         [:& user-menu])])))

frontend/src/uxbox/main/ui/workspace/canvas.cljs

@@ -278,5 +278,3 @@
           (when (contains? flags :ruler)
             (ruler zoom))
           (selrect)]]))))
-
-

frontend/src/uxbox/main/ui/workspace/clipboard.cljs

@@ -6,23 +6,27 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.clipboard
-  (:require [lentes.core :as l]
+  (:require
+   [lentes.core :as l]
    [potok.core :as ptk]
-            [rumext.core :as mx :include-macros true]
+   [rumext.alpha :as mf]
-            [uxbox.main.store :as st]
+   [uxbox.builtins.icons :as i]
    [uxbox.main.data.lightbox :as udl]
    [uxbox.main.data.workspace :as udw]
-            [uxbox.builtins.icons :as i]
+   [uxbox.main.store :as st]
    [uxbox.main.ui.lightbox :as lbx]
    [uxbox.util.dom :as dom]
    [uxbox.util.time :as dt]))
 
-(def ^:private clipboard-ref
+(mf/def clipboard-dialog
-  (-> (l/key :clipboard)
+  :mixins [mf/reactive]
-      (l/derive st/state)))
+  :init
+  (fn [own props]
+    (assoc own ::clipboard (-> (l/key :clipboard)
+                               (l/derive st/state))))
 
-(mx/defc clipboard-dialog
+  :render
-  {:mixins [mx/static mx/reactive]}
+  (fn [own props]
     []
     (letfn [(on-paste [item]
               (st/emit! (udw/paste-from-clipboard (:id item)))
@@ -32,13 +36,12 @@
               (udl/close!))]
       [:div.lightbox-body.clipboard
        [:div.clipboard-list
-      (for [item (mx/react clipboard-ref)]
+        (for [item (mf/react (::clipboard own))]
-        [:div.clipboard-item
+          [:div.clipboard-item {:key (str (:id item))
-         {:key (str (:id item))
                                 :on-click (partial on-paste item)}
            [:span.clipboard-icon i/box]
-         [:span {} (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
+           [:span (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
-     [:a.close {:href "#" :on-click on-close} i/close]]))
+       [:a.close {:href "#" :on-click on-close} i/close]])))
 
 (defmethod lbx/render-lightbox :clipboard
   [_]

frontend/src/uxbox/main/ui/workspace/grid.cljs

@@ -6,20 +6,22 @@
 ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.grid
-  (:require [cuerdas.core :as str]
+  (:require
+   [cuerdas.core :as str]
+   [rumext.alpha :as mf]
    [uxbox.main.constants :as c]
-            [uxbox.main.refs :as refs]
+   [uxbox.main.refs :as refs]))
-            [rumext.core :as mx :include-macros true]))
 
 ;; --- Grid (Component)
 
 (declare vertical-line)
 (declare horizontal-line)
 
-(mx/defcs grid
+(mf/def grid
-  {:mixins [mx/static mx/reactive]}
+  :mixins [mf/static mf/reactive]
-  [own]
+  :render
-  (let [options (:metadata (mx/react refs/selected-page))
+  (fn [own props]
+    (let [options (:metadata (mf/react refs/selected-page))
           color (:grid-color options "#cccccc")
           width c/viewport-width
           height c/viewport-height
@@ -35,7 +37,7 @@
                  (reduce (partial vertical-line height) $ x-ticks)
                  (reduce (partial horizontal-line width) $ y-ticks))]
       [:g.grid {:style {:pointer-events "none"}}
-     [:path {:d (str/join " " path) :stroke color :opacity "0.3"}]]))
+       [:path {:d (str/join " " path) :stroke color :opacity "0.3"}]])))
 
 ;; --- Helpers