Emoji reactions

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

package.json

@@ -59,6 +59,7 @@
     "react-native-svg": "^9.8.4",
     "react-native-touch-id": "^4.4.1",
     "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#v10.2.3_5",
+    "tdigest": "^0.1.1",
     "web3-utils": "^1.2.1"
   },
   "devDependencies": {

src/quo/animated.cljs

@@ -64,6 +64,19 @@
               :ease-in-out (bezier 0.42 0 0.58 1)
               :keyboard    (bezier 0.17 0.59 0.4 0.77)})
 
+(def springs {:lazy {:damping           50
+                     :mass              0.3
+                     :stiffness         120
+                     :overshootClamping true
+                     :bouncyFactor      1}
+              :jump {:damping                   13
+                     :mass                      0.5
+                     :stiffness                 170
+                     :overshootClamping         false
+                     :bouncyFactor              1
+                     :restSpeedThreshold        0.001
+                     :restDisplacementThreshold 0.001}})
+
 (defn set-value [anim val]
   (ocall anim "setValue" val))
 

src/quo/components/controls/view.cljs

@@ -8,12 +8,6 @@
             [quo.components.controls.styles :as styles]
             [status-im.ui.components.icons.vector-icons :as icons]))
 
-(def spring-config {:damping                   50
-                    :mass                      0.3
-                    :stiffness                 120
-                    :overshootClamping         true
-                    :bouncyFactor              1})
-
 (defn control-builder [component]
   (fn [props]
     (let [{:keys [value onChange disabled]}
@@ -29,7 +23,7 @@
                        [])
           transition  (react/use-memo
                        (fn []
-                         (animated/with-spring-transition state spring-config))
+                         (animated/with-spring-transition state (:lazy animated/springs)))
                        [])
           press-end   (fn []
                         (when (and (not disabled) onChange)

src/quo/components/list/item.cljs

@@ -168,7 +168,7 @@
                                (not on-long-press))
                           rn/view
                           animated animated/pressable
-                          :else    gh/touchable-hightlight)]
+                          :else    gh/touchable-highlight)]
     [rn/view {:background-color (if (and (= accessory :radio) active)
                                   active-background
                                   passive-background)}

src/quo/components/text_input.cljs

@@ -169,7 +169,7 @@
                            :on-press #(reset! visible true)}
 
                           :else after)
-            secure        (and secure-text-entry
+            secure        (and (true? secure-text-entry)
                                (or platform/android? (not @visible)))
             on-cancel     (fn []
                             (when on-cancel

src/quo/gesture_handler.cljs

@@ -32,11 +32,11 @@
 (def touchable-without-feedback
   (reagent/adapt-react-class touchable-without-feedback-class))
 
-(def touchable-hightlight-class (reagent/adapt-react-class TouchableHighlight))
+(def touchable-highlight-class (reagent/adapt-react-class TouchableHighlight))
 
-(defn touchable-hightlight [props & children]
-  (into [touchable-hightlight-class (merge {:underlay-color (:interactive-02 @colors/theme)}
-                                           props)]
+(defn touchable-highlight [props & children]
+  (into [touchable-highlight-class (merge {:underlay-color (:interactive-02 @colors/theme)}
+                                          props)]
         children))
 
 (def touchable-opacity

src/status_im/chat/models/loading.cljs

@@ -8,6 +8,7 @@
             [status-im.transport.filters.core :as filters]
             [status-im.mailserver.core :as mailserver]
             [status-im.utils.fx :as fx]
+            [status-im.chat.models.reactions :as reactions]
             [status-im.chat.models.message-list :as message-list]
             [taoensso.timbre :as log]
             [status-im.chat.models.message-seen :as message-seen]))
@@ -133,6 +134,7 @@
                                 #(re-frame/dispatch [::failed-loading-messages current-chat-id session-id %]))]
           (fx/merge cofx
                     load-messages-fx
+                    (reactions/load-more-reactions cursor)
                     (mailserver/load-gaps-fx current-chat-id)))))))
 
 (fx/defn load-messages

src/status_im/chat/models/reactions.cljs

@@ -0,0 +1,95 @@
+(ns status-im.chat.models.reactions
+  (:require [status-im.constants :as constants]
+            [re-frame.core :as re-frame]
+            [status-im.utils.fx :as fx]
+            [status-im.waku.core :as waku]
+            [taoensso.timbre :as log]
+            [status-im.transport.message.protocol :as message.protocol]
+            [status-im.data-store.reactions :as data-store.reactions]))
+
+(defn process-reactions
+  [reactions new-reactions]
+  ;; TODO(Ferossgp): handling own reaction in subscription could be expensive,
+  ;; for better performance we can here separate own reaction into 2 maps
+  (reduce
+   (fn [acc {:keys [chat-id message-id emoji-id emoji-reaction-id retracted]
+             :as   reaction}]
+     ;; NOTE(Ferossgp): For a better performance, better to not keep in db all retracted reactions
+     ;; retraction will always come after the reaction so there shouldn't be a conflict
+     (if retracted
+       (update-in acc [chat-id message-id emoji-id] dissoc emoji-reaction-id)
+       (assoc-in acc [chat-id message-id emoji-id emoji-reaction-id] reaction)))
+   reactions
+   new-reactions))
+
+(defn- earlier-than-deleted-at?
+  [{:keys [db]} {:keys [chat-id clock-value]}]
+  (let [{:keys [deleted-at-clock-value]}
+        (get-in db [:chats chat-id])]
+    (>= deleted-at-clock-value clock-value)))
+
+(fx/defn receive-signal
+  [{:keys [db] :as cofx} reactions]
+  (let [reactions (filter (partial earlier-than-deleted-at? cofx) reactions)]
+    {:db (update db :reactions process-reactions reactions)}))
+
+(fx/defn load-more-reactions
+  [{:keys [db] :as cofx} cursor]
+  (when-let [current-chat-id (:current-chat-id db)]
+    (when-let [session-id (get-in db [:pagination-info current-chat-id :messages-initialized?])]
+      (data-store.reactions/reactions-by-chat-id-rpc
+       (waku/enabled? cofx)
+       current-chat-id
+       cursor
+       constants/default-number-of-messages
+       #(re-frame/dispatch [::reactions-loaded current-chat-id session-id %])
+       #(log/error "failed loading reactions" current-chat-id %)))))
+
+(fx/defn reactions-loaded
+  {:events [::reactions-loaded]}
+  [{{:keys [current-chat-id] :as db} :db}
+   chat-id
+   session-id
+   reactions]
+  (when-not (or (nil? current-chat-id)
+                (not= chat-id current-chat-id)
+                (and (get-in db [:pagination-info current-chat-id :messages-initialized?])
+                     (not= session-id
+                           (get-in db [:pagination-info current-chat-id :messages-initialized?]))))
+    (let [reactions-w-chat-id (map #(assoc % :chat-id chat-id) reactions)]
+      {:db (update db :reactions process-reactions reactions-w-chat-id)})))
+
+
+;; Send reactions
+
+
+(fx/defn send-emoji-reaction
+  {:events [::send-emoji-reaction]}
+  [{{:keys [current-chat-id] :as db} :db :as cofx} reaction]
+  (message.protocol/send-reaction cofx
+                                  (assoc reaction :chat-id current-chat-id)))
+
+(fx/defn send-retract-emoji-reaction
+  {:events [::send-emoji-reaction-retraction]}
+  [{{:keys [current-chat-id reactions] :as db} :db :as cofx} reaction]
+  (message.protocol/send-retract-reaction cofx
+                                          (assoc reaction :chat-id current-chat-id)))
+
+(fx/defn receive-one
+  {:events [::receive-one]}
+  [{:keys [db]} reaction]
+  {:db (update db :reactions process-reactions [reaction])})
+
+(defn message-reactions [current-public-key reactions]
+  (reduce
+   (fn [acc [emoji-id reactions]]
+     (if (pos? (count reactions))
+       (let [own (first (filter (fn [[_ {:keys [from]}]]
+                                  (= from current-public-key)) reactions))]
+         (conj acc {:emoji-id          emoji-id
+                    :own               (boolean (seq own))
+                    :emoji-reaction-id (:emoji-reaction-id (second own))
+                    :quantity          (count reactions)}))
+       acc))
+   []
+   reactions))

src/status_im/constants.cljs

@@ -1,5 +1,6 @@
 (ns status-im.constants
   (:require [status-im.ethereum.core :as ethereum]
+            [status-im.react-native.resources :as resources]
             [status-im.i18n :as i18n]
             [status-im.utils.config :as config]))
 
@@ -16,6 +17,20 @@
 (def content-type-image 7)
 (def content-type-audio 8)
 
+(def emoji-reaction-love 1)
+(def emoji-reaction-thumbs-up  2)
+(def emoji-reaction-thumbs-down  3)
+(def emoji-reaction-laugh 4)
+(def emoji-reaction-sad 5)
+(def emoji-reaction-angry 6)
+
+(def reactions {emoji-reaction-love        (:love resources/reactions)
+                emoji-reaction-thumbs-up   (:thumbs-up resources/reactions)
+                emoji-reaction-thumbs-down (:thumbs-down resources/reactions)
+                emoji-reaction-laugh       (:laugh resources/reactions)
+                emoji-reaction-sad         (:sad resources/reactions)
+                emoji-reaction-angry       (:angry resources/reactions)})
+
 (def message-type-one-to-one 1)
 (def message-type-public-group 2)
 (def message-type-private-group 3)

src/status_im/core.cljs

@@ -62,7 +62,7 @@
       (.addListener ^js react/keyboard
                     (if platform/ios?
                       "keyboardWillHide"
-                      "keyboardWDidHide")
+                      "keyboardDidHide")
                     (fn [_]
                       (re-frame/dispatch-sync [:set :keyboard-height 0])))
       (.addEventListener ^js react/app-state "change" app-state-change-handler)

src/status_im/data_store/reactions.cljs

@@ -0,0 +1,32 @@
+(ns status-im.data-store.reactions
+  (:require [clojure.set :as clojure.set]
+            [status-im.ethereum.json-rpc :as json-rpc]))
+
+(defn ->rpc [message]
+  (-> message
+      (clojure.set/rename-keys {:message-id        :messageId
+                                :emoji-id          :emojiId
+                                :chat-id           :localChatId
+                                :message-type      :messageType
+                                :emoji-reaction-id :id})))
+
+(defn <-rpc [message]
+  (-> message
+      (dissoc :chat_id)
+      (clojure.set/rename-keys {:messageId   :message-id
+                                :localChatId :chat-id
+                                :emojiId     :emoji-id
+                                :messageType :message-type
+                                :id          :emoji-reaction-id})))
+
+(defn reactions-by-chat-id-rpc [waku-enabled?
+                                chat-id
+                                cursor
+                                limit
+                                on-success
+                                on-failure]
+  {::json-rpc/call [{:method     (json-rpc/call-ext-method waku-enabled? "emojiReactionsByChatID")
+                     :params     [chat-id cursor limit]
+                     :on-success (fn [result]
+                                   (on-success (map <-rpc result)))
+                     :on-failure on-failure}]})

src/status_im/ethereum/json_rpc.cljs

@@ -74,6 +74,9 @@
    "shhext_prepareContent" {}
    "shhext_blockContact" {}
    "shhext_updateMailservers" {}
+   "shhext_sendEmojiReaction" {}
+   "shhext_sendEmojiReactionRetraction" {}
+   "shhext_emojiReactionsByChatID" {}
    ;;TODO not used anywhere?
    "shhext_deleteChat" {}
    "shhext_saveContact" {}
@@ -125,6 +128,9 @@
    "wakuext_prepareContent" {}
    "wakuext_blockContact" {}
    "wakuext_updateMailservers" {}
+   "wakuext_sendEmojiReaction" {}
+   "wakuext_sendEmojiReactionRetraction" {}
+   "wakuext_emojiReactionsByChatID" {}
    ;;TODO not used anywhere?
    "wakuext_deleteChat" {}
    "wakuext_saveContact" {}

src/status_im/events.cljs

@@ -7,11 +7,13 @@
             [status-im.chat.models.input :as chat.input]
             [status-im.chat.models.loading :as chat.loading]
             [status-im.chat.models.message :as chat.message]
+            [status-im.chat.models.reactions :as chat.reactions]
             [status-im.chat.models.message-seen :as message-seen]
             [status-im.contact.block :as contact.block]
             [status-im.contact.core :as contact]
             [status-im.data-store.chats :as data-store.chats]
             [status-im.data-store.messages :as data-store.messages]
+            [status-im.data-store.reactions :as data-store.reactions]
             [status-im.ethereum.subscriptions :as ethereum.subscriptions]
             [status-im.fleet.core :as fleet]
             [status-im.group-chats.core :as group-chats]
@@ -794,12 +796,14 @@
  (fn [_ [_ err]]
    (log/error :send-status-message-error err)))
 
-(fx/defn handle-update [cofx {:keys [chats messages] :as response}]
-  (let [chats       (map data-store.chats/<-rpc chats)
-        messages    (map data-store.messages/<-rpc messages)
-        message-fxs (map chat.message/receive-one messages)
-        chat-fxs    (map #(chat/ensure-chat (dissoc % :unviewed-messages-count)) chats)]
-    (apply fx/merge cofx (concat chat-fxs message-fxs))))
+(fx/defn handle-update [cofx {:keys [chats messages emojiReactions] :as response}]
+  (let [chats           (map data-store.chats/<-rpc chats)
+        messages        (map data-store.messages/<-rpc messages)
+        message-fxs     (map chat.message/receive-one messages)
+        emoji-reactions (map data-store.reactions/<-rpc emojiReactions)
+        emoji-react-fxs (map chat.reactions/receive-one emoji-reactions)
+        chat-fxs        (map #(chat/ensure-chat (dissoc % :unviewed-messages-count)) chats)]
+    (apply fx/merge cofx (concat chat-fxs message-fxs emoji-react-fxs))))
 
 (handlers/register-handler-fx
  :transport/message-sent
@@ -811,6 +815,16 @@
             (conj set-hash-fxs
                   (handle-update response))))))
 
+(fx/defn reaction-sent
+  {:events [:transport/reaction-sent]}
+  [cofx response]
+  (handle-update cofx response))
+
+(fx/defn retraction-sent
+  {:events [:transport/retraction-sent]}
+  [cofx response]
+  (handle-update cofx response))
+
 (handlers/register-handler-fx
  :transport.callback/node-info-fetched
  (fn [cofx [_ node-info]]

src/status_im/react_native/resources.cljs

@@ -51,3 +51,11 @@
     (get @loaded-images k)
     (get (swap! loaded-images assoc k
                 (get ui k)) k)))
+
+(def reactions
+  {:love        (js/require "../resources/images/reactions/love.png")
+   :angry       (js/require "../resources/images/reactions/angry.png")
+   :sad         (js/require "../resources/images/reactions/sad.png")
+   :laugh       (js/require "../resources/images/reactions/laugh.png")
+   :thumbs-up   (js/require "../resources/images/reactions/thumbs-up.png")
+   :thumbs-down (js/require "../resources/images/reactions/thumbs-down.png")})

src/status_im/subs.cljs

@@ -20,6 +20,7 @@
             [status-im.multiaccounts.db :as multiaccounts.db]
             [status-im.multiaccounts.model :as multiaccounts.model]
             [status-im.multiaccounts.recover.core :as recover]
+            [status-im.chat.models.reactions :as models.reactions]
             [status-im.pairing.core :as pairing]
             [status-im.signing.gas :as signing.gas]
             #_[status-im.tribute-to-talk.core :as tribute-to-talk]
@@ -182,6 +183,7 @@
 (reg-root-key-sub :multiaccounts/loading :multiaccounts/loading)
 
 (reg-root-key-sub ::messages :messages)
+(reg-root-key-sub ::reactions :reactions)
 (reg-root-key-sub ::message-lists :message-lists)
 (reg-root-key-sub ::pagination-info :pagination-info)
 
@@ -637,6 +639,16 @@
  (fn [[messages chat-id]]
    (get messages chat-id {})))
 
+(re-frame/reg-sub
+ :chats/message-reactions
+ :<- [:multiaccount/public-key]
+ :<- [::reactions]
+ :<- [:chats/current-chat-id]
+ (fn [[current-public-key reactions chat-id] [_ message-id]]
+   (models.reactions/message-reactions
+    current-public-key
+    (get-in reactions [chat-id message-id]))))
+
 (re-frame/reg-sub
  :chats/messages-gaps
  :<- [:mailserver/gaps]