refactor

https://github.com/status-im/status-go/compare/b4bdfd3d...6abbe98c

src/status_im/chat/models/input.cljs

@@ -184,9 +184,11 @@
 
 (defn build-image-messages
   [{db :db} chat-id]
-  (let [images (get-in db [:chat/inputs chat-id :metadata :sending-image])]
+  (let [images   (get-in db [:chat/inputs chat-id :metadata :sending-image])
+        album-id (str (random-uuid))]
     (mapv (fn [[_ {:keys [uri]}]]
             {:chat-id      chat-id
+             :album-id     album-id
              :content-type constants/content-type-image
              :image-path   (utils/safe-replace uri #"file://" "")
              :text         (i18n/label :t/update-to-see-image {"locale" "en"})})

src/status_im/chat/models/loading.cljs

@@ -4,9 +4,9 @@
             [status-im.constants :as constants]
             [status-im.data-store.chats :as data-store.chats]
             [status-im.data-store.messages :as data-store.messages]
-            [utils.re-frame :as rf]
             [status-im2.contexts.activity-center.events :as activity-center]
-            [taoensso.timbre :as log]))
+            [taoensso.timbre :as log]
+            [utils.re-frame :as rf]))
 
 (defn cursor->clock-value
   [^js cursor]
@@ -101,6 +101,12 @@
                                     :on-success #(re-frame/dispatch
                                                   [::mark-all-read-in-community-successful %])}]}))
 
+(defn mark-album
+  [message]
+  (if (:album-id message)
+    (assoc message :albumize? true)
+    message))
+
 (rf/defn messages-loaded
   "Loads more messages for current chat"
   {:events [::messages-loaded]}
@@ -131,8 +137,8 @@
           current-clock-value                                  (get-in db
                                                                        [:pagination-info chat-id
                                                                         :cursor-clock-value])
-          clock-value                                          (when cursor
-                                                                 (cursor->clock-value cursor))]
+          clock-value                                          (when cursor (cursor->clock-value cursor))
+          new-messages                                         (map mark-album new-messages)]
       {:dispatch [:chat/add-senders-to-chat-users (vals senders)]
        :db       (-> db
                      (update-in [:pagination-info chat-id :cursor-clock-value]

src/status_im/chat/models/message_list.cljs

@@ -20,7 +20,8 @@
            from
            outgoing
            whisper-timestamp
-           deleted-for-me?]}]
+           deleted-for-me?
+           albumize?]}]
   (-> {:whisper-timestamp whisper-timestamp
        :from              from
        :one-to-one?       (= constants/message-type-one-to-one message-type)
@@ -32,7 +33,8 @@
        :clock-value       clock-value
        :type              :message
        :message-id        message-id
-       :outgoing          (boolean outgoing)}
+       :outgoing          (boolean outgoing)
+       :albumize?         albumize?}
       add-datemark
       add-timestamp))
 

src/status_im/data_store/messages.cljs

@@ -35,6 +35,7 @@
                                 :audioDurationMs          :audio-duration-ms
                                 :deleted                  :deleted?
                                 :deletedForMe             :deleted-for-me?
+                                :albumId                  :album-id
                                 :new                      :new?})
 
       (update :quoted-message

src/status_im/transport/message/protocol.cljs

@@ -5,6 +5,7 @@
 
 (defn build-message
   [{:keys [chat-id
+           album-id
            text
            response-to
            ens-name
@@ -15,6 +16,7 @@
            sticker
            content-type]}]
   {:chatId          chat-id
+   :albumId         album-id
    :text            text
    :responseTo      response-to
    :ensName         ens-name

src/status_im/ui/screens/screens.cljs

@@ -107,8 +107,7 @@
    [status-im.ui.screens.wallet.settings.views :as wallet-settings]
    [status-im.ui.screens.wallet.swap.views :as wallet.swap]
    [status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
-   [status-im.ui2.screens.chat.group-details.view :as group-details]
-   [status-im.ui2.screens.chat.photo-selector.view :as photo-selector]))
+   [status-im.ui2.screens.chat.group-details.view :as group-details]))
 
 (defn right-button-options
   [id icon]
@@ -206,10 +205,6 @@
     :options   {:topBar {:visible false}}
     :component pin-messages/pinned-messages}
 
-   {:name      :photo-selector
-    :options   {:topBar {:visible false}}
-    :component photo-selector/photo-selector}
-
    {:name      :group-chat-profile
     ;;TODO animated-header
     :options   {:topBar {:visible false}}

src/status_im/ui2/screens/chat/composer/view.cljs

@@ -15,7 +15,7 @@
             [status-im.ui2.screens.chat.composer.mentions :as mentions]
             [status-im.ui2.screens.chat.composer.reply :as reply]
             [status-im.ui2.screens.chat.composer.style :as style]
-            [status-im.ui2.screens.chat.photo-selector.view :as photo-selector]
+            [status-im2.contexts.chat.photo-selector.view :as photo-selector]
             [utils.re-frame :as rf]
             [status-im.utils.utils :as utils]
             [status-im2.contexts.chat.messages.list.view :refer [scroll-to-bottom]]

src/status_im2/common/constants.cljs

@@ -13,6 +13,7 @@
 (def ^:const content-type-community 9)
 (def ^:const content-type-gap 10)
 (def ^:const content-type-contact-request 11) ;; TODO: temp, will be removed
+(def ^:const content-type-album 12)
 
 (def ^:const contact-request-state-none 0)
 (def ^:const contact-request-state-mutual 1)
@@ -198,3 +199,20 @@
 
 (def ^:const delete-message-undo-time-limit-ms 4000)
 (def ^:const delete-message-for-me-undo-time-limit-ms 4000)
+
+(def ^:const album-image-sizes
+  {4        {0 146
+             1 146
+             2 146
+             3 146}
+   5        {0 146
+             1 146
+             2 97
+             3 97
+             4 97}
+   :default {0 146
+             1 146
+             2 72.5
+             3 72.5
+             4 72.5
+             5 72.5}})

src/status_im2/contexts/chat/messages/content/album/style.cljs

@@ -0,0 +1,24 @@
+(ns status-im2.contexts.chat.messages.content.album.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def album-container
+  {:flex-direction :row
+   :flex-wrap      :wrap
+   :border-radius  12
+   :width          293
+   :overflow       :hidden})
+
+(defn image
+  [size index]
+  {:width         size
+   :height        size
+   :margin-left   (when (and (not= index 0) (not= index 2)) 1)
+   :margin-bottom (when (< index 2) 1)})
+
+(def overlay
+  {:position         :absolute
+   :width            73
+   :height           73
+   :background-color colors/neutral-80-opa-60
+   :justify-content  :center
+   :align-items      :center})

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

@@ -0,0 +1,28 @@
+(ns status-im2.contexts.chat.messages.content.album.view
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]
+            [status-im2.contexts.chat.messages.content.album.style :as style]
+            [status-im2.common.constants :as constants]))
+
+
+(defn album-message
+  [message]
+  [rn/view
+   {:style style/album-container}
+   (map-indexed (fn [index item]
+                  (let [images-count    (count (:album message))
+                        images-size-key (if (< images-count 6) images-count :default)
+                        size            (get-in constants/album-image-sizes [images-size-key index])]
+                    [rn/view {:key (:message-id item)}
+                     [fast-image/fast-image
+                      {:style  (style/image size index)
+                       :source {:uri (:image (:content item))}}]
+                     (when (and (> images-count 6) (= index 5))
+                       [rn/view {:style style/overlay}
+                        [quo/text
+                         {:weight :bold
+                          :size   :heading-2
+                          :style  {:color colors/white}} (str "+" (- images-count 5))]])]))
+                (:album message))])

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

@@ -10,6 +10,7 @@
             [status-im2.contexts.chat.messages.content.reactions.view :as reactions]
             [status-im2.contexts.chat.messages.content.status.view :as status]
             [status-im2.contexts.chat.messages.content.system.text.view :as system.text]
+            [status-im2.contexts.chat.messages.content.album.view :as album]
             [quo2.core :as quo]
             [utils.re-frame :as rf]
             [status-im.utils.datetime :as time]
@@ -94,6 +95,8 @@
           constants/content-type-audio   [not-implemented/not-implemented
                                           [old-message/audio message-data]]
 
+          constants/content-type-album   [album/album-message message-data]
+
           [not-implemented/not-implemented [content.unknown/unknown-content message-data]])
         [status/status message-data]]]]]))
 

src/status_im2/contexts/chat/photo_selector/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im.ui2.screens.chat.photo-selector.style
+(ns status-im2.contexts.chat.photo-selector.style
   (:require [quo2.foundations.colors :as colors]
             [react-native.platform :as platform]))
 
@@ -68,3 +68,4 @@
    :border-radius 8
    :top           8
    :right         8})
+

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

@@ -1,4 +1,4 @@
-(ns status-im.ui2.screens.chat.photo-selector.view
+(ns status-im2.contexts.chat.photo-selector.view
   (:require [i18n.i18n :as i18n]
             [quo.components.safe-area :as safe-area]
             [quo2.components.notifications.info-count :as info-count]
@@ -7,7 +7,7 @@
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
             [reagent.core :as reagent]
-            [status-im.ui2.screens.chat.photo-selector.style :as style]
+            [status-im2.contexts.chat.photo-selector.style :as style]
             [status-im.utils.core :as utils]
             [utils.re-frame :as rf]))
 
@@ -25,39 +25,44 @@
            :end    {:x 0 :y 0}
            :style  (style/gradient-container safe-area)}
           [quo2/button
-           {:style    {:align-self        :stretch
-                       :margin-horizontal 20}
-            :on-press #(do
-                         (rf/dispatch [:chat.ui/clear-sending-images chat-id])
-                         (doseq [item @selected]
-                           (rf/dispatch [:chat.ui/camera-roll-pick item]))
-                         (reset! selected [])
-                         (rf/dispatch [:bottom-sheet/hide]))}
+           {:style               {:align-self        :stretch
+                                  :margin-horizontal 20}
+            :on-press            #(do
+                                    (rf/dispatch [:chat.ui/clear-sending-images chat-id])
+                                    (doseq [item @selected]
+                                      (rf/dispatch [:chat.ui/camera-roll-pick item]))
+                                    (reset! selected [])
+                                    (rf/dispatch [:bottom-sheet/hide]))
+            :accessibility-label :confirm-selection}
            (i18n/label :t/confirm-selection)]])))])
 
 (defn clear-button
   []
   (when (pos? (count @selected))
     [rn/touchable-opacity
-     {:on-press #(reset! selected [])
-      :style    (style/clear-container)}
+     {:on-press            #(reset! selected [])
+      :style               (style/clear-container)
+      :accessibility-label :clear}
      [quo2/text {:weight :medium} (i18n/label :t/clear)]]))
 
 (defn image
   [item index _ {:keys [window-width]}]
   [rn/touchable-opacity
-   {:active-opacity 1
-    :on-press       (fn []
-                      (if (some #{item} @selected)
-                        (reset! selected (vec (remove #(= % item) @selected)))
-                        (swap! selected conj item)))}
+   {:active-opacity      1
+    :on-press            (fn []
+                           (if (some #{item} @selected)
+                             (reset! selected (vec (remove #(= % item) @selected)))
+                             (swap! selected conj item)))
+    :accessibility-label (str "image-" index)}
    [rn/image
     {:source {:uri item}
      :style  (style/image window-width index)}]
    (when (some #{item} @selected)
      [rn/view {:style (style/overlay window-width)}])
    (when (some #{item} @selected)
-     [info-count/info-count {:style style/image-count}
+     [info-count/info-count
+      {:style               style/image-count
+       :accessibility-label (str "count-" index)}
       (inc (utils/first-index #(= item %) @selected))])])
 
 (defn photo-selector
@@ -100,3 +105,4 @@
                                                     has-next-page?])}]
           [bottom-gradient chat-id selected-images]]))]))
 
+

src/status_im2/subs/chat/messages.cljs

@@ -102,6 +102,25 @@
  (fn [messages]
    (empty? messages)))
 
+(defn find-albums
+  [messages]
+  (let [all-messages (atom [])
+        albums       (atom {})]
+    (doseq [message messages]
+      (let [album-id (when (:albumize? message) (:album-id message))]
+        (if (and album-id (get @albums album-id))
+          (swap! albums update-in [album-id] #(conj % message))
+          (swap! albums assoc-in [album-id] [message]))
+        (swap! all-messages conj message)
+        (when (and album-id (> (count (get @albums album-id)) 3))
+          (swap! all-messages (fn [data] (filterv #(not= album-id (:album-id %)) data)))
+          (swap! all-messages conj
+            {:album        (get @albums album-id)
+             :album-id     album-id
+             :message-id   album-id
+             :content-type constants/content-type-album}))))
+    @all-messages))
+
 (re-frame/reg-sub
  :chats/raw-chat-messages-stream
  (fn [[_ chat-id] _]
@@ -126,7 +145,8 @@
                                   (datetime/timestamp)
                                   chat-type
                                   joined
-                                  loading-messages?))))))
+                                  loading-messages?)
+           (find-albums))))))
 
 ;;we want to keep data unchanged so react doesn't change component when we leave screen
 (def memo-profile-messages-stream (atom nil))