Render chat by chat ID

- Upon logout, the chat-list-item component is reprocessed and the subscription
returns a nil chat because the app-db state has been cleaned up. We fix the
timestamp formatter to handle nil values and return a default string.

src/status_im/contexts/chat/home/chat_list_item/view.cljs

@@ -280,17 +280,31 @@
    {:style (merge style/container {:margin-horizontal 0})}
    [chat-item item]])
 
+(defn- bottom-sheet-options
+  [chat-id chat-type]
+  (cond-> {:content (fn []
+                      (let [chat (rf/sub [:chats/chat-by-id chat-id])]
+                        [actions/chat-actions chat false]))}
+    (= chat-type constants/one-to-one-chat-type)
+    (assoc :selected-item
+           (fn []
+             (let [chat (rf/sub [:chats/chat-by-id chat-id])]
+               [chat-user chat])))))
+
 (defn chat-list-item
-  [{:keys [chat-id chat-type]
-    :as   item} theme]
-  (let [customization-color (rf/sub [:profile/customization-color])]
+  [{:keys [chat-id]}]
+  (let [{:keys [chat-type]
+         :as   chat}        (rf/sub [:chats/chat-by-id chat-id])
+        customization-color (rf/sub [:profile/customization-color])
+        theme               (quo.theme/use-theme)
+        on-long-press       (rn/use-callback
+                             (fn []
+                               (rf/dispatch [:show-bottom-sheet
+                                             (bottom-sheet-options chat-id chat-type)]))
+                             [chat-id chat-type])]
     [rn/touchable-highlight
      {:style          style/container
       :on-press       (open-chat chat-id)
       :underlay-color (colors/resolve-color customization-color theme 5)
-      :on-long-press  #(rf/dispatch [:show-bottom-sheet
-                                     (cond-> {:content (fn [] [actions/chat-actions item false])}
-                                       (= chat-type constants/one-to-one-chat-type)
-                                       (assoc :selected-item
-                                              (fn [] [chat-user item])))])}
-     [chat-item item]]))
+      :on-long-press  on-long-press}
+     [chat-item chat]]))

src/status_im/contexts/chat/home/view.cljs

@@ -23,12 +23,10 @@
   [_ index]
   #js {:length 56 :offset (* 56 index) :index index})
 
-(defn filter-and-sort-items-by-tab
+(defn filter-by-tab
   [tab items]
   (let [k (if (= tab :tab/groups) :group-chat :chat-id)]
-    (->> items
-         (filter k)
-         (sort-by :timestamp >))))
+    (filter k items)))
 
 (defn empty-state-content
   [theme]
@@ -45,32 +43,43 @@
          :description (i18n/label :t/no-messages-description)
          :image       (resources/get-themed-image :cat-in-box theme)}})
 
+(defn on-end-reached
+  []
+  (re-frame/dispatch [:chat/show-more-chats]))
+
+(defn chat-key-fn
+  [chat]
+  (or (:chat-id chat) (:public-key chat) (:id chat)))
+
 (defn chats
   [{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}]
   (let [unfiltered-items (rf/sub [:chats/chats-stack-items])
-        items            (filter-and-sort-items-by-tab selected-tab unfiltered-items)]
+        items            (filter-by-tab selected-tab unfiltered-items)
+        on-scroll        (rn/use-callback
+                          (fn [event]
+                            (common.banner/set-scroll-shared-value
+                             {:scroll-input (oops/oget event
+                                                       "nativeEvent.contentOffset.y")
+                              :shared-value scroll-shared-value})))]
     (if (empty? items)
       [common.empty-state/view
        {:selected-tab selected-tab
         :tab->content (empty-state-content theme)}]
       [reanimated/flat-list
        {:ref                               set-scroll-ref
-        :key-fn                            #(or (:chat-id %) (:public-key %) (:id %))
+        :key-fn                            chat-key-fn
         :content-inset-adjustment-behavior :never
         :header                            [common.header-spacing/view]
         :get-item-layout                   get-item-layout
-        :on-end-reached                    #(re-frame/dispatch [:chat/show-more-chats])
+        :on-end-reached                    on-end-reached
         :keyboard-should-persist-taps      :always
         :data                              items
-        :render-fn                         (fn [item]
-                                             (chat-list-item/chat-list-item item theme))
+        :render-fn                         chat-list-item/chat-list-item
         :scroll-event-throttle             8
         :content-container-style           {:padding-bottom
                                             shell.constants/floating-shell-button-height
                                             :padding-top 8}
-        :on-scroll                         #(common.banner/set-scroll-shared-value
-                                             {:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
-                                              :shared-value scroll-shared-value})}])))
+        :on-scroll                         on-scroll}])))
 
 (defn contact-item-render
   [{:keys [public-key] :as item} theme]

src/status_im/subs/chats.cljs

@@ -53,22 +53,18 @@
  (fn [[{:keys [chats]}] [_ community-id chat-id]]
    (get chats (string/replace chat-id community-id ""))))
 
-(re-frame/reg-sub
- :chats/home-list-chats
+(re-frame/reg-sub :chats/home-list-chats
  :<- [:chats/chats]
  :<- [:chats-home-list]
- :<- [:multiaccount/public-key]
- (fn [[chats active-chats my-public-key]]
-   (reduce #(if-let [item (get chats %2)]
-              (let [group-chat-member? (and (chat.events/group-chat? item)
-                                            (group-chats.db/member? my-public-key item))]
-                (conj %1
-                      (assoc item
-                             :group-chat-member?
-                             group-chat-member?)))
-              %1)
-           []
-           active-chats)))
+ (fn [[chats active-chats-ids]]
+   (->> active-chats-ids
+        (keep #(get chats %))
+        (sort-by :timestamp >)
+        (map (fn [{:keys [chat-id id public-key group-chat]}]
+               {:chat-id    chat-id
+                :group-chat group-chat
+                :id         id
+                :public-key public-key})))))
 
 (re-frame/reg-sub
  :chats/chat-by-id
@@ -391,3 +387,58 @@
    (re-frame/subscribe [:chats/chat chat-id]))
  :->
  :image)
+
+(comment
+  ;; Create a large list of chats
+  (def total-chats 200)
+  (def chat' (first (vals (:chats @re-frame.db/app-db))))
+
+  (let [new-chats (->> (repeat total-chats chat')
+                       (map (fn [chat]
+                              (-> chat
+                                  (assoc :chat-id (str (random-uuid)))
+                                  (assoc-in [:last-message :content :text]
+                                            (str "Initial " (str (random-uuid)))))))
+                       (utils.collection/index-by :chat-id))]
+    (swap! re-frame.db/app-db assoc
+      :chats           new-chats
+      :chats-home-list (set (keys new-chats))))
+
+  ;; Check the update works for one.
+  (swap! re-frame.db/app-db assoc-in
+    [:chats
+     (:chat-id (nth (vals (:chats @re-frame.db/app-db)) 0))
+     :last-message
+     :content
+     :text]
+    (str (rand-int 10000)))
+
+  ;; Randomly update individual chats.
+  (def interval-id
+    (atom
+     (js/setInterval
+      (fn []
+        (let [chats      (vals (:chats @re-frame.db/app-db))
+              rand-index (rand-int (dec (count chats)))
+              rand-chat  (nth chats rand-index)]
+          (swap! re-frame.db/app-db
+            (fn [db]
+              (-> db
+                  (assoc-in [:chats
+                             (:chat-id rand-chat)
+                             :last-message
+                             :content
+                             :text]
+                            (str (rand-int 10000)))
+                  (assoc-in [:chats
+                             (:chat-id rand-chat)
+                             :timestamp]
+                            (utils.datetime/timestamp)))))))
+      ;; Exagerate the frequency of updates, but even longer delays will cause problems in
+      ;; `develop`.
+      1000)))
+
+  (do
+    (js/clearInterval @interval-id)
+    (reset! interval-id nil))
+)

src/utils/datetime.cljs

@@ -160,15 +160,16 @@
 ;;;; Timestamp formatters
 (defn- to-str
   [ms old-fmt-fn yesterday-fmt-fn today-fmt-fn]
-  (let [date      (t.coerce/from-long ms)
-        ;; NOTE(edge-case): this is wrong, it uses the current timezone offset, regardless of DST.
-        local     (t/plus date time-zone-offset)
-        today     (t/minus (t/today-at-midnight) time-zone-offset)
-        yesterday (t/plus today (t/days -1))]
-    (cond
-      (t/before? date yesterday) (old-fmt-fn local)
-      (t/before? date today)     (yesterday-fmt-fn local)
-      :else                      (today-fmt-fn local))))
+  (if-let [date (t.coerce/from-long ms)]
+    (let [;; NOTE(edge-case): this is wrong, it uses the current timezone offset, regardless of DST.
+          local     (t/plus date time-zone-offset)
+          today     (t/minus (t/today-at-midnight) time-zone-offset)
+          yesterday (t/plus today (t/days -1))]
+      (cond
+        (t/before? date yesterday) (old-fmt-fn local)
+        (t/before? date today)     (yesterday-fmt-fn local)
+        :else                      (today-fmt-fn local)))
+    ""))
 
 (defn to-short-str
   [ms]