custom register-handler & response icon animation

Former-commit-id: e7b328aa27

src/status_im/chat/handlers.cljs

@@ -1,5 +1,5 @@
 (ns status-im.chat.handlers
-  (:require [re-frame.core :refer [register-handler enrich after debug dispatch]]
+  (:require [re-frame.core :refer [enrich after debug dispatch]]
             [status-im.models.commands :as commands]
             [clojure.string :as str]
             [status-im.components.styles :refer [default-chat-color]]
@@ -12,7 +12,7 @@
             [status-im.chat.sign-up :as sign-up-service]
             [status-im.models.chats :as chats]
             [status-im.navigation.handlers :as nav]
-            [status-im.utils.handlers :as u]
+            [status-im.utils.handlers :refer [register-handler] :as u]
             [status-im.persistence.realm :as r]
             [status-im.handlers.server :as server]
             [status-im.handlers.content-suggestions :refer [get-content-suggestions]]

src/status_im/chat/handlers/animation.cljs

@@ -1,5 +1,6 @@
 (ns status-im.chat.handlers.animation
-  (:require [re-frame.core :refer [register-handler after dispatch debug]]
+  (:require [re-frame.core :refer [after dispatch debug]]
+            [status-im.utils.handlers :refer [register-handler]]
             [re-frame.middleware :refer [path]]
             [status-im.handlers.content-suggestions :refer [get-content-suggestions]]
             [status-im.chat.constants :refer [input-height request-info-height

src/status_im/chat/styles/message.cljs

@@ -153,15 +153,13 @@
    :backgroundColor (:color command)
    :transform       [{:scale scale}]})
 
-(defn command-image-view
+(def command-image-view
-  [command]
   {:position        :absolute
    :top             0
    :right           0
    :width           24
    :height          24
    :borderRadius    50
-   :backgroundColor (:color command)
    :alignItems    :center})
 
 (def command-request-image
@@ -198,7 +196,9 @@
 (def command-image
   {:margin-top 5
    :width    12
-   :height   13})
+   :height   13
+   :tintColor :#a9a9a9cc})
+
 (def command-text
   (merge style-message-text
          {:marginTop        8

src/status_im/chat/views/message.cljs

@@ -69,7 +69,7 @@
             (str "!" (:name command))]]]
          ;; todo doesn't reflect design
          (when-let [icon (:icon command)]
-           [view (st/command-image-view command)
+           [view st/command-image-view
             [image {:source {:uri icon}
                     :style  st/command-image}]])
          (if preview
@@ -84,25 +84,6 @@
   (->> (when command (name command))
        (str "request-")))
 
-;; todo remove (merging leftover)
-#_(defview message-content-command-request
-  [{:keys [msg-id content from incoming-group]}]
-  [commands [:get-responses]]
-  (let [{:keys [command content]} (parse-command-request commands content)]
-    [touchable-highlight {:onPress             #(set-chat-command msg-id command)
-                          :accessibility-label (label command)}
-     [view st/comand-request-view
-      [view st/command-request-message-view
-       (when incoming-group
-         [text {:style st/command-request-from-text} from])
-       [text {:style st/style-message-text} content]]
-      [view (st/command-request-image-view command)
-       [image {:source {:uri (:icon command)}
-               :style  st/command-request-image}]]
-      (when-let [request-text (:request-text command)]
-        [view st/command-request-text-view
-         [text {:style st/style-sub-text} request-text]])]]))
-
 (defn message-view
   [message content]
   [view (st/message-view message)

src/status_im/chat/views/request_message.cljs

@@ -19,49 +19,37 @@
   (->> (name command)
        (str "request-")))
 
-(defn request-button-animation-logic [{:keys [to-value val loop?]}]
+(def min-scale 1)
-  (fn [_]
+(def max-scale 1.3)
-    (let [loop? @loop?
+
-          minimum 1
+(defn request-button-animation-logic
-          maximum 1.3
+  [{:keys [to-value val loop?] :as context}]
-          to-scale (if loop?
+  (anim/start
-                     (or @to-value maximum)
+    (anim/anim-sequence
-                     minimum)]
+      [(anim/anim-delay (if @loop? request-message-icon-scale-delay 0))
-      (anim/start
+       (anim/spring val {:toValue to-value})])
-        (anim/anim-sequence
+    #(when @loop?
-          [(anim/anim-delay (if loop? request-message-icon-scale-delay 0))
+      (let [new-value (if (= to-value min-scale) max-scale min-scale)
-           (anim/spring val {:toValue to-scale})])
+            context' (assoc context :to-value new-value)]
-        (fn [arg]
+        (request-button-animation-logic context')))))
-          (when (.-finished arg)
-            (dispatch [:set-animation ::request-button-scale-current to-scale])
-            (when loop?
-              (dispatch [:set-animation ::request-button-scale (if (= to-scale minimum)
-                                                                 maximum
-                                                                 minimum)]))))))))
 
 (defn request-button [msg-id command]
-  (let [to-scale (subscribe [:animations ::request-button-scale])
+  (let [scale-anim-val (anim/create-value min-scale)
-        cur-scale (subscribe [:animations ::request-button-scale-current])
-        scale-anim-val (anim/create-value (or @cur-scale 1))
         loop? (r/atom true)
-        context {:to-value to-scale
+        context {:to-value max-scale
                  :val      scale-anim-val
-                 :loop?    loop?}
+                 :loop?    loop?}]
-        on-update (request-button-animation-logic context)]
     (r/create-class
       {:component-did-mount
-       on-update
+       #(request-button-animation-logic context)
-       :component-did-update
+       :component-will-unmount
-       on-update
+       #(reset! loop? false)
        :reagent-render
        (fn [msg-id command]
-         @to-scale
          [touchable-highlight {:on-press (fn []
                                            (reset! loop? false)
                                            (set-chat-command msg-id command))
                                :style    st/command-request-image-touchable}
-                               ;:accessibility-label (label command)
-
           [animated-view {:style (st/command-request-image-view command scale-anim-val)}
            [image {:source {:uri (:icon command)}
                    :style  st/command-request-image}]]])})))

src/status_im/chat/views/response.cljs

@@ -83,11 +83,10 @@
           [icon :close-white st/cancel-icon]]]]])))
 
 (defn container-animation-logic [{:keys [to-value val]}]
-  (fn [_]
+  (let [to-value @to-value]
-    (let [to-value @to-value]
+    (anim/start (anim/spring val {:toValue  to-value
-      (anim/start (anim/spring val {:toValue to-value
+                                  :tension  50
-                                    :tension 50
+                                  :friction 10}))))
-                                    :friction 10})))))
 
 (defn container [response-height & children]
   (let [;; todo to-response-height, cur-response-height must be specific
@@ -96,7 +95,7 @@
         changed            (subscribe [:animations :response-height-changed])
         context            {:to-value to-response-height
                             :val      response-height}
-        on-update          (container-animation-logic context)]
+        on-update          #(container-animation-logic context)]
     (r/create-class
       {:component-did-mount
        on-update

src/status_im/chat/views/suggestions.cljs

@@ -93,11 +93,10 @@
        [icon :drag_down st/drag-down-icon]])))
 
 (defn container-animation-logic [{:keys [to-value val]}]
-  (fn [_]
+  (let [to-value @to-value]
-    (let [to-value @to-value]
+    (anim/start (anim/spring val {:toValue  to-value
-      (anim/start (anim/spring val {:toValue to-value
+                                  :tension  50
-                                    :tension 50
+                                  :friction 10}))))
-                                    :friction 10})))))
 
 (defn container [h & elements]
   (let [;; todo to-response-height, cur-response-height must be specific
@@ -106,7 +105,7 @@
         changed            (subscribe [:animations :commands-height-changed])
         context            {:to-value to-response-height
                             :val      h}
-        on-update          (container-animation-logic context)]
+        on-update          #(container-animation-logic context)]
     (r/create-class
       {:component-did-mount
        on-update

src/status_im/commands/handlers/jail.cljs

@@ -1,6 +1,5 @@
 (ns status-im.commands.handlers.jail
-  (:require [re-frame.core :refer [register-handler after dispatch subscribe
+  (:require [re-frame.core :refer [after dispatch subscribe trim-v debug]]
-                                   trim-v debug]]
             [status-im.utils.handlers :as u]
             [status-im.utils.utils :refer [http-get toast]]
             [status-im.components.jail :as j]

src/status_im/commands/utils.cljs

@@ -3,7 +3,8 @@
             [clojure.walk :as w]
             [status-im.components.react :refer [text scroll-view view
                                                 image touchable-highlight]]
-            [re-frame.core :refer [register-handler dispatch trim-v debug]]))
+            [re-frame.core :refer [register-handler dispatch trim-v debug]]
+            [status-im.utils.handlers :refer [register-handler]]))
 
 (defn json->clj [json]
   (if (= json "undefined")
@@ -44,4 +45,4 @@
 (defn reg-handler
   ([name handler] (reg-handler name nil handler))
   ([name middleware handler]
-   (register-handler name [#_debug trim-v middleware] handler)))
+   (register-handler name [trim-v middleware] handler)))

src/status_im/handlers.cljs

@@ -1,13 +1,13 @@
 (ns status-im.handlers
   (:require
-    [re-frame.core :refer [register-handler after dispatch debug]]
+    [re-frame.core :refer [after dispatch debug]]
     [schema.core :as s :include-macros true]
     [status-im.db :refer [app-db schema]]
     [status-im.persistence.simple-kv-store :as kv]
     [status-im.protocol.state.storage :as storage]
     [status-im.utils.logging :as log]
     [status-im.utils.crypt :refer [gen-random-bytes]]
-    [status-im.utils.handlers :as u]
+    [status-im.utils.handlers :refer [register-handler] :as u]
     status-im.chat.handlers
     status-im.chat.handlers.animation
     status-im.group-settings.handlers

src/status_im/utils/handlers.cljs

@@ -1,4 +1,5 @@
-(ns status-im.utils.handlers)
+(ns status-im.utils.handlers
+  (:require [re-frame.core :refer [after dispatch debug] :as re-core]))
 
 (defn side-effect!
   "Middleware for handlers that will not affect db."
@@ -6,3 +7,8 @@
   (fn [db params]
     (handler db params)
     db))
+
+(defn register-handler
+  ([name handler] (register-handler name nil handler))
+  ([name middleware handler]
+   (re-core/register-handler name [#_debug middleware] handler)))