feat(frontend): improve profile loading

frontend/src/uxbox/main.cljs

@@ -8,6 +8,7 @@
   (:require
    [rumext.core :as mx :include-macros true]
    [uxbox.main.data.auth :refer [logout]]
+   [uxbox.main.data.users :as udu]
    [uxbox.main.locales.en :as en]
    [uxbox.main.locales.fr :as fr]
    [uxbox.main.store :as st]
@@ -104,6 +105,8 @@
     (st/emit! #(assoc % :router router))
     (add-watch html-history/path ::main #(on-navigate router %4))
 
+    (st/emit! (udu/fetch-profile))
+
     (mx/mount (app) (dom/get-element "app"))
     (mx/mount (lightbox) (dom/get-element "lightbox"))
     (mx/mount (loader) (dom/get-element "loader"))

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

@@ -5,20 +5,26 @@
 ;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.data.users
-  (:require [cljs.spec.alpha :as s]
+  (:require
    [beicon.core :as rx]
+   [cljs.spec.alpha :as s]
    [potok.core :as ptk]
    [uxbox.main.repo :as rp]
-            [uxbox.util.spec :as us]
    [uxbox.util.i18n :refer (tr)]
-            [uxbox.util.messages :as uum]))
+   [uxbox.util.messages :as uum]
+   [uxbox.util.spec :as us]
+   [uxbox.util.storage :refer [storage]]))
 
 ;; --- Profile Fetched
 
 (deftype ProfileFetched [data]
   ptk/UpdateEvent
   (update [this state]
-    (assoc state :profile data)))
+    (assoc state :profile data))
+
+  ptk/EffectEvent
+  (effect [this state stream]
+    (swap! storage assoc :profile data)))
 
 (defn profile-fetched
   [data]

frontend/src/uxbox/main/store.cljs

@@ -10,6 +10,7 @@
             [potok.core :as ptk]
             [uxbox.builtins.colors :as colors]
             [uxbox.util.storage :refer [storage]]))
+
 (enable-console-print!)
 
 (def ^:dynamic *on-error* identity)
@@ -36,10 +37,10 @@
                :images-filter ""}
    :route nil
    :router nil
-   :auth (:auth storage nil)
+   :auth (:auth storage)
+   :profile (:profile storage)
    :clipboard #queue []
    :undo {}
-   :profile nil
    :workspace nil
    :images-collections nil
    :images nil

frontend/src/uxbox/main/ui.cljs

@@ -13,7 +13,6 @@
             [uxbox.builtins.icons :as i]
             [uxbox.main.store :as st]
             [uxbox.main.data.projects :as dp]
-            [uxbox.main.data.users :as udu]
             [uxbox.main.data.auth :refer [logout]]
             [uxbox.main.ui.loader :refer [loader]]
             [uxbox.main.ui.lightbox :refer [lightbox]]
@@ -39,15 +38,8 @@
 
 ;; --- Main App (Component)
 
-(defn app-will-mount
-  [own]
-  (when @st/auth-ref
-    (st/emit! (udu/fetch-profile)))
-  own)
-
 (mx/defc app
-  {:will-mount app-will-mount
+  {:mixins [mx/reactive]}
-   :mixins [mx/reactive]}
   []
   (let [route (mx/react route-ref)
         auth (mx/react st/auth-ref)]
@@ -56,12 +48,19 @@
       :auth/login (auth/login-page)
       :auth/register (auth/register-page)
       :auth/recovery-request (auth/recovery-request-page)
-      :auth/recovery (let [token (get-in route [:params :path :token])]
+
+      :auth/recovery
+      (let [token (get-in route [:params :path :token])]
         (auth/recovery-page token))
+
       :dashboard/projects (dashboard/projects-page)
+      :settings/profile (settings/profile-page)
+      :settings/password (settings/password-page)
+      :settings/notifications (settings/notifications-page)
       ;; ;; :dashboard/elements (dashboard/elements-page)
 
-      :dashboard/icons (let [{:keys [id type]} (get-in route [:params :query])
+      :dashboard/icons
+      (let [{:keys [id type]} (get-in route [:params :query])
             id (cond
                  (str/digits? id) (parse-int id)
                  (uuid-str? id) (uuid id)
@@ -69,7 +68,8 @@
             type (when (str/alpha? type) (keyword type))]
         (dashboard/icons-page type id))
 
-      :dashboard/images (let [{:keys [id type]} (get-in route [:params :query])
+      :dashboard/images
+      (let [{:keys [id type]} (get-in route [:params :query])
             id (cond
                  (str/digits? id) (parse-int id)
                  (uuid-str? id) (uuid id)
@@ -77,18 +77,19 @@
             type (when (str/alpha? type) (keyword type))]
         (dashboard/images-page type id))
 
-      :dashboard/colors (let [{:keys [id type]} (get-in route [:params :query])
+      :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))
-      :settings/profile (settings/profile-page)
+
-      :settings/password (settings/password-page)
+      :workspace/page
-      :settings/notifications (settings/notifications-page)
+      (let [projectid (uuid (get-in route [:params :path :project]))
-      :workspace/page (let [projectid (uuid (get-in route [:params :path :project]))
             pageid (uuid (get-in route [:params :path :page]))]
         (workspace projectid pageid))
+
       nil
       )))