Unread indicator on community channel (#14960)

* Unread indicator on community channel
* Unread grey dot made a separate component

src/quo2/components/common/unread_grey_dot/style.cljs

@@ -0,0 +1,10 @@
+(ns quo2.components.common.unread-grey-dot.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def unread-grey-dot
+  {:width            8
+   :height           8
+   :border-radius    4
+   :background-color (colors/theme-colors
+                      colors/neutral-40
+                      colors/neutral-60)})

src/quo2/components/common/unread_grey_dot/view.cljs

@@ -0,0 +1,8 @@
+(ns quo2.components.common.unread-grey-dot.view
+  (:require [react-native.core :as rn]
+            [quo2.components.common.unread-grey-dot.style :as style]))
+
+(defn unread-grey-dot
+  []
+  [rn/view
+   {:style style/unread-grey-dot}])

src/quo2/components/community/community_list_view.cljs

@@ -6,6 +6,7 @@
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.community.icon :as community-icon]
+            [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]
             [react-native.core :as rn]))
 
 (defn notification-view
@@ -26,13 +27,7 @@
     [counter/counter {:type :default} unread-mentions-count]
 
     unread-messages?
-    [rn/view
+    [unread-grey-dot]))
-     {:style {:width            8
-              :height           8
-              :border-radius    4
-              :background-color (colors/theme-colors
-                                 colors/neutral-40
-                                 colors/neutral-60)}}]))
 
 (defn communities-list-view-item
   [props

src/quo2/components/list_items/channel.cljs

@@ -5,7 +5,8 @@
             [quo2.components.markdown.text :as quo2.text]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]))
 
 (defn list-item
   [{:keys [name locked? mentions-count unread-messages?
@@ -42,7 +43,9 @@
                         {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
        :weight :medium
        :size   :paragraph-1} (str "# " name)]]
-    [rn/view {:style {:height 20}}
+    [rn/view
+     {:style {:height          20
+              :justify-content :center}}
      (when (and (not locked?)
                 muted?)
        [quo2.icons/icon :i/muted
@@ -59,6 +62,4 @@
                 (not muted?)
                 (not (pos? (int mentions-count)))
                 unread-messages?)
-       [quo2.icons/icon :i/channel-notification
+       [unread-grey-dot])]]])
-        {:size     20
-         :no-color true}])]]])

src/status_im2/subs/communities.cljs

@@ -219,18 +219,23 @@
 (re-frame/reg-sub
  :communities/categorized-channels
  (fn [[_ community-id]]
-   [(re-frame/subscribe [:communities/community community-id])])
+   [(re-frame/subscribe [:communities/community community-id])
- (fn [[{:keys [joined categories chats]}] [_ _]]
+    (re-frame/subscribe [:chats/chats])])
+ (fn [[{:keys [joined categories chats]} full-chats-data] [_ community-id]]
    (reduce
     (fn [acc [_ {:keys [name categoryID id emoji can-post?]}]]
-      (let [category (keyword (get-in categories [categoryID :name] (i18n/label :t/none)))]
+      (let [category                          (keyword (get-in categories
+                                                               [categoryID :name]
+                                                               (i18n/label :t/none)))
+            {:keys [unviewed-messages-count]} (get full-chats-data (str community-id id))]
         (update acc
                 category
                 #(vec (conj %1 %2))
-                {:name    name
+                {:name             name
-                 :emoji   emoji
+                 :emoji            emoji
-                 :locked? (or (not joined) (not can-post?))
+                 :unread-messages? (pos? unviewed-messages-count)
-                 :id      id})))
+                 :locked?          (or (not joined) (not can-post?))
+                 :id               id})))
     {}
     chats)))
 

src/status_im2/subs/communities_test.cljs

@@ -145,14 +145,14 @@
       :communities
       {"0x1" {:id         "0x1"
               :chats      {"0x1" {:id "0x1" :name "chat1" :categoryID 1 :can-post? true}
-                           "0x2" {:id "0x1" :name "chat2" :categoryID 1 :can-post? false}
+                           "0x2" {:id "0x2" :name "chat2" :categoryID 1 :can-post? false}
-                           "0x3" {:id "0x1" :name "chat3" :categoryID 2 :can-post? true}}
+                           "0x3" {:id "0x3" :name "chat3" :categoryID 2 :can-post? true}}
               :categories {1 {:id 1 :name "category1"}
                            2 {:id 2 :name "category2"}}
               :joined     true}})
-    (is (= {:category1 [{:name "chat1" :emoji nil :locked? false :id "0x1"}
+    (is (= {:category1 [{:name "chat1" :emoji nil :locked? false :id "0x1" :unread-messages? false}
-                        {:name "chat2" :emoji nil :locked? true :id "0x1"}]
+                        {:name "chat2" :emoji nil :locked? true :id "0x2" :unread-messages? false}]
-            :category2 [{:name "chat3" :emoji nil :locked? false :id "0x1"}]}
+            :category2 [{:name "chat3" :emoji nil :locked? false :id "0x3" :unread-messages? false}]}
            (rf/sub [sub-name "0x1"]))))
   (testing "Channels without categories"
     (swap! rf-db/app-db assoc
@@ -160,12 +160,28 @@
       :communities
       {"0x1" {:id         "0x1"
               :chats      {"0x1" {:id "0x1" :name "chat1" :categoryID 1 :can-post? true}
-                           "0x2" {:id "0x1" :name "chat2" :categoryID 1 :can-post? false}
+                           "0x2" {:id "0x2" :name "chat2" :categoryID 1 :can-post? false}
-                           "0x3" {:id "0x1" :name "chat3" :can-post? true}}
+                           "0x3" {:id "0x3" :name "chat3" :can-post? true}}
               :categories {1 {:id 1 :name "category1"}
                            2 {:id 2 :name "category2"}}
               :joined     true}})
-    (is (= {:category1                     [{:name "chat1" :emoji nil :locked? false :id "0x1"}
+    (is (= {:category1 [{:name "chat1" :emoji nil :locked? false :id "0x1" :unread-messages? false}
-                                            {:name "chat2" :emoji nil :locked? true :id "0x1"}]
+                        {:name "chat2" :emoji nil :locked? true :id "0x2" :unread-messages? false}]
-            (keyword (i18n/label :t/none)) [{:name "chat3" :emoji nil :locked? false :id "0x1"}]}
+            (keyword (i18n/label :t/none))
+            [{:name "chat3" :emoji nil :locked? false :id "0x3" :unread-messages? false}]}
+           (rf/sub [sub-name "0x1"]))))
+  (testing "Unread messages"
+    (swap! rf-db/app-db assoc
+      :communities/enabled? true
+      :communities
+      {"0x1" {:id         "0x1"
+              :chats      {"0x1" {:id "0x1" :name "chat1" :categoryID 1 :can-post? true}
+                           "0x2" {:id "0x2" :name "chat2" :categoryID 1 :can-post? false}}
+              :categories {1 {:id 1 :name "category1"}}
+              :joined     true}}
+      :chats
+      {"0x10x1" {:unviewed-messages-count 1}
+       "0x10x2" {:unviewed-messages-count 0}})
+    (is (= {:category1 [{:name "chat1" :emoji nil :locked? false :id "0x1" :unread-messages? true}
+                        {:name "chat2" :emoji nil :locked? true :id "0x2" :unread-messages? false}]}
            (rf/sub [sub-name "0x1"])))))