New message animation

src/status_im/chat/handlers.cljs

@@ -133,7 +133,21 @@
 (defn add-message-to-db
   [db chat-id message]
   (let [messages [:chats chat-id :messages]]
-    (update-in db messages conj message)))
+    (update-in db messages conj (assoc message :chat-id chat-id
+                                               :new? true))))
+
+(defn set-message-shown
+  [db chat-id msg-id]
+  (update-in db [:chats chat-id :messages] (fn [messages]
+                                             (map (fn [msg]
+                                                    (if (= msg-id (:msg-id msg))
+                                                      (assoc msg :new? false)
+                                                      msg))
+                                                  messages))))
+
+(register-handler :set-message-shown
+  (fn [db [_ {:keys [chat-id msg-id]}]]
+    (set-message-shown db chat-id msg-id)))
 
 (defn prepare-message
   [{:keys [identity current-chat-id] :as db} _]

src/status_im/chat/views/message.cljs

@@ -160,7 +160,7 @@
      (when (and outgoing delivery-status)
        [message-delivery-status {:delivery-status delivery-status}])]))
 
-(defn message-container-animation-logic [{:keys [to-value val]}]
+(defn message-container-animation-logic [{:keys [to-value val callback]}]
   (fn [_]
     (let [to-value @to-value]
       (when (< 0 to-value)
@@ -170,33 +170,36 @@
                             :tension  10})
           (fn [arg]
             (when (.-finished arg)
-              ;; todo ???
-              nil)))))))
+              (callback))))))))
 
-(defn message-container [& children]
-  (let [layout-height (r/atom 0)
-        anim-value (anim/create-value 1)
-        context {:to-value layout-height
-                 :val      anim-value}
-        on-update (message-container-animation-logic context)]
-    (r/create-class
-      {:component-did-mount
-       on-update
-       :component-did-update
-       on-update
-       :reagent-render
-       (fn [& children]
-         @layout-height
-         [animated-view {:style (st/message-container anim-value)}
-          (into [view {:onLayout (fn [event]
-                                   (let [height (.. event -nativeEvent -layout -height)]
-                                     (reset! layout-height height)))}]
-                children)])})))
+(defn message-container [message & children]
+  (if (:new? message)
+    (let [layout-height (r/atom 0)
+          anim-value (anim/create-value 1)
+          anim-callback #(dispatch [:set-message-shown message])
+          context {:to-value layout-height
+                   :val      anim-value
+                   :callback anim-callback}
+          on-update (message-container-animation-logic context)]
+      (r/create-class
+        {:component-did-mount
+         on-update
+         :component-did-update
+         on-update
+         :reagent-render
+         (fn [message & children]
+           @layout-height
+           [animated-view {:style (st/message-container anim-value)}
+            (into [view {:onLayout (fn [event]
+                                     (let [height (.. event -nativeEvent -layout -height)]
+                                       (reset! layout-height height)))}]
+                  children)])}))
+    (into [view] children)))
 
 (defn chat-message
   [{:keys [outgoing delivery-status timestamp new-day group-chat]
     :as   message}]
-  [message-container
+  [message-container message
    ;; TODO there is no new-day info in message
    (when new-day
      [message-date timestamp])