fix: bottom padding in the case of a message with reactions

Author: jo-mut

src/status_im/common/bottom_sheet/view.cljs

@@ -1,17 +1,17 @@
 (ns status-im.common.bottom-sheet.view
   (:require
-   [oops.core :as oops]
-   [quo.core :as quo]
-   [quo.foundations.colors :as colors]
-   [quo.theme :as quo.theme]
-   [react-native.blur :as blur]
-   [react-native.core :as rn]
-   [react-native.gesture :as gesture]
-   [react-native.hooks :as hooks]
-   [react-native.reanimated :as reanimated]
-   [status-im.common.bottom-sheet.style :as style]
-   [utils.number]
-   [utils.re-frame :as rf]))
+    [oops.core :as oops]
+    [quo.core :as quo]
+    [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]
+    [react-native.gesture :as gesture]
+    [react-native.hooks :as hooks]
+    [react-native.reanimated :as reanimated]
+    [status-im.common.bottom-sheet.style :as style]
+    [utils.number]
+    [utils.re-frame :as rf]))
 
 (def duration 450)
 (def timing-options #js {:duration duration})

src/status_im/contexts/chat/messenger/menus/pinned_messages/style.cljs

@@ -1,6 +1,6 @@
 (ns status-im.contexts.chat.messenger.menus.pinned-messages.style
   (:require
-   [react-native.platform :as platform]))
+    [react-native.platform :as platform]))
 
 (defn heading
   [community?]
@@ -9,8 +9,8 @@
 
 (def community-tag-container
   {:margin-horizontal 20
-   :margin-top 4
-   :margin-bottom 8})
+   :margin-top        4
+   :margin-bottom     8})
 
 (def no-pinned-messages-container
   {:justify-content :center

src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs

@@ -1,14 +1,14 @@
 (ns status-im.contexts.chat.messenger.menus.pinned-messages.view
   (:require
-   [quo.core :as quo]
-   [quo.theme]
-   [react-native.core :as rn]
-   [react-native.gesture :as gesture]
-   [status-im.common.resources :as resources]
-   [status-im.contexts.chat.messenger.menus.pinned-messages.style :as style]
-   [status-im.contexts.chat.messenger.messages.content.view :as message]
-   [utils.i18n :as i18n]
-   [utils.re-frame :as rf]))
+    [quo.core :as quo]
+    [quo.theme]
+    [react-native.core :as rn]
+    [react-native.gesture :as gesture]
+    [status-im.common.resources :as resources]
+    [status-im.contexts.chat.messenger.menus.pinned-messages.style :as style]
+    [status-im.contexts.chat.messenger.messages.content.view :as message]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (def list-key-fn #(or (:message-id %) (:value %)))
 
@@ -59,14 +59,16 @@
           :channel-name    (:chat-name current-chat)}])]
      (if (pos? (count pinned))
        [rn/flat-list
-        {:data        pinned
-         :render-data (assoc render-data :disable-message-long-press? disable-message-long-press?)
-         :render-fn   message-render-fn
-         :footer      [rn/view {:style style/list-footer}]
+        {:data                    pinned
+         :render-data             (assoc render-data
+                                         :disable-message-long-press?
+                                         disable-message-long-press?)
+         :render-fn               message-render-fn
+         :footer                  [rn/view {:style style/list-footer}]
          :content-container-style {:padding-top    8
-                                   :padding-bottom 8}
-         :key-fn      list-key-fn
-         :separator   [quo/separator {:style {:margin-vertical 8}}]}]
+                                   :padding-bottom 0}
+         :key-fn                  list-key-fn
+         :separator               [quo/separator {:style {:margin-vertical 8}}]}]
        [empty-pinned-messages-state
         {:theme theme}])]))
 

src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [quo.core :as quo]
     [quo.theme :as quo.theme]
+    [react-native.core :as rn]
     [status-im.constants :as constants]
     [status-im.contexts.chat.messenger.messages.drawers.view :as drawers]
     [utils.re-frame :as rf]))
@@ -54,7 +55,7 @@
 (defn- view-internal
   [{:keys [message-id chat-id pinned-by preview? theme]} user-message-content]
   (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])]
-    [:<>
+    [rn/view {:style {:padding-bottom 12}}
      (when (seq reactions)
        [quo/react
         {:container-style {:margin-left 44

src/status_im/contexts/chat/messenger/messages/content/style.cljs

@@ -1,6 +1,6 @@
 (ns status-im.contexts.chat.messenger.messages.content.style
   (:require
-   [quo.foundations.colors :as colors]))
+    [quo.foundations.colors :as colors]))
 
 (def ^:private message-padding-scaling-ratio 4.5)
 
@@ -23,9 +23,9 @@
    :padding-bottom     (if in-pinned-view?
                          5
                          (when (or small-screen?
-                                 (and
-                                  (> 3 window-scale)
-                                  six-reactions?))
+                                   (and
+                                    (> 3 window-scale)
+                                    six-reactions?))
                            (* message-padding-scaling-ratio window-scale)))
    :opacity            (if (and outgoing (= outgoing-status :sending))
                          0.5

src/status_im/contexts/chat/messenger/messages/content/view.cljs

@@ -1,36 +1,36 @@
 (ns status-im.contexts.chat.messenger.messages.content.view
   (:require
-   [clojure.string :as string]
-   [legacy.status-im.ui.screens.chat.message.legacy-view :as old-message]
-   [quo.core :as quo]
-   [quo.foundations.colors :as colors]
-   [quo.theme :as quo.theme]
-   [react-native.core :as rn]
-   [react-native.fast-image :as fast-image]
-   [react-native.gesture :as gesture]
-   [react-native.platform :as platform]
-   [reagent.core :as reagent]
-   [status-im.common.not-implemented :as not-implemented]
-   [status-im.constants :as constants]
-   [status-im.contexts.chat.messenger.composer.reply.view :as reply]
-   [status-im.contexts.chat.messenger.messages.avatar.view :as avatar]
-   [status-im.contexts.chat.messenger.messages.content.album.view :as album]
-   [status-im.contexts.chat.messenger.messages.content.audio.view :as audio]
-   [status-im.contexts.chat.messenger.messages.content.deleted.view :as content.deleted]
-   [status-im.contexts.chat.messenger.messages.content.emoji-message.view :as emoji-message]
-   [status-im.contexts.chat.messenger.messages.content.image.view :as image]
-   [status-im.contexts.chat.messenger.messages.content.pin.view :as pin]
-   [status-im.contexts.chat.messenger.messages.content.reactions.view :as reactions]
-   [status-im.contexts.chat.messenger.messages.content.status.view :as status]
-   [status-im.contexts.chat.messenger.messages.content.sticker-message.view :as sticker-message]
-   [status-im.contexts.chat.messenger.messages.content.style :as style]
-   [status-im.contexts.chat.messenger.messages.content.system.text.view :as system.text]
-   [status-im.contexts.chat.messenger.messages.content.text.view :as content.text]
-   [status-im.contexts.chat.messenger.messages.content.unknown.view :as content.unknown]
-   [status-im.contexts.chat.messenger.messages.drawers.view :as drawers]
-   [utils.address :as address]
-   [utils.datetime :as datetime]
-   [utils.re-frame :as rf]))
+    [clojure.string :as string]
+    [legacy.status-im.ui.screens.chat.message.legacy-view :as old-message]
+    [quo.core :as quo]
+    [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [react-native.fast-image :as fast-image]
+    [react-native.gesture :as gesture]
+    [react-native.platform :as platform]
+    [reagent.core :as reagent]
+    [status-im.common.not-implemented :as not-implemented]
+    [status-im.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.reply.view :as reply]
+    [status-im.contexts.chat.messenger.messages.avatar.view :as avatar]
+    [status-im.contexts.chat.messenger.messages.content.album.view :as album]
+    [status-im.contexts.chat.messenger.messages.content.audio.view :as audio]
+    [status-im.contexts.chat.messenger.messages.content.deleted.view :as content.deleted]
+    [status-im.contexts.chat.messenger.messages.content.emoji-message.view :as emoji-message]
+    [status-im.contexts.chat.messenger.messages.content.image.view :as image]
+    [status-im.contexts.chat.messenger.messages.content.pin.view :as pin]
+    [status-im.contexts.chat.messenger.messages.content.reactions.view :as reactions]
+    [status-im.contexts.chat.messenger.messages.content.status.view :as status]
+    [status-im.contexts.chat.messenger.messages.content.sticker-message.view :as sticker-message]
+    [status-im.contexts.chat.messenger.messages.content.style :as style]
+    [status-im.contexts.chat.messenger.messages.content.system.text.view :as system.text]
+    [status-im.contexts.chat.messenger.messages.content.text.view :as content.text]
+    [status-im.contexts.chat.messenger.messages.content.unknown.view :as content.unknown]
+    [status-im.contexts.chat.messenger.messages.drawers.view :as drawers]
+    [utils.address :as address]
+    [utils.datetime :as datetime]
+    [utils.re-frame :as rf]))
 
 (def delivery-state-showing-time-ms 3000)
 
@@ -184,6 +184,7 @@
             six-reactions?                              (-> reactions
                                                             count
                                                             (= 6))]
+        (js/console.log (str "ewvewbewb " reactions "message id " message-id))
         [rn/touchable-highlight
          {:accessibility-label (if (and outgoing (= outgoing-status :sending))
                                  :message-sending
@@ -260,7 +261,7 @@
 
              (when @show-delivery-state?
                [status/status outgoing-status])])]
-          (when show-reactions?
+          (when (and show-reactions? (seq reactions))
             [reactions/message-reactions-row (assoc message-data :preview? preview?)
              [rn/view {:pointer-events :none}
               [user-message-content-internal

src/status_im/contexts/chat/messenger/messages/pin/events.cljs

@@ -1,16 +1,16 @@
 (ns status-im.contexts.chat.messenger.messages.pin.events
   (:require
-   [legacy.status-im.data-store.messages :as data-store.messages]
-   [legacy.status-im.data-store.pin-messages :as data-store.pin-messages]
-   [re-frame.core :as re-frame]
-   [status-im.common.toasts.events :as toasts]
-   [status-im.constants :as constants]
-   [status-im.contexts.chat.messenger.menus.pinned-messages.view :as pinned-messages-menu]
-   [status-im.contexts.chat.messenger.messages.list.events :as message-list]
-   [status-im.navigation.events :as navigation]
-   [taoensso.timbre :as log]
-   [utils.i18n :as i18n]
-   [utils.re-frame :as rf]))
+    [legacy.status-im.data-store.messages :as data-store.messages]
+    [legacy.status-im.data-store.pin-messages :as data-store.pin-messages]
+    [re-frame.core :as re-frame]
+    [status-im.common.toasts.events :as toasts]
+    [status-im.constants :as constants]
+    [status-im.contexts.chat.messenger.menus.pinned-messages.view :as pinned-messages-menu]
+    [status-im.contexts.chat.messenger.messages.list.events :as message-list]
+    [status-im.navigation.events :as navigation]
+    [taoensso.timbre :as log]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (rf/defn handle-failed-loading-pin-messages
   {:events [:pin-message/failed-loading-pin-messages]}
@@ -46,14 +46,14 @@
     (if (and message
              (aget message "message"))
       (assoc-in db
-                [:pin-messages
-                 (aget pinned-message "localChatId")
-                 (aget pinned-message "message_id")]
-                (-> (aget message "message")
-                    (js->clj :keywordize-keys true)
-                    data-store.messages/<-rpc
-                    (assoc :pinned-by (aget message "pinnedBy")
-                           :pinned-at (aget message "pinnedAt"))))
+       [:pin-messages
+        (aget pinned-message "localChatId")
+        (aget pinned-message "message_id")]
+       (-> (aget message "message")
+           (js->clj :keywordize-keys true)
+           data-store.messages/<-rpc
+           (assoc :pinned-by (aget message "pinnedBy")
+                  :pinned-at (aget message "pinnedAt"))))
       db)))
 
 (rf/defn receive-signal
@@ -73,8 +73,8 @@
                                 pin-messages)]
     {:db
      (assoc-in db
-               [:pin-message-lists current-chat-id]
-               (message-list/add-many nil (vals (get-in db [:pin-messages current-chat-id]))))}))
+      [:pin-message-lists current-chat-id]
+      (message-list/add-many nil (vals (get-in db [:pin-messages current-chat-id]))))}))
 
 (rf/defn send-pin-message-locally
   "Pin message, rebuild pinned messages list locally"
@@ -87,12 +87,12 @@
               {:db (cond-> db
                      pinned
                      (->
-                      (update-in [:pin-message-lists chat-id] message-list/add message)
-                      (assoc-in [:pin-messages chat-id message-id] message))
+                       (update-in [:pin-message-lists chat-id] message-list/add message)
+                       (assoc-in [:pin-messages chat-id message-id] message))
                      (and (not pinned) pin-message-lists-exist?)
                      (->
-                      (update-in [:pin-message-lists chat-id] message-list/remove-message pin-message)
-                      (update-in [:pin-messages chat-id] dissoc message-id)))})))
+                       (update-in [:pin-message-lists chat-id] message-list/remove-message pin-message)
+                       (update-in [:pin-messages chat-id] dissoc message-id)))})))
 
 (rf/defn send-pin-message
   "Pin message, rebuild pinned messages list"
@@ -130,7 +130,9 @@
   [cofx chat-id]
   (navigation/show-bottom-sheet
    cofx
-   {:padding-bottom-override  21
-    :content (fn [] [pinned-messages-menu/view
-                     {:chat-id                     chat-id
-                      :disable-message-long-press? (not= :chat (get-in cofx [:db :view-id]))}])}))
+   {:padding-bottom-override 21
+    :content                 (fn [] [pinned-messages-menu/view
+                                     {:chat-id                     chat-id
+                                      :disable-message-long-press? (not= :chat
+                                                                         (get-in cofx
+                                                                                 [:db :view-id]))}])}))