New message animation

Former-commit-id: ff5e4c66c3

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,14 +170,16 @@
                             :tension  10})
           (fn [arg]
             (when (.-finished arg)
-              ;; todo ???
-              nil)))))))
+              (callback))))))))
 
-(defn message-container [& 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}
+                   :val      anim-value
+                   :callback anim-callback}
           on-update (message-container-animation-logic context)]
       (r/create-class
         {:component-did-mount
@@ -185,18 +187,19 @@
          :component-did-update
          on-update
          :reagent-render
-       (fn [& children]
+         (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)])})))
+                  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])