review

Author: OmarBasem

src/status_im2/constants.cljs

@@ -336,3 +336,5 @@
 (def ^:const auth-method-biometric "biometric")
 (def ^:const auth-method-biometric-prepare "biometric-prepare")
 (def ^:const auth-method-none "none")
+
+(def ^:const new-composer-enabled? true)

src/status_im2/contexts/chat/bottom_sheet_composer/reply/style.cljs

@@ -7,11 +7,10 @@
    :flex-direction :row})
 
 (defn quoted-message
-  [pin? in-chat-input?]
+  [pin?]
   (merge {:flex-direction :row
           :flex           1
-          :align-items    :center
-          :width          (if in-chat-input? "100%" "45%")}
+          :align-items    :center}
          (when-not pin?
            {:left         22
             :margin-right 22})))
@@ -36,4 +35,9 @@
    :bottom   0
    :width    "50%"})
 
+(def reply-deleted-message
+  {:text-transform :none
+   :margin-left    4
+   :margin-top     2})
+
 

src/status_im2/contexts/chat/bottom_sheet_composer/reply/view.cljs

@@ -32,9 +32,9 @@
 
 (defn format-author
   [contact-name]
-  (let [author (if (or (= (aget contact-name 0) "@")
+  (let [author (if (or (= (first contact-name) "@")
                        ;; in case of replies
-                       (= (aget contact-name 1) "@"))
+                       (= (second contact-name) "@"))
                  (or (stateofus/username contact-name)
                      (subs contact-name 0 81))
                  contact-name)]
@@ -57,9 +57,7 @@
      :size                :label
      :weight              :regular
      :accessibility-label :quoted-message
-     :style               {:text-transform :none
-                           :margin-left    4
-                           :margin-top     2}}
+     :style               style/reply-deleted-message}
     (i18n/label :t/message-deleted)]])
 
 (defn reply-from
@@ -98,9 +96,9 @@
           :color           (colors/theme-colors colors/neutral-40 colors/neutral-60)
           :container-style {:position :absolute :left 0 :bottom -4 :width 16 :height 16}}])
       (if (or deleted? deleted-for-me?)
-        [rn/view {:style (style/quoted-message pin? in-chat-input?)}
+        [rn/view {:style (style/quoted-message pin?)}
          [reply-deleted-message]]
-        [rn/view {:style (style/quoted-message pin? in-chat-input?)}
+        [rn/view {:style (style/quoted-message pin?)}
          [reply-from
           {:from               from
            :identicon          identicon
@@ -141,13 +139,14 @@
          :end    {:x 0.7 :y 0}
          :style  style/gradient}])]))
 
-(defn view
+(defn- f-view
   []
-  [:f>
-   (fn []
-     (let [reply  (rf/sub [:chats/reply-message])
-           height (reanimated/use-shared-value (if reply constants/reply-container-height 0))]
-       (rn/use-effect #(reanimated/animate height (if reply constants/reply-container-height 0)) [reply])
-       [reanimated/view {:style (reanimated/apply-animations-to-style {:height height} {})}
-        (when reply [reply-message reply true false false])]))])
+  (let [reply  (rf/sub [:chats/reply-message])
+        height (reanimated/use-shared-value (if reply constants/reply-container-height 0))]
+    (rn/use-effect #(reanimated/animate height (if reply constants/reply-container-height 0)) [reply])
+    [reanimated/view {:style (reanimated/apply-animations-to-style {:height height} {})}
+     (when reply [reply-message reply true false false])]))
 
+(defn view
+  []
+  [:f> f-view])

src/status_im2/contexts/chat/messages/list/new_temp_view.cljs

@@ -150,22 +150,27 @@
         {:position :absolute
          :bottom   (+ (:bottom insets) composer.constants/composer-default-height 6)}]])))
 
+(defn use-keyboard-visibility
+  []
+  (let [show-listener (atom nil)
+        hide-listener (atom nil)
+        shown?        (atom nil)]
+    (rn/use-effect
+     (fn []
+       (reset! show-listener
+         (.addListener rn/keyboard "keyboardWillShow" #(reset! shown? true)))
+       (reset! hide-listener
+         (.addListener rn/keyboard "keyboardWillHide" #(reset! shown? false)))
+       (fn []
+         (.remove ^js @show-listener)
+         (.remove ^js @hide-listener))))
+    {:shown? shown?}))
+
+(defn- f-messages-list
+  [chat insets]
+  (let [{keyboard-shown? :shown?} (use-keyboard-visibility)]
+    [messages-list-content chat insets keyboard-shown?]))
+
 (defn messages-list
   [chat insets]
-  [:f>
-   (fn []
-     (let [keyboard-show-listener (atom nil)
-           keyboard-hide-listener (atom nil)
-           keyboard-shown         (atom false)]
-       (rn/use-effect
-        (fn []
-          (reset! keyboard-show-listener (.addListener rn/keyboard
-                                                       "keyboardWillShow"
-                                                       #(reset! keyboard-shown true)))
-          (reset! keyboard-hide-listener (.addListener rn/keyboard
-                                                       "keyboardWillHide"
-                                                       #(reset! keyboard-shown false)))
-          (fn []
-            (.remove ^js @keyboard-show-listener)
-            (.remove ^js @keyboard-hide-listener))))
-       [messages-list-content chat insets keyboard-shown]))])
+  [:f> f-messages-list chat insets])

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -13,8 +13,7 @@
             [status-im2.contexts.chat.messages.content.view :as message]
             [status-im2.contexts.chat.messages.list.state :as state]
             [utils.i18n :as i18n]
-            [utils.re-frame :as rf]
-            [status-im2.contexts.chat.bottom-sheet-composer.constants :as composer.constants]))
+            [utils.re-frame :as rf]))
 
 (defonce messages-list-ref (atom nil))
 
@@ -91,7 +90,7 @@
 
 (defn render-fn
   [{:keys [type value deleted? deleted-for-me? content-type] :as message-data} _ _
-   {:keys [context keyboard-shown]}]
+   {:keys [keyboard-shown context]}]
   [rn/view {:style (when platform/android? {:scaleY -1})}
    (if (= type :datemark)
      [quo/divider-date value]
@@ -103,69 +102,47 @@
           [content.deleted/deleted-message message-data context]
           [message/message-with-reactions message-data context keyboard-shown])]))])
 
-(defn messages-list-content
-  [{:keys [chat-id] :as chat} insets keyboard-shown]
-  (fn []
-    (let [context  (rf/sub [:chats/current-chat-message-list-view-context])
-          messages (rf/sub [:chats/raw-chat-messages-stream chat-id])]
-      [rn/view
-       {:style {:flex 1}}
-       ;; NOTE: DO NOT use anonymous functions for handlers
-       [rn/flat-list
-        {:key-fn                       list-key-fn
-         :ref                          list-ref
-         :header                       [list-header chat]
-         :footer                       [list-footer chat]
-         :data                         messages
-         :render-data                  {:context        context
-                                        :keyboard-shown keyboard-shown}
-         :render-fn                    render-fn
-         :on-viewable-items-changed    on-viewable-items-changed
-         :on-end-reached               list-on-end-reached
-         :on-scroll-to-index-failed    identity ; don't remove this
-         :content-container-style      {:padding-top    (+ composer.constants/composer-default-height
-                                                           (:bottom insets)
-                                                           32)
-                                        :padding-bottom 16}
-         :scroll-indicator-insets      {:top (+ composer.constants/composer-default-height
-                                                (:bottom insets))}
-         :keyboard-dismiss-mode        :interactive
-         :keyboard-should-persist-taps :handled
-         :on-momentum-scroll-begin     state/start-scrolling
-         :on-momentum-scroll-end       state/stop-scrolling
-         :scroll-event-throttle        16
-         :on-scroll                    on-scroll
-         ;; TODO https://github.com/facebook/react-native/issues/30034
-         :inverted                     (when platform/ios? true)
-         :style                        (when platform/android? {:scaleY -1})
-         :on-layout                    on-messages-view-layout}]
-       [quo/floating-shell-button
-        (merge {:jump-to
-                {:on-press #(do
-                              (rf/dispatch [:chat/close true])
-                              (rf/dispatch [:shell/navigate-to-jump-to]))
-                 :label    (i18n/label :t/jump-to)}}
-               (when @show-floating-scroll-down-button
-                 {:scroll-to-bottom {:on-press scroll-to-bottom}}))
-        {:position :absolute
-         :bottom   (+ (:bottom insets) composer.constants/composer-default-height 6)}]])))
-
 (defn messages-list
-  [chat insets]
-  [:f>
-   (fn []
-     (let [keyboard-show-listener (atom nil)
-           keyboard-hide-listener (atom nil)
-           keyboard-shown         (atom false)]
-       (rn/use-effect
-        (fn []
-          (reset! keyboard-show-listener (.addListener rn/keyboard
-                                                       "keyboardWillShow"
-                                                       #(reset! keyboard-shown true)))
-          (reset! keyboard-hide-listener (.addListener rn/keyboard
-                                                       "keyboardWillHide"
-                                                       #(reset! keyboard-shown false)))
-          (fn []
-            (.remove ^js @keyboard-show-listener)
-            (.remove ^js @keyboard-hide-listener))))
-       [messages-list-content chat insets keyboard-shown]))])
+  [{:keys [chat-id] :as chat}]
+  (let [context        (rf/sub [:chats/current-chat-message-list-view-context])
+        messages       (rf/sub [:chats/raw-chat-messages-stream chat-id])
+        keyboard-shown (atom false)
+        bottom-space   15]
+    [rn/view
+     {:style {:flex 1}}
+     ;; NOTE: DO NOT use anonymous functions for handlers
+     [rn/flat-list
+      {:key-fn                       list-key-fn
+       :ref                          list-ref
+       :header                       [list-header chat]
+       :footer                       [list-footer chat]
+       :data                         messages
+       :render-data                  {:context        context
+                                      :keyboard-shown keyboard-shown}
+       :render-fn                    render-fn
+       :on-viewable-items-changed    on-viewable-items-changed
+       :on-end-reached               list-on-end-reached
+       :on-scroll-to-index-failed    identity ; don't remove this
+       :content-container-style      {:padding-top    (+ bottom-space 32)
+                                      :padding-bottom 16}
+       :scroll-indicator-insets      {:top bottom-space} ; iOS only
+       :keyboard-dismiss-mode        :interactive
+       :keyboard-should-persist-taps :handled
+       :onMomentumScrollBegin        state/start-scrolling
+       :onMomentumScrollEnd          state/stop-scrolling
+       :scrollEventThrottle          16
+       :on-scroll                    on-scroll
+       ;; TODO https://github.com/facebook/react-native/issues/30034
+       :inverted                     (when platform/ios? true)
+       :style                        (when platform/android? {:scaleY -1})
+       :on-layout                    on-messages-view-layout}]
+     [quo/floating-shell-button
+      (merge {:jump-to
+              {:on-press #(do
+                            (rf/dispatch [:chat/close true])
+                            (rf/dispatch [:shell/navigate-to-jump-to]))
+               :label    (i18n/label :t/jump-to)}}
+             (when @show-floating-scroll-down-button
+               {:scroll-to-bottom {:on-press scroll-to-bottom}}))
+      {:position :absolute
+       :bottom   6}]]))

src/status_im2/contexts/chat/messages/view.cljs

@@ -6,9 +6,11 @@
             [reagent.core :as reagent]
             [status-im2.constants :as constants]
             [status-im2.contexts.chat.bottom-sheet-composer.view :as bottom-sheet-composer]
+            [status-im2.contexts.chat.messages.composer.view :as composer]
             [status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as
              contact-requests.bottom-drawer]
             [status-im2.contexts.chat.messages.list.view :as messages.list]
+            [status-im2.contexts.chat.messages.list.new-temp-view :as messages.list.new]
             [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
             [status-im2.navigation.state :as navigation.state]
             [utils.debounce :as debounce]
@@ -28,16 +30,16 @@
   []
   (let [{:keys [group-chat chat-id chat-name emoji
                 chat-type]} (rf/sub [:chats/current-chat])
-        display-name     (if (= chat-type constants/one-to-one-chat-type)
-                           (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
-                           (str emoji " " chat-name))
-        online?          (rf/sub [:visibility-status-updates/online? chat-id])
-        contact          (when-not group-chat
-                           (rf/sub [:contacts/contact-by-address chat-id]))
-        photo-path       (rf/sub [:chats/photo-path chat-id])
-        avatar-image-key (if (seq (:images contact))
-                           :profile-picture
-                           :ring-background)]
+        display-name        (if (= chat-type constants/one-to-one-chat-type)
+                              (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
+                              (str emoji " " chat-name))
+        online?             (rf/sub [:visibility-status-updates/online? chat-id])
+        contact             (when-not group-chat
+                              (rf/sub [:contacts/contact-by-address chat-id]))
+        photo-path          (rf/sub [:chats/photo-path chat-id])
+        avatar-image-key    (if (seq (:images contact))
+                              :profile-picture
+                              :ring-background)]
     [quo/page-nav
      {:align-mid?            true
       :mid-section           (if group-chat
@@ -75,17 +77,21 @@
       :keyboardVerticalOffset (- (:bottom insets))}
      [page-nav]
      [pin.banner/banner chat-id]
-     [messages.list/messages-list chat insets]
+     (if constants/new-composer-enabled?
+       [messages.list.new/messages-list chat insets]
+       [messages.list/messages-list chat insets])
      (if-not able-to-send-message?
        [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]
-       [bottom-sheet-composer/bottom-sheet-composer insets])]))
+       (if constants/new-composer-enabled?
+         [bottom-sheet-composer/bottom-sheet-composer insets]
+         [:f> composer/f-composer chat-id insets]))]))
 
 
 (defn chat
   []
   (reagent/create-class
-    {:component-did-mount    (fn []
-                               (rn/hw-back-remove-listener navigate-back-handler)
-                               (rn/hw-back-add-listener navigate-back-handler))
-     :component-will-unmount (fn [] (rn/hw-back-remove-listener navigate-back-handler))
-     :reagent-render         chat-render}))
+   {:component-did-mount    (fn []
+                              (rn/hw-back-remove-listener navigate-back-handler)
+                              (rn/hw-back-add-listener navigate-back-handler))
+    :component-will-unmount (fn [] (rn/hw-back-remove-listener navigate-back-handler))
+    :reagent-render         chat-render}))