fix: toast component based on review (#14593)

src/quo2/components/notifications/toast.cljs

@@ -45,7 +45,7 @@
     [count-down-circle/circle-timer {:duration duration}]]
    [text/text
     {:size :paragraph-2 :weight :medium :style (merge-theme-style :text {})}
-    [i18n/label :undo]]])
+    [i18n/label :t/undo]]])
 
 (defn- toast-container
   [{:keys [left middle right]}]

src/status_im2/common/toasts/events.cljs

@@ -1,22 +1,17 @@
 (ns status-im2.common.toasts.events
-  (:require [taoensso.encore :as enc]
+  (:require [utils.re-frame :as rf]))
-            [utils.re-frame :as rf]))
-
-(def ^:private next-toast-id (atom 0))
 
 (rf/defn upsert
   {:events [:toasts/upsert]}
   [{:keys [db]} id opts]
-  (let [{:toasts/keys [index toasts]} db
+  (let [{:keys [ordered toasts]} (:toasts db)
-        update?                       (some #{id} index)
+        update?                  (some #(= % id) ordered)
-        index                         (enc/conj-when index (and (not update?) id))
+        ordered                  (if (not update?) (conj ordered id) ordered)
         toasts                   (assoc toasts id opts)
         db                       (-> db
-                                          (assoc
+                                     (update :toasts assoc :ordered ordered :toasts toasts)
-                                           :toasts/index  index
+                                     (update :toasts dissoc :hide-toasts-timer-set))]
-                                           :toasts/toasts toasts)
+    (if (and (not update?) (= (count ordered) 1))
-                                          (dissoc :toasts/hide-toasts-timer-set))]
-    (if (and (not update?) (= (count index) 1))
       {:show-toasts []
        :db          db}
       {:db db})))
@@ -24,24 +19,29 @@
 (rf/defn create
   {:events [:toasts/create]}
   [{:keys [db]} opts]
-  {:dispatch [:toasts/upsert (str "toast-" (swap! next-toast-id inc)) opts]})
+  (let [next-toast-id (or (get-in [:toasts :next-toast-id] db) 1)]
+    {:db       (assoc-in db [:toasts :next-toast-id] (inc next-toast-id))
+     :dispatch [:toasts/upsert (str "toast-" next-toast-id) opts]}))
 
 (rf/defn hide-toasts-with-check
   {:events [:toasts/hide-with-check]}
   [{:keys [db]}]
-  (when (:toasts/hide-toasts-timer-set db)
+  (when (get-in db [:toasts :hide-toasts-timer-set])
-    {:db          (dissoc db :toasts/hide-toasts-timer-set)
+    {:db          (update db :toasts dissoc :hide-toasts-timer-set)
      :hide-toasts nil}))
 
 (rf/defn close
   {:events [:toasts/close]}
   [{:keys [db]} id]
-  (when (get-in db [:toasts/toasts id])
+  (when (get-in db [:toasts :toasts id])
-    (let [{:toasts/keys [toasts index]} db
+    (let [{:keys [toasts ordered]} (:toasts db)
           toasts                   (dissoc toasts id)
-          index                         (remove #{id} index)
+          ordered                  (remove #(= % id) ordered)
-          empty-index?                  (not (seq index))
+          empty-ordered?           (not (seq ordered))
-          db                            (assoc db :toasts/index index :toasts/toasts toasts)]
+          db                       (update db :toasts assoc :ordered ordered :toasts toasts)
-      (cond-> {:db db}
+          effect                   {:db db}]
-        empty-index? (update :db assoc :toasts/hide-toasts-timer-set true)
+      (if empty-ordered?
-        empty-index? (assoc :dispatch-later [{:ms 500 :dispatch [:toasts/hide-with-check]}])))))
+        (-> effect
+            (update-in [:db :toasts] assoc :hide-toasts-timer-set true)
+            (assoc :dispatch-later [{:ms 500 :dispatch [:toasts/hide-with-check]}]))
+        effect))))

src/status_im2/common/toasts/style.cljs

@@ -0,0 +1,14 @@
+(ns status-im2.common.toasts.style)
+
+(def outmost-transparent-container
+  {:elevation        2
+   :pointer-events   :box-none
+   :padding-top      52
+   :flex-direction   :column
+   :justify-content  :center
+   :align-items      :center
+   :background-color :transparent})
+
+(def each-toast-container
+  {:width         "100%"
+   :margin-bottom 5})

src/status_im2/common/toasts/view.cljs

@@ -1,26 +1,27 @@
 (ns status-im2.common.toasts.view
-  (:require [quo2.core :as quo2]
+  (:require [quo2.core :as quo]
             [react-native.core :as rn]
             [react-native.gesture :as gesture]
             [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [status-im.utils.utils :as utils.utils]
+            [status-im2.common.toasts.style :as style]
             [utils.re-frame :as rf]))
 
 (def ^:private slide-out-up-animation
-  (-> reanimated/slide-out-up-animation
+  (-> ^js reanimated/slide-out-up-animation
       .springify
       (.damping 20)
       (.stiffness 300)))
 
 (def ^:private slide-in-up-animation
-  (-> reanimated/slide-in-up-animation
+  (-> ^js reanimated/slide-in-up-animation
       .springify
       (.damping 20)
       (.stiffness 300)))
 
 (def ^:private linear-transition
-  (-> reanimated/linear-transition
+  (-> ^js reanimated/linear-transition
       .springify
       (.damping 20)
       (.stiffness 300)))
@@ -47,7 +48,7 @@
                  ;; remove timer on pan start
                  (gesture/on-start clear-timer)
                  (gesture/on-update
-                  (fn [evt]
+                  (fn [^js evt]
                     (let [evt-translation-y (.-translationY evt)]
                       (cond
                         ;; reset translate y on pan down
@@ -82,22 +83,15 @@
               :layout   reanimated/linear-transition
               :style    (reanimated/apply-animations-to-style
                          {:transform [{:translateY translate-y}]}
-                         {:width         "100%"
+                         style/each-toast-container)}
-                          :margin-bottom 5})}
+             [quo/toast toast-opts]]]))])))
-             [quo2/toast toast-opts]]]))])))
 
 (defn toasts
   []
-  (let [toasts-index (rf/sub [:toasts/index])]
+  (let [toasts-ordered (:ordered (rf/sub [:toasts]))]
     [into
      [rn/view
-      {:style {:elevation        2
+      {:style style/outmost-transparent-container}]
-               :pointer-events   :box-none
+     (->> toasts-ordered
-               :padding-top      52
-               :flex-direction   :column
-               :justify-content  :center
-               :align-items      :center
-               :background-color :transparent}}]
-     (->> toasts-index
           reverse
           (map (fn [id] ^{:key id} [container id])))]))

src/status_im2/subs/root.cljs

@@ -198,8 +198,7 @@
 ;;intro-wizard
 (reg-root-key-sub :intro-wizard-state :intro-wizard)
 
-(reg-root-key-sub :toasts/toasts :toasts/toasts)
+(reg-root-key-sub :toasts :toasts)
-(reg-root-key-sub :toasts/index :toasts/index)
 (reg-root-key-sub :popover/popover :popover/popover)
 (reg-root-key-sub :visibility-status-popover/popover :visibility-status-popover/popover)
 (reg-root-key-sub :add-account :add-account)

src/status_im2/subs/toasts.cljs

@@ -3,6 +3,6 @@
 
 (re-frame/reg-sub
  :toasts/toast
- :<- [:toasts/toasts]
+ :<- [:toasts]
  (fn [toasts [_ toast-id]]
-   (get toasts toast-id)))
+   (get-in toasts [:toasts toast-id])))