status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#16078] - Add empty state component to messaging tabs

This commit is contained in:
Ulises Manuel Cárdenas 2023-06-08 06:21:32 -06:00 committed by GitHub
parent 4695ef65d0
commit 0fcb8a33aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 100 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/status_im2/contexts/chat/home/style.cljs
View File

@ -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})

150
src/status_im2/contexts/chat/home/view.cljs
View File

@ -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)))}]]]))

8
translations/en.json
View File

@ -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",