feat(frontend): add many adaptations to rumext breaking changes

This commit is contained in:
Andrey Antukh 2019-07-18 12:30:20 +02:00
parent 9ddd9f317d
commit 321c8d14e1
14 changed files with 149 additions and 174 deletions

View file

@ -68,7 +68,7 @@
(defn- on-navigate (defn- on-navigate
[router path] [router path]
(let [match (rt/match router path)] (let [match (rt/match router path)]
(prn "on-navigate" path match) ;; (prn "on-navigate" path match)
(cond (cond
(and (= path "") (nil? match)) (and (= path "") (nil? match))
(html-history/set-path! "/dashboard/projects") (html-history/set-path! "/dashboard/projects")

View file

@ -5,7 +5,7 @@
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz> ;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.data.workspace (ns uxbox.main.data.workspace
(:require [cljs.spec.alpha :as s] (:require
[beicon.core :as rx] [beicon.core :as rx]
[potok.core :as ptk] [potok.core :as ptk]
[uxbox.main.store :as st] [uxbox.main.store :as st]

View file

@ -31,12 +31,6 @@
[uxbox.util.router :as rt] [uxbox.util.router :as rt]
[uxbox.util.timers :as ts])) [uxbox.util.timers :as ts]))
;; --- Refs
(def route-ref
(-> (l/key :route)
(l/derive st/state)))
;; --- Routes ;; --- Routes
(def routes (def routes
@ -59,10 +53,29 @@
;; --- Main App (Component) ;; --- Main App (Component)
(mx/defc app (defn- parse-dashboard-params
{:mixins [mx/reactive]} [route section]
[] (let [{:keys [id type]} (get-in route [:params :query])
(let [route (mx/react route-ref)] id (cond
(str/digits? id) (parse-int id)
(uuid-str? id) (uuid id)
:else nil)
type (when (str/alpha? type) (keyword type))]
{:section section
:id id
:type type}))
(mx/def app
:mixins [mx/reactive]
:init
(fn [own props]
(assoc own ::route-ref (l/derive (l/key :route) st/state)))
:render
(fn [own props]
(let [route (mx/react (::route-ref own))]
(case (get-in route [:data :name]) (case (get-in route [:data :name])
:auth/login (auth/login-page) :auth/login (auth/login-page)
:auth/register (auth/register-page) :auth/register (auth/register-page)
@ -72,43 +85,21 @@
(let [token (get-in route [:params :path :token])] (let [token (get-in route [:params :path :token])]
(auth/recovery-page token)) (auth/recovery-page token))
:dashboard/projects (dashboard/projects-page)
:settings/profile (settings/profile-page) :settings/profile (settings/profile-page)
:settings/password (settings/password-page) :settings/password (settings/password-page)
:settings/notifications (settings/notifications-page) :settings/notifications (settings/notifications-page)
;; ;; :dashboard/elements (dashboard/elements-page)
:dashboard/icons
(let [{:keys [id type]} (get-in route [:params :query])
id (cond
(str/digits? id) (parse-int id)
(uuid-str? id) (uuid id)
:else nil)
type (when (str/alpha? type) (keyword type))]
(dashboard/icons-page type id))
:dashboard/images
(let [{:keys [id type]} (get-in route [:params :query])
id (cond
(str/digits? id) (parse-int id)
(uuid-str? id) (uuid id)
:else nil)
type (when (str/alpha? type) (keyword type))]
(dashboard/images-page type id))
:dashboard/colors
(let [{:keys [id type]} (get-in route [:params :query])
type (when (str/alpha? type) (keyword type))
id (cond
(str/digits? id) (parse-int id)
(uuid-str? id) (uuid id)
:else nil)]
(dashboard/colors-page type id))
:dashboard/projects (dashboard/dashboard {:section :projects})
:dashboard/icons (-> (parse-dashboard-params route :icons)
(dashboard/dashboard))
:dashboard/images (-> (parse-dashboard-params route :images)
(dashboard/dashboard))
:dashboard/colors (-> (parse-dashboard-params route :colors)
(dashboard/dashboard))
:workspace/page :workspace/page
(let [projectid (uuid (get-in route [:params :path :project])) (let [project (uuid (get-in route [:params :path :project]))
pageid (uuid (get-in route [:params :path :page]))] page (uuid (get-in route [:params :path :page]))]
(workspace projectid pageid)) (workspace {:project project :page page}))
nil nil
))) ))))

View file

@ -89,7 +89,7 @@
(mx/defc login-page (mx/defc login-page
{:mixins [mx/static (fm/clear-mixin st/store :login)] {:mixins [mx/static (fm/clear-mixin st/store :login)]
:will-mount (fn [own] :init (fn [own]
(when @st/auth-ref (when @st/auth-ref
(st/emit! (rt/navigate :dashboard/projects))) (st/emit! (rt/navigate :dashboard/projects)))
own)} own)}

View file

@ -2,22 +2,23 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;; ;;
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.ui.auth.recovery (ns uxbox.main.ui.auth.recovery
(:require [cljs.spec.alpha :as s :include-macros true] (:require
[lentes.core :as l] [cljs.spec.alpha :as s :include-macros true]
[cuerdas.core :as str] [cuerdas.core :as str]
[lentes.core :as l]
[rumext.core :as mx :include-macros true]
[uxbox.builtins.icons :as i] [uxbox.builtins.icons :as i]
[uxbox.main.store :as st]
[uxbox.main.data.auth :as uda] [uxbox.main.data.auth :as uda]
[uxbox.main.store :as st]
[uxbox.main.ui.messages :refer [messages-widget]] [uxbox.main.ui.messages :refer [messages-widget]]
[uxbox.main.ui.navigation :as nav] [uxbox.main.ui.navigation :as nav]
[uxbox.util.i18n :refer (tr)]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.util.forms :as fm] [uxbox.util.forms :as fm]
[rumext.core :as mx :include-macros true] [uxbox.util.i18n :refer (tr)]
[uxbox.util.router :as rt])) [uxbox.util.router :as rt]))
(def form-data (fm/focus-data :recovery st/state)) (def form-data (fm/focus-data :recovery st/state))
@ -64,15 +65,15 @@
;; --- Recovery Page ;; --- Recovery Page
(defn- recovery-page-will-mount (defn- recovery-page-init
[own] [own]
(let [[token] (:rum/args own)] (let [[token] (::mx/args own)]
(st/emit! (uda/validate-recovery-token token)) (st/emit! (uda/validate-recovery-token token))
own)) own))
(mx/defc recovery-page (mx/defc recovery-page
{:mixins [mx/static (fm/clear-mixin st/store :recovery)] {:mixins [mx/static (fm/clear-mixin st/store :recovery)]
:will-mount recovery-page-will-mount} :init recovery-page-init}
[token] [token]
[:div.login [:div.login
[:div.login-body [:div.login-body

View file

@ -102,7 +102,7 @@
(mx/defcs colorpicker (mx/defcs colorpicker
{:mixins [mx/static (mx/local)]} {:mixins [mx/static (mx/local)]}
[{:keys [rum/local] :as own} & {:keys [value on-change theme] [{:keys [::mx/local] :as own} & {:keys [value on-change theme]
:or {value "#d4edfb" theme :default}}] :or {value "#d4edfb" theme :default}}]
(let [value-rgb (color/hex->rgb value) (let [value-rgb (color/hex->rgb value)
classes (case theme classes (case theme

View file

@ -33,7 +33,7 @@
(when (dom/equals? parent current) (when (dom/equals? parent current)
(udl/close!)))) (udl/close!))))
(defn- lightbox-will-mount (defn- lightbox-init
[own] [own]
(let [key (events/listen js/document (let [key (events/listen js/document
EventType.KEYDOWN EventType.KEYDOWN
@ -47,7 +47,7 @@
(mx/defcs lightbox (mx/defcs lightbox
{:mixins [mx/reactive] {:mixins [mx/reactive]
:will-mount lightbox-will-mount :init lightbox-init
:will-unmount lightbox-will-umount} :will-unmount lightbox-will-umount}
[own] [own]
(let [data (mx/react lightbox-ref) (let [data (mx/react lightbox-ref)

View file

@ -31,10 +31,10 @@
(mx/defcs image-component (mx/defcs image-component
{:mixins [mx/static mx/reactive] {:mixins [mx/static mx/reactive]
:will-mount (fn [own] :init (fn [own]
;; TODO: maybe do it conditionally ;; TODO: maybe do it conditionally
;; (only fetch when it's not fetched) ;; (only fetch when it's not fetched)
(when-let [id (-> own :rum/args first :image)] (when-let [id (-> own ::mx/props first :image)]
(st/emit! (udi/fetch-image id))) (st/emit! (udi/fetch-image id)))
own)} own)}
[own {:keys [id image] :as shape}] [own {:keys [id image] :as shape}]

View file

@ -120,7 +120,6 @@
:cy cy}]) :cy cy}])
(mx/defc controls (mx/defc controls
{:mixins [mx/static]}
[{:keys [x1 y1 width height] :as shape} zoom on-mouse-down] [{:keys [x1 y1 width height] :as shape} zoom on-mouse-down]
(let [radius (if (> (max width height) handler-size-threshold) 6.0 4.0)] (let [radius (if (> (max width height) handler-size-threshold) 6.0 4.0)]
[:g.controls [:g.controls
@ -226,7 +225,6 @@
(controls selection zoom on-click))) (controls selection zoom on-click)))
(mx/defc single-selection-handlers (mx/defc single-selection-handlers
{:mixins [mx/static]}
[{:keys [id] :as shape} zoom] [{:keys [id] :as shape} zoom]
(let [on-click #(do (dom/stop-propagation %2) (let [on-click #(do (dom/stop-propagation %2)
(start-resize %1 #{id} shape)) (start-resize %1 #{id} shape))
@ -247,9 +245,10 @@
:stroke-opacity "0.5" :stroke-opacity "0.5"
:fill "transparent"}}]])) :fill "transparent"}}]]))
(mx/defc selection-handlers (mx/def selection-handlers
{:mixins [mx/reactive mx/static]} :mixins [mx/reactive mx/static]
[] :render
(fn [own props]
(let [shapes (mx/react selected-shapes-ref) (let [shapes (mx/react selected-shapes-ref)
modifiers (mx/react selected-modifers-ref) modifiers (mx/react selected-modifers-ref)
;; Edition is a workspace global flag ;; Edition is a workspace global flag
@ -259,6 +258,7 @@
zoom (mx/react refs/selected-zoom) zoom (mx/react refs/selected-zoom)
num (count shapes) num (count shapes)
{:keys [id type] :as shape} (first shapes)] {:keys [id type] :as shape} (first shapes)]
(cond (cond
(zero? num) (zero? num)
nil nil
@ -278,4 +278,4 @@
:else :else
(-> (assoc shape :modifiers (get modifiers id)) (-> (assoc shape :modifiers (get modifiers id))
(single-selection-handlers zoom))))) (single-selection-handlers zoom))))))

View file

@ -106,7 +106,7 @@
(defn- text-shape-edit-did-mount (defn- text-shape-edit-did-mount
[own] [own]
(let [[shape] (:rum/args own) (let [[shape] (::mx/props own)
dom (mx/ref-node own "container")] dom (mx/ref-node own "container")]
(set! (.-textContent dom) (:content shape "")) (set! (.-textContent dom) (:content shape ""))
(.focus dom) (.focus dom)
@ -140,25 +140,15 @@
(defn text-shape-wrapper-did-mount (defn text-shape-wrapper-did-mount
[own] [own]
(let [[shape] (:rum/args own) (let [[shape] (::mx/props own)
dom (mx/ref-node own "fobject") dom (mx/ref-node own "fobject")
html (dom/render-to-html (text-shape-html shape))] html (dom/render-to-html (text-shape-html shape))]
(set! (.-innerHTML dom) html)) (set! (.-innerHTML dom) html))
own) own)
(defn text-shape-wrapper-did-remount
[old own]
(let [[old-shape] (:rum/args old)
[shape] (:rum/args own)]
(when (not= shape old-shape)
(let [dom (mx/ref-node own "fobject")
html (dom/render-to-html (text-shape-html shape))]
(set! (.-innerHTML dom) html)))
own))
(mx/defc text-shape-wrapper (mx/defc text-shape-wrapper
{:did-mount text-shape-wrapper-did-mount {:did-mount text-shape-wrapper-did-mount
:did-remount text-shape-wrapper-did-remount} :key-fn #(pr-str %1)}
[{:keys [id modifiers] :as shape}] [{:keys [id modifiers] :as shape}]
(let [{:keys [displacement resize]} modifiers (let [{:keys [displacement resize]} modifiers
xfmt (cond-> (gmt/matrix) xfmt (cond-> (gmt/matrix)
@ -188,7 +178,7 @@
(mx/defc text-shape (mx/defc text-shape
{:mixins [mx/static] {:mixins [mx/static]
:did-mount text-shape-wrapper-did-mount :did-mount text-shape-wrapper-did-mount
:did-remount text-shape-wrapper-did-remount} :key-fn #(pr-str %1)}
[{:keys [id content modifiers] :as shape}] [{:keys [id content modifiers] :as shape}]
(let [{:keys [displacement resize]} modifiers (let [{:keys [displacement resize]} modifiers
xfmt (cond-> (gmt/matrix) xfmt (cond-> (gmt/matrix)

View file

@ -2,20 +2,21 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;; ;;
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz> ;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.ui.users (ns uxbox.main.ui.users
(:require [cuerdas.core :as str] (:require
[cuerdas.core :as str]
[lentes.core :as l] [lentes.core :as l]
[potok.core :as ptk] [potok.core :as ptk]
[uxbox.main.store :as st] [rumext.core :as mx :include-macros true]
[uxbox.builtins.icons :as i]
[uxbox.main.data.auth :as da] [uxbox.main.data.auth :as da]
[uxbox.main.data.lightbox :as udl] [uxbox.main.data.lightbox :as udl]
[uxbox.builtins.icons :as i] [uxbox.main.store :as st]
[uxbox.main.ui.navigation :as nav] [uxbox.main.ui.navigation :as nav]
[uxbox.util.i18n :refer (tr)] [uxbox.util.i18n :refer (tr)]
[uxbox.util.router :as rt] [uxbox.util.router :as rt]))
[rumext.core :as mx :include-macros true]))
;; --- User Menu ;; --- User Menu
@ -46,7 +47,7 @@
{:mixins [mx/static mx/reactive (mx/local {:open false})]} {:mixins [mx/static mx/reactive (mx/local {:open false})]}
[own] [own]
(let [profile (mx/react profile-ref) (let [profile (mx/react profile-ref)
local (:rum/local own) local (::mx/local own)
photo (if (str/empty? (:photo profile "")) photo (if (str/empty? (:photo profile ""))
"/images/avatar.jpg" "/images/avatar.jpg"
(:photo profile))] (:photo profile))]

View file

@ -39,7 +39,7 @@
(when (dom/equals? parent current) (when (dom/equals? parent current)
(udl/close!)))) (udl/close!))))
(defn- lightbox-will-mount (defn- lightbox-init
[own] [own]
(let [key (events/listen js/document (let [key (events/listen js/document
EventType.KEYDOWN EventType.KEYDOWN
@ -53,7 +53,7 @@
(mx/defcs lightbox (mx/defcs lightbox
{:mixins [mx/reactive] {:mixins [mx/reactive]
:will-mount lightbox-will-mount :init lightbox-init
:will-unmount lightbox-will-umount} :will-unmount lightbox-will-umount}
[own] [own]
(let [data (mx/react lightbox-ref) (let [data (mx/react lightbox-ref)

View file

@ -31,24 +31,16 @@
;; --- Component ;; --- Component
(defn- viewer-page-will-mount (defn- viewer-page-init
[own] [own]
(let [[token] (:rum/args own)] (let [[token] (::mx/args own)]
(st/emit! (dv/initialize token)) (st/emit! (dv/initialize token))
own)) own))
(defn- viewer-page-did-remount
[oldown own]
(let [[old-token] (:rum/args oldown)
[new-token] (:rum/args own)]
(when (not= old-token new-token)
(st/emit! (dv/initialize new-token)))
own))
(mx/defc viewer-page (mx/defc viewer-page
{:mixins [mx/static mx/reactive] {:mixins [mx/static mx/reactive]
:will-mount viewer-page-will-mount :init viewer-page-init
:did-remount viewer-page-did-remount} :key-fn vector}
[token index id] [token index id]
(let [{:keys [project pages flags]} (mx/react state-ref) (let [{:keys [project pages flags]} (mx/react state-ref)
sitemap? (contains? flags :sitemap)] sitemap? (contains? flags :sitemap)]

View file

@ -36,7 +36,7 @@
(defn- interactions-wrapper-did-mount (defn- interactions-wrapper-did-mount
[own] [own]
(let [dom (mx/dom-node own) (let [dom (mx/dom-node own)
shape (first (:rum/args own)) shape (first (::mx/args own))
evnts (itx/build-events shape) evnts (itx/build-events shape)
keys (reduce (fn [acc [evt callback]] keys (reduce (fn [acc [evt callback]]
(conj acc (events/listen dom evt callback))) (conj acc (events/listen dom evt callback)))
@ -81,8 +81,8 @@
(mx/defc image-shape-wrapper (mx/defc image-shape-wrapper
{:mixins [mx/static mx/reactive] {:mixins [mx/static mx/reactive]
:will-mount (fn [own] :init (fn [own]
(when-let [image-id (-> own :rum/args first :image)] (when-let [image-id (-> own ::mx/args first :image)]
(st/emit! (udv/fetch-image image-id))) (st/emit! (udv/fetch-image image-id)))
own)} own)}
[{:keys [image] :as item}] [{:keys [image] :as item}]