feat(frontend): minor refactor on settings/profile

frontend/src/uxbox/main/ui.cljs

@@ -115,7 +115,7 @@
         (let [token (get-in route [:params :path :token])]
           (auth/recovery-page token))
 
-        :settings/profile (settings/profile-page)
+        :settings/profile (mf/element settings/profile-page)
         :settings/password (settings/password-page)
         :settings/notifications (settings/notifications-page)
 

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

@@ -6,21 +6,24 @@
 ;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.settings.profile
-  (:require [cljs.spec.alpha :as s :include-macros true]
+  (:require
-            [cuerdas.core :as str]
+   [cljs.spec.alpha :as s]
-            [lentes.core :as l]
+   [cuerdas.core :as str]
-            [potok.core :as ptk]
+   [lentes.core :as l]
-            [uxbox.main.store :as st]
+   [potok.core :as ptk]
-            [uxbox.builtins.icons :as i]
+   [rumext.core :as mx]
-            [uxbox.main.ui.settings.header :refer [header]]
+   [rumext.func :as mf]
-            [uxbox.main.ui.messages :refer [messages-widget]]
+   [uxbox.builtins.icons :as i]
-            [uxbox.main.data.users :as udu]
+   [uxbox.main.data.users :as udu]
-            [uxbox.util.i18n :refer [tr]]
+   [uxbox.main.store :as st]
-            [uxbox.util.forms :as fm]
+   [uxbox.main.ui.messages :refer [messages-widget]]
-            [uxbox.util.router :as r]
+   [uxbox.main.ui.settings.header :refer [header]]
-            [rumext.core :as mx :include-macros true]
+   [uxbox.util.dom :as dom]
-            [uxbox.util.interop :refer [iterable->seq]]
+   [uxbox.util.forms :as fm]
-            [uxbox.util.dom :as dom]))
+   [uxbox.util.i18n :refer [tr]]
+   [uxbox.util.interop :refer [iterable->seq]]
+   [uxbox.util.router :as r]
+))
 
 
 (def form-data (fm/focus-data :profile st/state))
@@ -43,91 +46,66 @@
                    ::username
                    ::email]))
 
-;; --- Profile Form
+(defn- on-error
+  [{:keys [code] :as payload}]
+  (case code
+    :uxbox.services.users/registration-disabled
+    (st/emit! (tr "errors.api.form.registration-disabled"))
+    :uxbox.services.users/email-already-exists
+    (st/emit! (assoc-error :email (tr "errors.api.form.email-already-exists")))
+    :uxbox.services.users/username-already-exists
+    (st/emit! (assoc-error :username (tr "errors.api.form.username-already-exists")))))
 
-(mx/defc profile-form
+(defn- on-field-change
-  {:mixins [mx/static mx/reactive
+  [event field]
-            (fm/clear-mixin st/store :profile)]}
+  (let [value (dom/event->value event)]
-  []
+    (st/emit! (assoc-value field value))))
-  (let [data (merge {:theme "light"}
+
-                    (mx/react profile-ref)
+;; --- Profile Form
-                    (mx/react form-data))
+(mx/def profile-form
-        errors (mx/react form-errors)
+  :mixins [mx/static mx/reactive mx/sync-render (fm/clear-mixin st/store :profile)]
-        valid? (fm/valid? ::profile-form data)
+  :render
-        theme (:theme data)]
+  (fn [own props]
-    (letfn [(on-change [field event]
+    (let [data (merge {:theme "light"}
-              (let [value (dom/event->value event)]
+                      (mx/react profile-ref)
-                (st/emit! (assoc-value field value))))
+                      (mx/react form-data))
-            (on-error [{:keys [code] :as payload}]
+          errors (mx/react form-errors)
-              (case code
+          valid? (fm/valid? ::profile-form data)
-                :uxbox.services.users/registration-disabled
+          theme (:theme data)
-                (st/emit! (tr "errors.api.form.registration-disabled"))
+          on-success #(st/emit! (clear-form))
-                :uxbox.services.users/email-already-exists
+          on-submit #(st/emit! (udu/update-profile data on-success on-error))]
-                (st/emit! (assoc-error :email (tr "errors.api.form.email-already-exists")))
-                :uxbox.services.users/username-already-exists
-                (st/emit! (assoc-error :username (tr "errors.api.form.username-already-exists")))))
-            (on-success [_]
-              (st/emit! (clear-form)))
-            (on-submit [event]
-              (st/emit! (udu/update-profile data on-success on-error)))]
       [:form.profile-form
        [:span.user-settings-label (tr "settings.profile.profile.profile-saved")]
        [:input.input-text
         {:type "text"
-         :on-change (partial on-change :fullname)
+         :on-change #(on-field-change % :fullname)
          :value (:fullname data "")
          :placeholder (tr "settings.profile.your-name")}]
        [:input.input-text
         {:type "text"
-         :on-change (partial on-change :username)
+         :on-change #(on-field-change % :username)
          :value (:username data "")
          :placeholder (tr "settings.profile.your-username")}]
        (fm/input-error errors :username)
 
        [:input.input-text
         {:type "email"
-         :on-change (partial on-change :email)
+         :on-change #(on-field-change % :email)
          :value (:email data "")
          :placeholder (tr "settings.profile.your-email")}]
        (fm/input-error errors :email)
 
-        #_[:span.user-settings-label (tr "settings.choose-color-theme")]
+       [:input.btn-primary
-        #_[:div.input-radio.radio-primary
+        {:type "button"
-         [:input {:type "radio"
+         :class (when-not valid? "btn-disabled")
-                  :checked (when (= theme "light") "checked")
+         :disabled (not valid?)
-                  :on-change (partial on-change :theme)
+         :on-click on-submit
-                  :id "light-theme"
+         :value (tr "settings.update-settings")}]])))
-                  :name "theme"
-                  :value "light"}]
-         [:label {:for "light-theme"} (tr "settings.profile.light-theme")]
-
-         [:input {:type "radio"
-                  :checked (when (= theme "dark") "checked")
-                  :on-change (partial on-change :theme)
-                  :id "dark-theme"
-                  :name "theme"
-                  :value "dark"}]
-         [:label {:for "dark-theme"} (tr "settings.profile.dark-theme")]
-
-         [:input {:type "radio"
-                  :checked (when (= theme "high-contrast") "checked")
-                  :on-change (partial on-change :theme)
-                  :id "high-contrast-theme"
-                  :name "theme"
-                  :value "high-contrast"}]
-         [:label {:for "high-contrast-theme"} (tr "settings.profile.high-contrast-theme")]]
-
-        [:input.btn-primary
-         {:type "button"
-          :class (when-not valid? "btn-disabled")
-          :disabled (not valid?)
-          :on-click on-submit
-          :value (tr "settings.update-settings")}]])))
 
 ;; --- Profile Photo Form
 
-(mx/defc profile-photo-form
+(mf/defc profile-photo-form
-  {:mixins [mx/static mx/reactive]}
+  {:wrap [mf/reactive]}
   []
   (letfn [(on-change [event]
             (let [target (dom/get-target event)
@@ -136,7 +114,7 @@
                            (first))]
               (st/emit! (udu/update-photo file))
               (dom/clean-value! target)))]
-    (let [{:keys [photo]} (mx/react profile-ref)
+    (let [{:keys [photo]} (mf/react profile-ref)
           photo (if (or (str/empty? photo) (nil? photo))
                   "images/avatar.jpg"
                   photo)]
@@ -148,8 +126,7 @@
 
 ;; --- Profile Page
 
-(mx/defc profile-page
+(mf/defc profile-page
-  {:mixins [mx/static]}
   []
   [:main.dashboard-main
    (messages-widget)
@@ -157,5 +134,5 @@
    [:section.dashboard-content.user-settings
     [:section.user-settings-content
      [:span.user-settings-label (tr "settings.profile.your-avatar")]
-     (profile-photo-form)
+     [:& profile-photo-form]
      (profile-form)]]])