From b3a03119d12e62422ca056a3d300d67e64e31cb2 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Mon, 23 Jan 2023 20:23:41 +0530 Subject: [PATCH] Implement unread badge for bottom tabs (#14856) --- src/quo2/components/tags/context_tags.cljs | 2 +- .../contexts/shell/bottom_tabs.cljs | 37 ++++++++++--------- src/status_im2/subs/shell.cljs | 33 +++++++++++++++++ 3 files changed, 54 insertions(+), 18 deletions(-) diff --git a/src/quo2/components/tags/context_tags.cljs b/src/quo2/components/tags/context_tags.cljs index ba54780208..15fab54259 100644 --- a/src/quo2/components/tags/context_tags.cljs +++ b/src/quo2/components/tags/context_tags.cljs @@ -64,7 +64,7 @@ [rn/image {:style {:width 20 :border-radius 10 - :background-color :red + :background-color :white :height 20} :source photo}] [rn/view diff --git a/src/status_im2/contexts/shell/bottom_tabs.cljs b/src/status_im2/contexts/shell/bottom_tabs.cljs index 17b6e66ffd..1442d177cc 100644 --- a/src/status_im2/contexts/shell/bottom_tabs.cljs +++ b/src/status_im2/contexts/shell/bottom_tabs.cljs @@ -1,35 +1,38 @@ (ns status-im2.contexts.shell.bottom-tabs (:require [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab] [react-native.core :as rn] + [utils.re-frame :as rf] [react-native.reanimated :as reanimated] [status-im2.contexts.shell.animation :as animation] [status-im2.contexts.shell.constants :as shell.constants] [status-im2.contexts.shell.style :as styles])) (defn bottom-tab - [icon stack-id shared-values] + [icon stack-id shared-values notifications-data] [bottom-nav-tab/bottom-nav-tab - {:test-ID stack-id - :icon icon - :icon-color-anim (get - shared-values - (get shell.constants/tabs-icon-color-keywords stack-id)) - :on-press #(animation/bottom-tab-on-press stack-id) - :accessibility-label (str (name stack-id) "-tab")}]) + (assoc (get notifications-data stack-id) + :test-ID stack-id + :icon icon + :icon-color-anim (get + shared-values + (get shell.constants/tabs-icon-color-keywords stack-id)) + :on-press #(animation/bottom-tab-on-press stack-id) + :accessibility-label (str (name stack-id) "-tab"))]) (defn bottom-tabs [] [:f> (fn [] - (let [shared-values @animation/shared-values-atom - original-style (styles/bottom-tabs-container @animation/pass-through?) - animated-style (reanimated/apply-animations-to-style - {:height (:bottom-tabs-height shared-values)} - original-style)] + (let [notifications-data (rf/sub [:shell/bottom-tabs-notifications-data]) + shared-values @animation/shared-values-atom + original-style (styles/bottom-tabs-container @animation/pass-through?) + animated-style (reanimated/apply-animations-to-style + {:height (:bottom-tabs-height shared-values)} + original-style)] (animation/load-stack @animation/selected-stack-id) [reanimated/view {:style animated-style} [rn/view {:style (styles/bottom-tabs)} - [bottom-tab :i/communities :communities-stack shared-values] - [bottom-tab :i/messages :chats-stack shared-values] - [bottom-tab :i/wallet :wallet-stack shared-values] - [bottom-tab :i/browser :browser-stack shared-values]]]))]) + [bottom-tab :i/communities :communities-stack shared-values notifications-data] + [bottom-tab :i/messages :chats-stack shared-values notifications-data] + [bottom-tab :i/wallet :wallet-stack shared-values notifications-data] + [bottom-tab :i/browser :browser-stack shared-values notifications-data]]]))]) diff --git a/src/status_im2/subs/shell.cljs b/src/status_im2/subs/shell.cljs index 6dc0c9c8eb..d1828aa956 100644 --- a/src/status_im2/subs/shell.cljs +++ b/src/status_im2/subs/shell.cljs @@ -147,3 +147,36 @@ (let [community-id (:community-id channel) community (get communities (:community-id channel))] (community-channel-card community community-id channel channel-id)))) + +(re-frame/reg-sub + :shell/bottom-tabs-notifications-data + :<- [:chats/chats] + (fn [chats] + (let [{:keys [chats-stack community-stack]} + (reduce + (fn [acc [_ {:keys [unviewed-messages-count unviewed-mentions-count chat-type]}]] + (case chat-type + constants/community-chat-type + (-> acc + (update-in [:community-stack :unviewed-messages-count] + unviewed-messages-count) + (update-in [:community-stack :unviewed-mentions-count] + unviewed-mentions-count)) + + (constants/private-group-chat-type constants/one-to-one-chat-type) + (-> acc + (update-in [:chats-stack :unviewed-messages-count] + unviewed-messages-count) + (update-in [:chats-stack :unviewed-mentions-count] + unviewed-mentions-count)) + + acc)) + {:chats-stack {:unviewed-messages-count 0 :unviewed-mentions-count 0} + :community-stack {:unviewed-messages-count 0 :unviewed-mentions-count 0}} + chats)] + {:communities-stack + {:new-notifications? (pos? (:unviewed-messages-count community-stack)) + :notification-indicator (if (pos? (:unviewed-mentions-count community-stack)) + :counter + :unread-dot) + :counter-label (:unviewed-mentions-count community-stack)} + :chats-stack + {:new-notifications? (pos? (:unviewed-messages-count chats-stack)) + :notification-indicator (if (pos? (:unviewed-mentions-count chats-stack)) :counter :unread-dot) + :counter-label (:unviewed-mentions-count chats-stack)}})))