From 0fcb8a33aaf8f2f51d159342d79506eb5c4e2deb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Thu, 8 Jun 2023 06:21:32 -0600 Subject: [PATCH] [#16078] - Add empty state component to messaging tabs --- src/status_im2/contexts/chat/home/style.cljs | 13 ++ src/status_im2/contexts/chat/home/view.cljs | 150 ++++++++++--------- translations/en.json | 8 +- 3 files changed, 100 insertions(+), 71 deletions(-) diff --git a/src/status_im2/contexts/chat/home/style.cljs b/src/status_im2/contexts/chat/home/style.cljs index 66c192fa40..a42dcf90ba 100644 --- a/src/status_im2/contexts/chat/home/style.cljs +++ b/src/status_im2/contexts/chat/home/style.cljs @@ -22,3 +22,16 @@ :right 0 :left 0 :padding-top top}) + +(def header-height 245) + +(defn header-space + [top] + {:height (+ header-height top)}) + +(defn empty-content-container + [top] + {:flex 1 + :margin-top (+ header-height top) + :margin-bottom 44 + :justify-content :center}) diff --git a/src/status_im2/contexts/chat/home/view.cljs b/src/status_im2/contexts/chat/home/view.cljs index 2081177b97..eccfe3d4eb 100644 --- a/src/status_im2/contexts/chat/home/view.cljs +++ b/src/status_im2/contexts/chat/home/view.cljs @@ -1,23 +1,24 @@ (ns status-im2.contexts.chat.home.view - (:require [utils.i18n :as i18n] - [utils.re-frame :as rf] - [quo2.core :as quo] - [re-frame.core :as re-frame] - [react-native.core :as rn] - [react-native.safe-area :as safe-area] + (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] + [quo2.theme :as theme] + [re-frame.core :as re-frame] [react-native.blur :as blur] + [react-native.core :as rn] [react-native.platform :as platform] + [react-native.safe-area :as safe-area] [status-im.multiaccounts.core :as multiaccounts] - [status-im2.contexts.chat.home.style :as style] + [status-im2.common.contact-list-item.view :as contact-list-item] [status-im2.common.contact-list.view :as contact-list] + [status-im2.common.home.actions.view :as actions] [status-im2.common.home.view :as common.home] + [status-im2.common.resources :as resources] + [status-im2.contexts.chat.actions.view :as home.sheet] [status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item] [status-im2.contexts.chat.home.contact-request.view :as contact-request] - [status-im2.common.contact-list-item.view :as contact-list-item] - [status-im2.common.home.actions.view :as actions] - [status-im2.common.resources :as resources] - [status-im2.contexts.chat.actions.view :as home.sheet])) + [status-im2.contexts.chat.home.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (defn get-item-layout [_ index] @@ -30,36 +31,51 @@ (filter key) (sort-by :timestamp >)))) -(defn welcome-blank-chats - [] - [rn/view {:style {:flex 1 :align-items :center :justify-content :center}} - [quo/icon :i/placeholder] - [quo/text {:weight :semi-bold} (i18n/label :t/no-messages)] - [quo/text (i18n/label :t/blank-messages-text)]]) +(defn empty-state-content + [selected-tab] + (case selected-tab + :tab/contacts + {:title (i18n/label :t/no-contacts) + :description (i18n/label :t/no-contacts-description) + :image (resources/get-image + (theme/theme-value :no-contacts-light :no-contacts-dark))} + :tab/groups + {:title (i18n/label :t/no-group-chats) + :description (i18n/label :t/no-group-chats-description) + :image (resources/get-image + (theme/theme-value :no-group-chats-light :no-group-chats-dark))} + :tab/recent + {:title (i18n/label :t/no-messages) + :description (i18n/label :t/no-messages-description) + :image (resources/get-image + (theme/theme-value :no-messages-light :no-messages-dark))} + nil)) + +(defn empty-state + [{:keys [selected-tab top]}] + (let [{:keys [image title description]} (empty-state-content selected-tab)] + [rn/view {:style (style/empty-content-container top)} + [quo/empty-state + {:image image + :title title + :description description}]])) (defn chats [selected-tab top] (let [unfiltered-items (rf/sub [:chats-stack-items]) items (filter-and-sort-items-by-tab selected-tab unfiltered-items)] (if (empty? items) - [welcome-blank-chats] + [empty-state {:top top :selected-tab selected-tab}] [rn/flat-list {:key-fn #(or (:chat-id %) (:public-key %) (:id %)) :content-inset-adjustment-behavior :never - :header [rn/view {:height (+ 245 top)}] + :header [rn/view {:style (style/header-space top)}] :get-item-layout get-item-layout :on-end-reached #(re-frame/dispatch [:chat/show-more-chats]) :keyboard-should-persist-taps :always :data items :render-fn chat-list-item/chat-list-item}]))) -(defn welcome-blank-contacts - [] - [rn/view {:style {:flex 1 :align-items :center :justify-content :center}} - [quo/icon :i/placeholder] - [quo/text {:weight :semi-bold} (i18n/label :t/no-contacts)] - [quo/text (i18n/label :t/blank-contacts-text)]]) - (defn contact-item-render [{:keys [public-key] :as item}] (let [current-pk (rf/sub [:multiaccount/public-key]) @@ -77,13 +93,13 @@ [pending-contact-requests top] (let [items (rf/sub [:contacts/active-sections])] (if (and (empty? items) (empty? pending-contact-requests)) - [welcome-blank-contacts] + [empty-state {:top top :selected-tab :tab/contacts}] [rn/section-list {:key-fn :public-key :get-item-layout get-item-layout :content-inset-adjustment-behavior :never :header [:<> - [rn/view {:height (+ 245 top)}] + [rn/view {:style (style/header-space top)}] (when (seq pending-contact-requests) [contact-request/contact-requests pending-contact-requests])] @@ -103,45 +119,41 @@ (defn home [] - (fn [] - (let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests]) - selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent) - {:keys [key-uid]} (rf/sub [:multiaccount]) - account (rf/sub [:profile/multiaccount]) - profile-color (:color (rf/sub [:onboarding-2/profile])) - customization-color (if profile-color - profile-color + (let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests]) + selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent) + {:keys [key-uid]} (rf/sub [:multiaccount]) + account (rf/sub [:profile/multiaccount]) + customization-color (or (:color (rf/sub [:onboarding-2/profile])) (rf/sub [:profile/customization-color key-uid])) - top (safe-area/get-top)] - [:<> - (if (= selected-tab :tab/contacts) - [contacts pending-contact-requests top] - [chats selected-tab top]) - [rn/view - {:style (style/blur-container top)} - [blur/view - {:blur-amount (if platform/ios? 20 10) - :blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight)) - :style style/blur}] - [common.home/top-nav - {:type :grey - :avatar {:customization-color customization-color - :full-name (multiaccounts/displayed-name account) - :profile-picture (multiaccounts/displayed-photo account)}}] - [common.home/title-column - {:label (i18n/label :t/messages) - :handler #(rf/dispatch [:show-bottom-sheet {:content home.sheet/new-chat}]) - :accessibility-label :new-chat-button - :customization-color customization-color}] - [quo/discover-card - {:banner (resources/get-image :invite-friends) - :title (i18n/label :t/invite-friends-to-status) - :description (i18n/label :t/share-invite-link)}] - ^{:key (str "tabs-" selected-tab)} - [quo/tabs - {:style style/tabs - :size 32 - :on-change (fn [tab] - (rf/dispatch [:messages-home/select-tab tab])) - :default-active selected-tab - :data (get-tabs-data (pos? (count pending-contact-requests)))}]]]))) + top (safe-area/get-top)] + [:<> + (if (= selected-tab :tab/contacts) + [contacts pending-contact-requests top] + [chats selected-tab top]) + [rn/view {:style (style/blur-container top)} + [blur/view + {:blur-amount (if platform/ios? 20 10) + :blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight)) + :style style/blur}] + [common.home/top-nav + {:type :grey + :avatar {:customization-color customization-color + :full-name (multiaccounts/displayed-name account) + :profile-picture (multiaccounts/displayed-photo account)}}] + [common.home/title-column + {:label (i18n/label :t/messages) + :handler #(rf/dispatch [:show-bottom-sheet {:content home.sheet/new-chat}]) + :accessibility-label :new-chat-button + :customization-color customization-color}] + [quo/discover-card + {:banner (resources/get-image :invite-friends) + :title (i18n/label :t/invite-friends-to-status) + :description (i18n/label :t/share-invite-link)}] + ^{:key (str "tabs-" selected-tab)} + [quo/tabs + {:style style/tabs + :size 32 + :on-change (fn [tab] + (rf/dispatch [:messages-home/select-tab tab])) + :default-active selected-tab + :data (get-tabs-data (pos? (count pending-contact-requests)))}]]])) diff --git a/translations/en.json b/translations/en.json index 25da42fa2b..68f72ac8a6 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1019,9 +1019,7 @@ "next": "Next", "no": "No", "no-collectibles": "No collectibles available", - "no-contacts": "No contacts yet", "no-keycard-applet-on-card": "No Keycard applet on card", - "no-messages": "No messages", "no-pairing-slots-available": "This card is already paired to 5 devices and cannot pair to this one. Please use one of the paired devices, log in with this card and free up pairing slots on the card", "no-result": "No results", "no-tokens-found": "No tokens found", @@ -2111,6 +2109,12 @@ "no-pending-communities-description": "It's toaster", "no-opened-communities": "No opened communities", "no-opened-communities-description": "But... feels good man", + "no-contacts": "No contacts", + "no-contacts-description": "This is fine, just invite your mother", + "no-group-chats": "No group chats", + "no-group-chats-description": "Much fun. Have friends. Wow!", + "no-messages": "No messages", + "no-messages-description": "Here’s a cat in a box instead", "mute-for-15-mins": "For 15 min", "mute-for-1-hour": "For 1 hour", "mute-for-8-hours": "For 8 hours",