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

Messages contact requests (#14221) 

* feat: messages contact requests
This commit is contained in:
Omar Basem 2022-10-26 10:42:53 +04:00 committed by GitHub
parent 14a5edb24b
commit 2ae57f7b21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 431 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/quo/components/bottom_sheet/view.cljs
View File

@ -44,7 +44,7 @@
(+ 50 keyboard-height-android-delta) ;; TODO : remove 50 when react-native-navigation v8 will be implemented https://github.com/wix/react-native-navigation/issues/7225
0))
min-height (+ (* styles/vertical-padding 2) (:bottom safe-area))
max-height (- window-height (:top safe-area) styles/margin-top)
max-height (- window-height (:top safe-area))
visible (react/state false)
master-translation-y (animated/use-value 0)
@ -202,10 +202,8 @@
:wait-for master-ref
:enabled (and (not disable-drag?)
(not= sheet-height max-height))})
[animated/view {:height sheet-height}
[animated/scroll-view {:bounces false
:flex 1
:scroll-enabled (= sheet-height max-height)}
[animated/view {:height sheet-height
:flex 1}
[animated/view {:style {:padding-top styles/vertical-padding
:padding-bottom (+ styles/vertical-padding
(if (and platform/ios? keyboard-shown)
@ -213,6 +211,6 @@
(:bottom safe-area)))}
:on-layout #(reset! height (.-nativeEvent.layout.height ^js %))}
(into [:<>]
(react/get-children children))]]]]]])))
(react/get-children children))]]]]])))
(def bottom-sheet (reagent/adapt-react-class (react/memo bottom-sheet-hooks)))

94
src/quo2/components/community/discover_card.cljs Normal file
View File

@ -0,0 +1,94 @@
(ns quo2.components.community.discover-card
(:require [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[status-im.ui.screens.communities.styles :as styles]
[status-im.ui.components.react :as react]))
;; Discover card placeholders images.
;; TODO replaced when real data is available
(def images
{:images [{:id 1 :column-images [{:id 1 :image ""}]}
{:id 2 :column-images [{}]}]})
(defn card-title-and-description [title description]
[react/view
{:flex 1
:padding-top 8
:padding-bottom 8
:border-radius 12}
[react/view {:flex 1
:padding-horizontal 12}
[text/text {:accessibility-label :community-name-text
:ellipsize-mode :tail
:number-of-lines 1
:weight :semi-bold
:size :paragraph-1}
title]
[text/text {:accessibility-label :community-name-text
:ellipsize-mode :tail
:number-of-lines 1
:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)
:weight :regular
:size :paragraph-2}
description]]])
(defn placeholder-list-images [{:keys [images width height border-radius]}]
[react/view
[react/view {:justify-content :center}
(for [{:keys [id]} images]
^{:key id}
[react/view {:border-radius border-radius
:margin-top 4
:margin-right 4
:width width
:height height
:background-color colors/neutral-10}])]])
(defn placeholder-row-images [{:keys [first-image last-image images width height
border-radius]}]
[react/view
(when first-image
[react/view {:border-bottom-right-radius 6
:border-bottom-left-radius 6
:margin-right 4
:width width
:height height
:background-color colors/neutral-10}])
(when images
[placeholder-list-images {:images images
:width 32
:height 32
:border-radius 6}])
(when last-image
[react/view {:border-top-left-radius border-radius
:border-top-right-radius 6
:margin-top 4
:width width
:height height
:background-color colors/neutral-10}])])
(defn discover-card [{:keys [title description on-press]}]
(let [on-joined-images (get images :images)]
[react/touchable-without-feedback
{:on-press on-press}
[react/view (merge (styles/community-card 16)
{:background-color (colors/theme-colors
colors/white
colors/neutral-90)}
{:flex-direction :row
:margin-horizontal 20
:height 56
:padding-right 12})
[card-title-and-description title description]
(for [{:keys [id column-images]} on-joined-images]
^{:key id}
[placeholder-row-images {:images (when (= id 1)
column-images)
:width 32
:height (if (= id 1) 8 26)
:border-radius 6
:first-image "" ; TODO replace with real data
:last-image ""}]) ; TODO replace with real data
]]))

84
src/quo2/components/list_items/received_contact_request.cljs Normal file
View File

@ -0,0 +1,84 @@
(ns quo2.components.list-items.received-contact-request
(:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors]
[status-im.utils.handlers :refer [<sub >evt]]
[quo2.components.avatars.user-avatar :as user-avatar]
[quo2.foundations.typography :as typography]
[clojure.string :as str]
[status-im.utils.utils :as utils.utils]
[status-im.utils.datetime :as time]
[status-im.i18n.i18n :as i18n]
[quo2.components.notifications.notification-dot :refer [notification-dot]]))
(defn get-display-name [chat-id no-ens-name no-nickname]
(let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
(if (and no-ens-name no-nickname)
(let [[word1 word2] (str/split name " ")]
(str word1 " " word2))
name)))
(defn list-item [{:keys [chat-id image contact message timestamp read]}]
(let [no-ens-name (str/blank? (get-in message [:content :ens-name]))
no-nickname (nil? (get-in contact [:names :nickname]))
display-name (get-display-name chat-id no-ens-name no-nickname)]
[rn/view {:style {:flex-direction :row
:padding-top 8
:margin-top 4
:padding-bottom 12
:flex 1}}
(when-not read
[notification-dot {:right 32 :top 16}])
[user-avatar/user-avatar {:full-name display-name
:status-indicator? true
:online? true
:size :small
:profile-picture image
:ring? false}]
[rn/view {:style {:margin-horizontal 8}}
[rn/view {:style {:flex-direction :row}}
[rn/text {:style (merge typography/font-semi-bold typography/paragraph-1
{:color (colors/theme-colors :black :white)
:margin-right 8})} display-name]
(when no-ens-name [rn/text {:style (merge typography/font-regular typography/label
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
:margin-top 4})}
(str (utils.utils/get-shortened-address chat-id) " · ")])
[rn/text {:style (merge typography/font-regular typography/label
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
:margin-top 4})}
(time/to-short-str timestamp)]]
[rn/view {:style {:border-radius 12
:margin-top 10
:padding-horizontal 12
:padding-vertical 8
:border-width 1
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-70)}}
[rn/text {:style (merge typography/font-regular
typography/paragraph-1
{:color (colors/theme-colors :black :white)})}
(:text (:content message))]]
[rn/view {:style {:margin-top 12
:flex-direction :row}}
[rn/touchable-opacity {:accessibility-label :decline-cr
:on-press #(>evt [:contact-requests.ui/decline-request (:message-id message)])
:active-opacity 1
:style {:background-color (colors/theme-colors colors/danger-50 colors/danger-60)
:justify-content :center
:align-items :center
:align-self :flex-start
:border-radius 8
:padding-vertical 4
:padding-horizontal 8}}
[rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color :white})} (i18n/label :t/decline)]]
[rn/touchable-opacity {:accessibility-label :accept-cr
:on-press #(>evt [:contact-requests.ui/accept-request (:message-id message)])
:active-opacity 1
:style {:background-color (colors/theme-colors colors/success-50 colors/success-60)
:justify-content :center
:align-items :center
:align-self :flex-start
:border-radius 8
:padding-vertical 4
:padding-horizontal 8
:margin-left 8}}
[rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color :white})} (i18n/label :t/accept)]]]]]))

12
src/quo2/components/notifications/notification_dot.cljs Normal file
View File

@ -0,0 +1,12 @@
(ns quo2.components.notifications.notification-dot
(:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors]))
(defn notification-dot [style]
[rn/view {:style (merge {:background-color (colors/theme-colors colors/primary-50 colors/primary-60)
:width 8
:height 8
:border-radius 4
:position :absolute
:z-index 1}
style)}])

18
src/quo2/components/tabs/tabs.cljs
View File

@ -5,7 +5,9 @@
[reagent.core :as reagent]
[status-im.ui.components.react :as react]
[status-im.utils.core :as utils]
[status-im.utils.number :as number-utils]))
[status-im.utils.number :as number-utils]
[quo2.foundations.colors :as colors]
[quo2.components.notifications.notification-dot :refer [notification-dot]]))
(def default-tab-size 32)
@ -14,9 +16,21 @@
(fn [{:keys [data size] :or {size default-tab-size}}]
[rn/view (merge {:flex-direction :row} style)
(doall
(for [{:keys [label id]} data]
(for [{:keys [label id new-info]} data]
^{:key id}
[rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
(when new-info
[rn/view {:position :absolute
:z-index 1
:right -2
:top -2
:width 10
:height 10
:border-radius 5
:justify-content :center
:align-items :center
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
[notification-dot]])
[tab/tab
{:id id
:size size

150
src/status_im/ui2/screens/chat/home.cljs
View File

@ -9,7 +9,7 @@
[status-im.ui.components.react :as react]
[status-im.ui.screens.home.styles :as styles]
[status-im.ui.screens.home.views.inner-item :refer [home-list-item]]
[quo.design-system.colors :as colors]
[quo.design-system.colors :as quo.colors]
[quo.core :as quo]
[quo.platform :as platform]
[status-im.add-new.core :as new-chat]
@ -22,23 +22,28 @@
[status-im.ui.screens.chat.sheets :as sheets]
[status-im.ui.components.tabbar.core :as tabbar]
[status-im.ui.components.invite.views :as invite]
[status-im.utils.handlers :refer [<sub]]
[status-im.utils.handlers :refer [<sub >evt]]
[status-im.utils.config :as config]
[quo2.components.markdown.text :as quo2.text]
[status-im.qr-scanner.core :as qr-scanner]
[status-im.ui.components.chat-icon.styles :as chat-icon.styles]
[quo.react-native :as rn]
[quo2.foundations.colors :as quo2.colors]
[quo.react]
[quo2.foundations.colors :as colors]
[quo2.foundations.typography :as typography]
[quo2.components.buttons.button :as quo2.button]
[quo2.components.tabs.tabs :as quo2.tabs]
[quo2.components.community.discover-card :as discover-card]
[status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.chat-icon.screen :as chat-icon])
[status-im.ui.components.chat-icon.screen :as chat-icon]
[quo2.components.icon :as quo2.icons]
[quo.components.safe-area :as safe-area]
[quo2.components.list-items.received-contact-request :as received-contact-request])
(:require-macros [status-im.utils.views :as views]))
(defn home-tooltip-view []
[rn/view (styles/chat-tooltip)
[rn/view {:style {:width 66 :position :absolute :top -6 :background-color colors/white
[rn/view {:style {:width 66 :position :absolute :top -6 :background-color quo.colors/white
:align-items :center}}
[rn/image {:source (resources/get-image :empty-chats-header)
:style {:width 50 :height 50}}]]
@ -47,7 +52,7 @@
:width 44 :height 44 :align-items :center :justify-content :center}
:on-press #(re-frame/dispatch [:multiaccounts.ui/hide-home-tooltip])
:accessibility-label :hide-home-button}
[icons/icon :main-icons/close-circle {:color colors/gray}]]
[icons/icon :main-icons/close-circle {:color quo.colors/gray}]]
[react/i18n-text {:style styles/no-chats-text :key :chat-and-transact}]
[rn/view {:align-items :center
:margin-top 8
@ -133,7 +138,7 @@
[quo/list-item
{:title first-name
:subtitle second-name
:background-color quo2.colors/neutral-5
:background-color colors/neutral-5
:on-press (fn []
(re-frame/dispatch [:dismiss-keyboard])
(if platform/android?
@ -141,9 +146,9 @@
(re-frame/dispatch [:chat.ui/navigate-to-chat public-key]))
(re-frame/dispatch [:search/home-filter-changed nil])
(re-frame/dispatch [:accept-all-activity-center-notifications-from-chat public-key]))
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet
{:content (fn []
[sheets/actions row])}])
;:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet TODO: new UI yet to be implemented
; {:content (fn []
; [sheets/actions row])}])
:icon [chat-icon/contact-icon-contacts-tab
(multiaccounts/displayed-photo row)]}]))
@ -171,17 +176,110 @@
(vals @data)))
(defn contacts-section-header [{:keys [title]}]
[rn/view {:style {:border-top-width 1 :border-top-color quo2.colors/neutral-20 :padding-vertical 8 :padding-horizontal 20 :margin-top 8}}
[rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color quo2.colors/neutral-50})} title]])
[rn/view {:style {:border-top-width 1 :border-top-color colors/neutral-20 :padding-vertical 8 :padding-horizontal 20 :margin-top 8}}
[rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/neutral-50})} title]])
(defn find-contact-requests [notifications]
(let [received-requests (atom [])
has-unread (atom false)]
(doseq [i (range (count notifications))]
(doseq [j (range (count (:data (nth notifications i))))]
(when (= 1 (get-in (nth (:data (nth notifications i)) j) [:message :contact-request-state]))
(swap! received-requests conj (nth (:data (nth notifications i)) j)))
(when (= false (get-in (nth (:data (nth notifications i)) j) [:read]))
(reset! has-unread true))))
{:received-requests @received-requests :has-unread @has-unread}))
(def selected-requests-tab (reagent/atom :received))
(defn contact-requests-sheet []
[:f>
(fn []
(let [{window-height :height} (rn/use-window-dimensions)
safe-area (safe-area/use-safe-area)
notifications (<sub [:activity.center/notifications-grouped-by-date])
{received-requests :received-requests} (find-contact-requests notifications)
sent-requests []]
[rn/view {:style {:margin-left 20
:height (- window-height (:top safe-area))}}
[rn/touchable-opacity
{:on-press #(>evt [:bottom-sheet/hide])
:style
{:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
:width 32
:height 32
:border-radius 10
:justify-content :center
:align-items :center
:margin-bottom 24}}
[quo2.icons/icon :main-icons2/close {:color (colors/theme-colors "#000000" "#ffffff")}]]
[rn/text {:style (merge
typography/heading-1
typography/font-semi-bold
{:color (colors/theme-colors "#000000" "#ffffff")})}
(i18n/label :t/pending-requests)]
[quo2.tabs/tabs
{:style {:margin-top 12 :margin-bottom 20}
:size 32
:on-change #(reset! selected-requests-tab %)
:default-active :received
:data [{:id :received
:label (i18n/label :t/received)}
{:id :sent
:label (i18n/label :t/sent)}]}]
[list/flat-list
{:key-fn :first
:data (if (= @selected-requests-tab :received) received-requests sent-requests)
:render-fn received-contact-request/list-item}]]))])
(defn contact-requests [count]
[rn/touchable-opacity
{:active-opacity 1
:on-press #(do
(>evt
[:bottom-sheet/show-sheet
{:content (fn [] [contact-requests-sheet])}])
(>evt [:mark-all-activity-center-notifications-as-read]))
:style {:flex-direction :row
:margin 8
:padding-horizontal 12
:padding-vertical 8
:align-items :center}}
[rn/view {:style {:justify-content :center
:align-items :center
:width 32
:height 32
:border-radius 16
:border-width 1
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80)}}
[quo2.icons/icon :main-icons2/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]
[rn/view {:style {:margin-left 8}}
[rn/text {:style
(merge typography/paragraph-1 typography/font-semi-bold {:color (colors/theme-colors "#000000" "#ffffff")})} (i18n/label :t/pending-requests)]
[rn/text {:style (merge typography/paragraph-2 typography/font-regular {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)})} "Alice, Pedro and 3 others"]]
[rn/view {:style {:width 16
:height 16
:position :absolute
:right 22
:border-radius 6
:background-color (colors/theme-colors colors/primary-50 colors/primary-60)}}
[rn/text {:style (merge typography/font-medium typography/label {:color "#ffffff" :text-align :center})} count]]])
(defn chats []
(let [{:keys [items search-filter]} (<sub [:home-items])
current-active-tab @selected-tab
items (prepare-items current-active-tab items)
contacts (<sub [:contacts/active])
contacts (prepare-contacts contacts)]
contacts (prepare-contacts contacts)
notifications (<sub [:activity.center/notifications-grouped-by-date])
{requests :received-requests new-info :has-unread} (find-contact-requests notifications)]
[rn/view {:style {:flex 1}}
[quo2.tabs/tabs {:style {:margin-left 20 :margin-bottom 20} :size 32
[discover-card/discover-card {:title (i18n/label :t/invite-friends-to-status)
:description (i18n/label :t/share-invite-link)}]
[quo2.tabs/tabs {:style {:margin-left 20
:margin-bottom 20
:margin-top 24}
:size 32
:on-change #(reset! selected-tab %)
:default-active selected-tab
:data [{:id :recent
@ -189,7 +287,8 @@
{:id :groups
:label (i18n/label :t/groups)}
{:id :contacts
:label (i18n/label :t/contacts)}]}]
:label (i18n/label :t/contacts)
:new-info new-info}]}]
(if (and (empty? items)
(empty? search-filter)
(not @search-active?))
@ -202,12 +301,14 @@
:keyboard-should-persist-taps :always
:data items
:render-fn render-fn}]
[rn/view {:style {:flex 1}} (when (> (count requests) 0)
[contact-requests (count requests)])
[list/section-list
{:key-fn :title
:sticky-section-headers-enabled false
:sections contacts
:render-section-header-fn contacts-section-header
:render-fn render-contact}]))]))
:render-fn render-contact}]]))]))
(views/defview chats-list []
(views/letsubs [loading? [:chats/loading?]]
@ -239,7 +340,7 @@
(if config/new-activity-center-enabled?
(re-frame/dispatch [:navigate-to :activity-center])
(re-frame/dispatch [:navigate-to :notifications-center])))}
[icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]]
[icons/icon :main-icons/notification2 {:color (colors/theme-colors colors/neutral-100 colors/white)}]]
(when (pos? notif-count)
[rn/view {:style (merge (styles/counter-public-container) {:top 5 :right 5})
:pointer-events :none}
@ -255,7 +356,7 @@
:on-press #(do
(re-frame/dispatch [::qr-scanner/scan-code
{:handler ::qr-scanner/on-scan-success}]))}
[icons/icon :main-icons/qr2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]])
[icons/icon :main-icons/qr2 {:color (colors/theme-colors colors/neutral-100 colors/white)}]])
(defn scan-button []
[quo2.button/button {:type :grey
@ -265,7 +366,7 @@
:on-press #(do
(re-frame/dispatch [::qr-scanner/scan-code
{:handler ::qr-scanner/on-scan-success}]))}
[icons/icon :main-icons/scan2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]])
[icons/icon :main-icons/scan2 {:color (colors/theme-colors colors/neutral-100 colors/white)}]])
(views/defview profile-button []
(views/letsubs [{:keys [public-key preferred-name emoji]} [:multiaccount]]
@ -275,12 +376,15 @@
:chat-icon chat-icon.styles/chat-icon-chat-list}]]))
(defn home []
[:f>
(fn []
(quo.react/effect! #(re-frame/dispatch [:get-activity-center-notifications]))
[rn/keyboard-avoiding-view {:style {:flex 1
:background-color (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)}
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
:ignore-offset true}
[topbar/topbar {:navigation :none
:use-insets true
:background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)
:background (colors/theme-colors colors/neutral-5 colors/neutral-95)
:left-component [rn/view {:flex-direction :row :margin-left 20}
[profile-button]]
:right-component [rn/view {:flex-direction :row :margin-right 20}
@ -293,9 +397,9 @@
:align-items :center
:margin-horizontal 20
:margin-top 15
:margin-bottom 8}
:margin-bottom 20}
[quo2.text/text {:size :heading-1 :weight :semi-bold} (i18n/label :t/messages)]
[plus-button]]
[chats-list]
[tabbar/tabs-counts-subscriptions]])
[tabbar/tabs-counts-subscriptions]])])

2
src/status_im/utils/utils.cljs
View File

@ -82,7 +82,7 @@
and adds unicode ellipsis in between"
[address]
(when address
(str (subs address 0 6) "\u2026" (subs address (- (count address) 4) (count address)))))
(str (subs address 0 6) "\u2026" (subs address (- (count address) 3) (count address)))))
(defn get-shortened-checksum-address [address]
(when address

9
translations/en.json
View File

@ -1775,7 +1775,7 @@
"new-ui": "New UI",
"send-contact-request-message": "To start a chat you need to become contacts",
"contact-request": "Contact request",
"contact-requests": "Contact Requests",
"contact-requests": "Contact requests",
"say-hi": "Say hi",
"opened": "Opened",
"accepted": "Accepted",
@ -1824,5 +1824,10 @@
"blank-messages-text": "Your messages will be here",
"groups": "Groups",
"shell-placeholder-title": "Your apps will run here",
"shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows"
"shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows",
"invite-friends-to-status": "Invite friends to status",
"share-invite-link": "Share an invite link",
"pending-requests": "Pending requests",
"received": "Received",
"sent": "Sent"
}