From 77a798530d8b4beb94dbb63332bfd2311056e089 Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Thu, 2 Feb 2023 17:09:37 +0000 Subject: [PATCH] Unread indicator on community channel (#14960) * Unread indicator on community channel * Unread grey dot made a separate component --- .../common/unread_grey_dot/style.cljs | 10 ++++++ .../common/unread_grey_dot/view.cljs | 8 +++++ .../community/community_list_view.cljs | 9 ++--- src/quo2/components/list_items/channel.cljs | 11 +++--- src/status_im2/subs/communities.cljs | 19 ++++++---- src/status_im2/subs/communities_test.cljs | 36 +++++++++++++------ 6 files changed, 64 insertions(+), 29 deletions(-) create mode 100644 src/quo2/components/common/unread_grey_dot/style.cljs create mode 100644 src/quo2/components/common/unread_grey_dot/view.cljs diff --git a/src/quo2/components/common/unread_grey_dot/style.cljs b/src/quo2/components/common/unread_grey_dot/style.cljs new file mode 100644 index 0000000000..31bb93979d --- /dev/null +++ b/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)}) diff --git a/src/quo2/components/common/unread_grey_dot/view.cljs b/src/quo2/components/common/unread_grey_dot/view.cljs new file mode 100644 index 0000000000..dd49e64c97 --- /dev/null +++ b/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}]) diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs index 1c4d3cb527..4defe1b3fc 100644 --- a/src/quo2/components/community/community_list_view.cljs +++ b/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 - {:style {:width 8 - :height 8 - :border-radius 4 - :background-color (colors/theme-colors - colors/neutral-40 - colors/neutral-60)}}])) + [unread-grey-dot])) (defn communities-list-view-item [props diff --git a/src/quo2/components/list_items/channel.cljs b/src/quo2/components/list_items/channel.cljs index c13fe664f2..3023cf6ac0 100644 --- a/src/quo2/components/list_items/channel.cljs +++ b/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 - {:size 20 - :no-color true}])]]]) + [unread-grey-dot])]]]) diff --git a/src/status_im2/subs/communities.cljs b/src/status_im2/subs/communities.cljs index fb9b666801..fdf069b2b3 100644 --- a/src/status_im2/subs/communities.cljs +++ b/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])]) - (fn [[{:keys [joined categories chats]}] [_ _]] + [(re-frame/subscribe [:communities/community community-id]) + (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 - :emoji emoji - :locked? (or (not joined) (not can-post?)) - :id id}))) + {:name name + :emoji emoji + :unread-messages? (pos? unviewed-messages-count) + :locked? (or (not joined) (not can-post?)) + :id id}))) {} chats))) diff --git a/src/status_im2/subs/communities_test.cljs b/src/status_im2/subs/communities_test.cljs index 885827dadf..df6c714ce0 100644 --- a/src/status_im2/subs/communities_test.cljs +++ b/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} - "0x3" {:id "0x1" :name "chat3" :categoryID 2 :can-post? true}} + "0x2" {:id "0x2" :name "chat2" :categoryID 1 :can-post? false} + "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"} - {:name "chat2" :emoji nil :locked? true :id "0x1"}] - :category2 [{:name "chat3" :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 "0x2" :unread-messages? false}] + :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} - "0x3" {:id "0x1" :name "chat3" :can-post? true}} + "0x2" {:id "0x2" :name "chat2" :categoryID 1 :can-post? false} + "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"} - {:name "chat2" :emoji nil :locked? true :id "0x1"}] - (keyword (i18n/label :t/none)) [{:name "chat3" :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 "0x2" :unread-messages? false}] + (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"])))))