feat(frontend): improve i18n

frontend/src/uxbox/main.cljs

@@ -6,12 +6,23 @@
 
 (ns uxbox.main
   (:require [uxbox.main.store :as st]
-            [uxbox.main.locales :as lc]
+            [uxbox.main.ui :as ui]
-            [uxbox.main.ui :as ui]))
+            [uxbox.main.locales.en :as en]
+            [uxbox.main.locales.fr :as fr]
+            [uxbox.util.i18n :as i18n]))
+
+(i18n/update-locales! (fn [locales]
+                        (-> locales
+                            (assoc :en en/locales)
+                            (assoc :fr fr/locales))))
+
+(i18n/on-locale-change!
+ (fn [new old]
+   (println "Locale changed from" old " to " new)
+   (ui/reinit)))
 
 (defn ^:export init
   []
-  (lc/init)
   (st/init)
   (ui/init-routes)
   (ui/init))

frontend/src/uxbox/main/locales.cljs

@@ -1,15 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; 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/.
-;;
-;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-
-(ns uxbox.main.locales
-  "Initialization namespace for i18n locale data."
-  (:require [uxbox.util.i18n :as i18n]
-            [uxbox.main.locales.en :as en]))
-
-(defn init
-  []
-  (vswap! i18n/locales assoc :en en/locales))

frontend/src/uxbox/main/locales/fr.cljs

@@ -5,7 +5,7 @@
 ;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
-(ns uxbox.main.locales.en)
+(ns uxbox.main.locales.fr)
 
 (defonce locales
   {"ds.projects" "PROJETS"

frontend/src/uxbox/main/ui.cljs

@@ -5,7 +5,7 @@
 ;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
 ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
-(ns uxbox.main.ui
+(ns ^:figwheel-hooks uxbox.main.ui
   (:require [beicon.core :as rx]
             [lentes.core :as l]
             [cuerdas.core :as str]
@@ -165,8 +165,18 @@
   []
   (rt/init st/store routes {:default :auth/login}))
 
-(defn init
+(defn ^:export init
   []
   (mx/mount (app) (dom/get-element "app"))
   (mx/mount (lightbox) (dom/get-element "lightbox"))
   (mx/mount (loader) (dom/get-element "loader")))
+
+(defn reinit
+  []
+  (.unmountComponentAtNode js/ReactDOM (dom/get-element "app"))
+  (.unmountComponentAtNode js/ReactDOM (dom/get-element "lightbox"))
+  (.unmountComponentAtNode js/ReactDOM (dom/get-element "loader"))
+  (init))
+
+(defn ^:after-load my-after-reload-callback []
+  (reinit))

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

@@ -14,8 +14,7 @@
             [uxbox.main.ui.users :as ui.u]
             [uxbox.util.i18n :refer (tr)]
             [uxbox.util.router :as r]
-            [rumext.core :as mx :include-macros true]
+            [rumext.core :as mx :include-macros true]))
-            [potok.core :as ptk]))
 
 (def header-ref
   (-> (l/key :dashboard)

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

@@ -357,8 +357,7 @@
                :on-click toggle-selection
                :checked selected?}]
       [:label {:for (:id icon)}]]
-     [:span.grid-item-image {}
+     [:span.grid-item-image (icon/icon-svg icon)]
-      (icon/icon-svg icon)]
      [:div.item-info
       {:on-click ignore-click}
       (if edition?
@@ -370,7 +369,7 @@
                               :default-value (:name icon)}]
         [:h3 {:on-double-click on-edit}
          (:name icon)])
-      (str (tr "ds.uploaded-at" (dt/format created-at "L")))]]))
+      (str (tr "ds.uploaded-at" (dt/format created-at "DD/MM/YYYY")))]]))
 
 (mx/defc grid
   {:mixins [mx/static mx/reactive]}

frontend/src/uxbox/main/ui/shapes/icon.cljs

@@ -70,7 +70,7 @@
 
         attrs (merge props (attrs/extract-style-attrs shape))]
     [:g {:transform (str xfmt)}
-     [:svg attrs]]))
+     [:> :svg (normalize-props attrs) ]]))
 
 ;; --- Icon SVG
 
@@ -80,5 +80,5 @@
   (let [view-box (apply str (interpose " " (:view-box metadata)))
         props {:view-box view-box
                :id (str "shape-" id)
-               :dangerouslySetInnerHTML {:__html content}}]
+               :dangerouslySetInnerHTML #js {:__html content}}]
     [:> :svg (normalize-props props)]))

frontend/src/uxbox/util/i18n.cljs

@@ -2,16 +2,32 @@
 ;; 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/.
 ;;
-;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.util.i18n
   "A i18n foundation."
   (:require [cuerdas.core :as str]
             [uxbox.util.storage :refer (storage)]))
 
-(defonce locales (volatile! {}))
+(defonce state (atom {:current-locale (get storage ::locale :en)}))
-(defonce locale (get storage ::locale :en))
+
+(defn update-locales!
+  [callback]
+  (swap! state callback))
+
+(defn set-current-locale!
+  [locale]
+  (swap! storage assoc ::locale locale)
+  (swap! state assoc :current-locale locale))
+
+(defn on-locale-change!
+  [callback]
+  (add-watch state ::main (fn [_ _ old new]
+                            (let [old-locale (:current-locale old)
+                                  new-locale (:current-locale new)]
+                              (when (not= old-locale new-locale)
+                                (callback new-locale old-locale))))))
 
 ;; A marker type that is used just for mark
 ;; a parameter that reprsentes the counter.
@@ -34,12 +50,14 @@
   "Translate the string."
   ([t]
    (let [default (name t)
-         value (get-in @locales [locale t] default)]
+         locale (get @state :current-locale)
+         value (get-in @state [locale t] default)]
      (if (vector? value)
        (or (second value) default)
        value)))
   ([t & args]
-   (let [value (get-in @locales [locale t] (name t))
+   (let [locale (get @state :current-locale)
+         value (get-in @state [locale t] (name t))
          plural (first (filter c? args))
          args (mapv #(if (c? %) @% %) args)
          value (cond

frontend/src/uxbox/view.cljs

@@ -6,13 +6,24 @@
 
 (ns uxbox.view
   (:require [uxbox.config]
-            [uxbox.view.locales :as lc]
             [uxbox.view.store :as st]
-            [uxbox.view.ui :as ui]))
+            [uxbox.view.ui :as ui]
+            [uxbox.main.locales.en :as en]
+            [uxbox.main.locales.fr :as fr]
+            [uxbox.util.i18n :as i18n]))
+
+(i18n/update-locales! (fn [locales]
+                        (-> locales
+                            (assoc :en en/locales)
+                            (assoc :fr fr/locales))))
+
+(i18n/on-locale-change!
+ (fn [new old]
+   (println "Locale changed from" old " to " new)
+   (ui/init)))
 
 (defn ^:export init
   []
-  (lc/init)
   (st/init)
   (ui/init-routes)
   (ui/init))

frontend/src/uxbox/view/locales.cljs

@@ -1,15 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; 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/.
-;;
-;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-
-(ns uxbox.view.locales
-  "Initialization namespace for i18n locale data."
-  (:require [uxbox.util.i18n :as i18n]
-            [uxbox.view.locales.en :as en]))
-
-(defn init
-  []
-  (vswap! i18n/locales assoc :en en/locales))