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

Allow users to swipe to delete or swipe to toggle unread notification status (#15106) 

Adds support for swiping left/right on some types of notifications. Swiping left
(from left to right) shows a blue button allowing the user to mark the
notification as read/unread. Swiping right (from right to left) shows a red
button, allowing the user to delete the notification for good.

Related PR in status-go https://github.com/status-im/status-go/pull/3201.

Fixes https://github.com/status-im/status-mobile/issues/14901
Fixes https://github.com/status-im/status-mobile/issues/14900

Technical notes
===============

How's the performance? It feels near native performance in a production release
in a mid-range smartphone. So I'd say it's pretty good, but let me know if you
find any issue.

- I refrained from trying to eliminate all code duplication in this PR. Some
  notifications will behave differently, especially the ones with call to
  action, so I ask you to please take that in consideration when reviewing. See
  https://github.com/status-im/status-mobile/issues/15118
- React Native Gesture Handler has a component named
  [Swipeable](https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable/).
  I used it instead of writing a monstrosity 👹 of code in
  Reanimated to achieve the same results.
- RN Gesture Handler touchables are the only ones that work with the Swipeable
  component, so I used them and added vars to `react-native.gesture`.
- I had to manually interpolate the translation X of the buttons behind
  notifications because notifications are transparent. To make interpolation
  work with `Swipeable` it's mandatory to use RN `Animated.View` and not
  `Reanimated.View` (see next point).
- `Swipeable` expects us to pass functions that will receive RN
  `AnimatedInterpolation` instances and the rendering lifecycle does not work as
  usual. Hooks didn't trigger as expected, functional Reagent components didn't
  behave as expected, etc. This means `Reanimated.View` and its interpolation
  function is out of question. I did try for almost two days, nothing works.

Testing notes
=============

These are some of the manual tests I ran. There are more scenarios to cover
obviously. Assuming no unread notifications before each flow:

Contact request notification
============================

From the perspective of an user A:

1. Receive a contact request from a non-mutual contact B.
2. Verify the unread count is displayed over the bell icon.
3. Verify the unread count is displayed on the `Messages > Contacts` tab, as
   well as on the AC `Contact requests` tab.
4. Open the AC and before accepting/declining the contact request, check that
   you CAN'T swipe left or right.
5. Accept or decline the contact request.
6. Check the unread indicator disappears in all necessary places.
7. Press on the notification and see if you're redirected to the chat.
8. Go back to the AC and swipe left to mark as `Unread`. Notice that opening the
   chat marks the notification as `Read`. Also very important, notice that the
   `Messages > Contacts` tab will NOT show the *pending contact requests*
   section at the top. This is on purpose, given the notification is unread, but
   the user has already accepted/declined the contact request, hence it's not
   pending.
9. Swipe left againg to mark as `Read`. Check all unread indicators are updated.
10. Swipe right to delete the notification (it won't be displayed ever again).

Admin notification
==================

1. Generate an admin notification, e.g. a community owner receiving a request
   notification to join.
2. Verify the unread count is displayed over the bell icon, as well as the AC
   Admin tab.
3. Verify the community unread indicator is correctly displayed.
4. As an admin, open the AC and before accepting/declining the request, check
   that you CAN'T swipe left or right.
5. Accept or decline the membership request.
6. Check the unread indicator disappears accordingly.
7. Swipe left to mark as `Read`.
8. Swipe left to mark as `Unread`.
9. Swipe right to delete the notification (it won't be displayed ever again).

Mentions & replies
==================

Similar steps outlined for `Admin` notifications, but there's one important
difference. Mention and reply notifications don't require a call to action from
the user, so the user can swipe left/right **without** first having to do
anything on the notification (such as pressing on it). See issue
https://github.com/status-im/status-mobile/issues/15118

What about other types of notifications?
========================================

Swipe gestures for other notification types will be implemented in a separate
PR.
This commit is contained in:
Icaro Motta 2023-02-24 21:22:31 -03:00 committed by GitHub
parent 432f7bcd8c
commit 1806cb792a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 433 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/mocks/js_dependencies.cljs
View File

@ -265,7 +265,15 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
(def react-native-gesture-handler
#js
{:default #js {}
{:FlatList #js {}
:Gesture #js {:Pan nil}
:GestureDetector #js {}
:LongPressGestureHandler #js {}
:NativeViewGestureHandler #js {}
:PanGestureHandler #js {}
:PureNativeButton #js {}
:RectButton #js {}
:ScrollView #js {}
:State #js
{:BEGAN nil
:ACTIVE nil
@ -273,19 +281,13 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
:END nil
:FAILED nil
:UNDETERMINED nil}
:PureNativeButton #js {}
:Swipeable #js {}
:TapGestureHandler #js {}
:PanGestureHandler #js {}
:TouchableHighlight #js {}
:LongPressGestureHandler #js {}
:TouchableWithoutFeedback #js {}
:NativeViewGestureHandler #js {}
:FlatList #js {}
:ScrollView #js {}
:TouchableOpacity #js {}
:GestureDetector #js {}
:Gesture #js {:Pan nil}
:createNativeWrapper identity})
:TouchableWithoutFeedback #js {}
:createNativeWrapper identity
:default #js {}})
(def react-native-redash #js {:clamp nil})

3
src/quo2/components/notifications/activity_log/view.cljs
View File

@ -164,7 +164,8 @@
:as props}]
[rn/view
{:accessibility-label :activity
:style style/container}
:style style/container
:on-layout (:on-layout props)}
(when-not replying?
[activity-icon icon])
[rn/view

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

@ -159,7 +159,7 @@
;; {:overflow :visible} doesn't work on components inheriting
;; from ScrollView (e.g. FlatList). There are open issues, here's
;; just one about this topic:
;; https://github.com/facebook/react-native/issues/3121
;; https://github.com/facebook/react-native/issues/31218
:content-container-style {:padding-top (dec unread-count-offset)}
:extra-data (str @active-tab-id)
:horizontal true

4
src/react_native/core.cljs
View File

@ -10,6 +10,10 @@
(def app-state ^js (.-AppState ^js react-native))
;; Only use this component for exceptional cases, otherwise use Reanimated, e.g.
;; when using interpolated values exposed by RN Gesture Handler > Swipeable.
(def animated-view (reagent/adapt-react-class react-native/Animated.View))
(def view (reagent/adapt-react-class (.-View ^js react-native)))
(def scroll-view (reagent/adapt-react-class (.-ScrollView ^js react-native)))
(def image (reagent/adapt-react-class (.-Image ^js react-native)))

31
src/react_native/gesture.cljs
View File

@ -1,6 +1,11 @@
(ns react-native.gesture
(:require ["react-native-gesture-handler" :refer
(GestureDetector Gesture gestureHandlerRootHOC)]
(Gesture
GestureDetector
RectButton
Swipeable
TouchableWithoutFeedback
gestureHandlerRootHOC)]
[reagent.core :as reagent]))
(def gesture-detector (reagent/adapt-react-class GestureDetector))
@ -32,3 +37,27 @@
([g1 g2 g3] (.Simultaneous ^js Gesture g1 g2 g3)))
(defn exclusive [g1 g2] (.Exclusive ^js Gesture g1 g2))
;; RN Gesture Handler touchables are drop-in replacements for the RN ones. In
;; some cases, it's the only touchable that works with Swipeable components.
(def touchable-without-feedback (reagent/adapt-react-class TouchableWithoutFeedback))
(def rect-button (reagent/adapt-react-class RectButton))
(def ^:private swipeable-component
(reagent/adapt-react-class Swipeable))
(defn swipeable
[{:keys [render-left-actions render-right-actions] :as props} & children]
(into [swipeable-component
(cond-> props
render-left-actions
(assoc :render-left-actions
(fn [& args]
(reagent/as-element (apply render-left-actions args))))
render-right-actions
(assoc :render-right-actions
(fn [& args]
(reagent/as-element (apply render-right-actions args)))))]
children))

42
src/status_im2/contexts/activity_center/events.cljs
View File

@ -77,7 +77,7 @@
(update-in $ [types/no-type :all :data] remove-notification)
(update-in $ [filter-type :unread :data] remove-notification)
(update-in $ [types/no-type :unread :data] remove-notification)
(if (:dismissed notification)
(if (:deleted notification)
$
(cond-> (-> $
(update-in [filter-type :all :data] insert-and-sort)
@ -159,7 +159,7 @@
remove-pending-contact-request
contact-id))})
;;;; Mark notifications as read
;;;; Status changes (read/dismissed/deleted)
(defn- get-notification
[db notification-id]
@ -190,6 +190,24 @@
[cofx notification]
(notifications-reconcile cofx [(assoc notification :read true)]))
(rf/defn mark-as-unread
{:events [:activity-center.notifications/mark-as-unread]}
[{:keys [db]} notification-id]
(when-let [notification (get-notification db notification-id)]
{:json-rpc/call [{:method "wakuext_markActivityCenterNotificationsUnread"
:params [[notification-id]]
:on-success #(rf/dispatch [:activity-center.notifications/mark-as-unread-success
notification])
:on-error #(rf/dispatch [:activity-center/process-notification-failure
notification-id
:notification/mark-as-unread
%])}]}))
(rf/defn mark-as-unread-success
{:events [:activity-center.notifications/mark-as-unread-success]}
[cofx notification]
(notifications-reconcile cofx [(assoc notification :read false)]))
(rf/defn mark-all-as-read
{:events [:activity-center.notifications/mark-all-as-read]}
[{:keys [db now]}]
@ -250,8 +268,6 @@
:utils/dispatch-later [{:dispatch [:activity-center.notifications/mark-all-as-read]
:ms undo-time-limit-ms}]}))
;;;; Acceptance/dismissal
(rf/defn accept-notification
{:events [:activity-center.notifications/accept]}
[{:keys [db]} notification-id]
@ -290,6 +306,24 @@
(let [notification (get-notification db notification-id)]
(notifications-reconcile cofx [(assoc notification :dismissed true)])))
(rf/defn delete-notification
{:events [:activity-center.notifications/delete]}
[{:keys [db]} notification-id]
{:json-rpc/call [{:method "wakuext_deleteActivityCenterNotifications"
:params [[notification-id]]
:on-success #(rf/dispatch [:activity-center.notifications/delete-success
notification-id])
:on-error #(rf/dispatch [:activity-center/process-notification-failure
notification-id
:notification/delete
%])}]})
(rf/defn delete-notification-success
{:events [:activity-center.notifications/delete-success]}
[{:keys [db] :as cofx} notification-id]
(let [notification (get-notification db notification-id)]
(notifications-reconcile cofx [(assoc notification :deleted true)])))
;;;; Contact verification
(rf/defn contact-verification-decline

23
src/status_im2/contexts/activity_center/events_test.cljs
View File

@ -177,11 +177,12 @@
:action :notification/accept})))
(deftest notification-dismissal-test
(testing "dismisses notification and removes from app db"
(testing "dismisses notification, but keep it in the app db"
(h/run-test-sync
(setup)
(let [notif-1 {:id "0x1" :type types/private-group-chat}
notif-2 {:id "0x2" :type types/admin}]
(let [notif-1 {:id "0x1" :type types/private-group-chat}
notif-2 {:id "0x2" :type types/admin}
dismissed-notif-1 (assoc notif-1 :dismissed true)]
(h/stub-fx-with-callbacks :json-rpc/call :on-success (constantly notif-2))
(rf/dispatch [:test/assoc-in [:activity-center]
{:notifications {types/no-type
@ -195,12 +196,12 @@
(rf/dispatch [:activity-center.notifications/dismiss (:id notif-1)])
(is (= {types/no-type
{:all {:cursor "" :data [notif-2]}
:unread {:data []}}
{:all {:cursor "" :data [notif-2 dismissed-notif-1]}
:unread {:data [dismissed-notif-1]}}
types/membership
{:all {:data []}
:unread {:cursor "" :data []}}}
{:all {:data [dismissed-notif-1]}
:unread {:cursor "" :data [dismissed-notif-1]}}}
(get-in (h/db) [:activity-center :notifications]))))))
(testing "logs on failure"
@ -355,12 +356,12 @@
(is (= notifications (get-in (h/db) [:activity-center :notifications]))))))
(testing "removes dismissed notifications"
(testing "removes deleted notifications"
(h/run-test-sync
(setup)
(let [notif-1 {:id "0x1" :read true :type types/one-to-one-chat}
notif-2 {:id "0x2" :read false :type types/one-to-one-chat}
notif-3 {:id "0x3" :read false :type types/system}
notif-3 {:id "0x3" :read false :type types/system :dismissed true}
notif-4 {:id "0x4" :read true :type types/system}
notif-5 {:id "0x5" :read false :type types/system :accepted true}]
(rf/dispatch [:test/assoc-in [:activity-center :notifications]
@ -372,8 +373,8 @@
:unread {:cursor "" :data [notif-3 notif-5]}}}])
(rf/dispatch [:activity-center.notifications/reconcile
[(assoc notif-1 :dismissed true)
(assoc notif-4 :dismissed true)
[(assoc notif-1 :deleted true)
(assoc notif-4 :deleted true)
notif-5]])
(is (= {types/no-type

19
src/status_im2/contexts/activity_center/notification/admin/view.cljs
View File

@ -8,8 +8,24 @@
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn swipeable
[{:keys [height active-swipeable notification]} child]
(if (#{constants/activity-center-membership-status-accepted
constants/activity-center-membership-status-declined}
(:membership-status notification))
[common/swipeable
{:left-button common/left-swipe-button
:left-on-press common/left-swipe-on-press
:right-button common/right-swipe-button
:right-on-press common/right-swipe-on-press
:active-swipeable active-swipeable
:extra-fn (fn [] {:height @height :notification notification})}
child]
child))
(defn view
[{:keys [author community-id id membership-status read timestamp]}]
[{:keys [author community-id id membership-status read timestamp]}
set-swipeable-height]
(let [community (rf/sub [:communities/community community-id])
community-name (:name community)
community-image (get-in community [:images :thumbnail :uri])]
@ -18,6 +34,7 @@
:icon :i/add-user
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:on-layout set-swipeable-height
:context [[common/user-avatar-tag author]
(i18n/label :t/wants-to-join)
[quo/context-tag

48
src/status_im2/contexts/activity_center/notification/common/style.cljs
View File

@ -1,8 +1,56 @@
(ns status-im2.contexts.activity-center.notification.common.style
(:require [quo2.foundations.colors :as colors]))
(def swipe-action-width 72)
(def swipe-button-border-radius 16)
(def user-avatar-tag
{:background-color colors/white-opa-10})
(def user-avatar-tag-text
{:color colors/white})
(def left-swipe-opacity-interpolation-js
(clj->js {:inputRange [0 swipe-action-width]
:outputRange [0 1]
:extrapolate :clamp}))
(def left-swipe-translate-x-interpolation-js
(clj->js {:inputRange [0 swipe-action-width]
:outputRange [(- swipe-action-width) 0]
:extrapolate :clamp}))
(def right-swipe-opacity-interpolation-js
(clj->js {:inputRange [(- swipe-action-width) 0]
:outputRange [1 0]
:extrapolate :clamp}))
(def right-swipe-translate-x-interpolation-js
(clj->js {:inputRange [(- swipe-action-width) 0]
:outputRange [0 swipe-action-width]
:extrapolate :clamp}))
(defn left-swipe-container
[style-props]
(merge {:background-color colors/primary-60
:align-items :center
:justify-content :center
:border-radius swipe-button-border-radius
:width swipe-action-width}
style-props))
(defn right-swipe-container
[style-props]
(merge {:background-color colors/danger-60
:align-items :center
:justify-content :center
:border-radius swipe-button-border-radius
:width swipe-action-width}
style-props))
(def swipe-text
{:margin-top 5
:color colors/white})
(def swipe-text-wrapper
{:align-items :center})

114
src/status_im2/contexts/activity_center/notification/common/view.cljs
View File

@ -1,8 +1,12 @@
(ns status-im2.contexts.activity-center.notification.common.view
(:require [quo2.core :as quo]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[quo2.foundations.colors :as colors]
[status-im.multiaccounts.core :as multiaccounts]
[status-im2.contexts.activity-center.notification.common.style :as style]
[status-im2.contexts.activity-center.utils :as activity-center.utils]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn user-avatar-tag
@ -16,3 +20,113 @@
:text-style style/user-avatar-tag-text}
(activity-center.utils/contact-name contact)
(multiaccounts/displayed-photo contact)]))
(defn- render-swipe-action
[{:keys [active-swipeable
extra-fn
interpolation-opacity
interpolation-translate-x
on-press
swipe-button
swipeable-ref]}]
(fn [_ ^js drag-x]
(let [{:keys [height] :as extra} (extra-fn)
opacity (.interpolate drag-x interpolation-opacity)
translate-x (.interpolate drag-x interpolation-translate-x)]
[gesture/rect-button
{:style {:border-radius style/swipe-button-border-radius}
:accessibility-label :notification-swipe-action-button
:on-press (fn []
(when @swipeable-ref
(.close ^js @swipeable-ref)
(reset! active-swipeable nil))
(on-press extra))}
[swipe-button
{:style {:opacity opacity
:transform [{:translateX translate-x}]
:height height}}
extra]])))
(defn- close-active-swipeable
[active-swipeable swipeable]
(fn [_]
(when (and @active-swipeable
(not= @active-swipeable @swipeable))
(.close ^js @active-swipeable))
(reset! active-swipeable @swipeable)))
(defn left-swipe-button
[{:keys [style]} {:keys [notification]}]
[rn/animated-view
{:accessibility-label :notification-left-swipe
:style (style/left-swipe-container style)}
[rn/view {:style style/swipe-text-wrapper}
[quo/icon
(if (:read notification)
:i/notifications
:i/check)
{:color colors/white}]
[quo/text {:style style/swipe-text}
(if (:read notification)
(i18n/label :t/unread)
(i18n/label :t/read))]]])
(defn right-swipe-button
[{:keys [style]}]
[rn/animated-view
{:accessibility-label :notification-right-swipe
:style (style/right-swipe-container style)}
[rn/view {:style style/swipe-text-wrapper}
[quo/icon :i/delete {:color colors/white}]
[quo/text {:style style/swipe-text}
(i18n/label :t/delete)]]])
(defn left-swipe-on-press
[{:keys [notification]}]
(if (:read notification)
(rf/dispatch [:activity-center.notifications/mark-as-unread (:id notification)])
(rf/dispatch [:activity-center.notifications/mark-as-read (:id notification)])))
(defn right-swipe-on-press
[{:keys [notification]}]
(rf/dispatch [:activity-center.notifications/delete (:id notification)]))
(defn swipeable
[_]
(let [swipeable-ref (atom nil)]
(fn [{:keys [active-swipeable
extra-fn
left-button
left-on-press
right-button
right-on-press]}
& children]
(into
[gesture/swipeable
{:ref #(reset! swipeable-ref %)
:accessibility-label :notification-swipeable
:friction 2
:left-threshold style/swipe-action-width
:right-threshold style/swipe-action-width
:overshoot-left false
:overshoot-right false
:on-swipeable-will-open (close-active-swipeable active-swipeable swipeable-ref)
:render-left-actions (render-swipe-action
{:active-swipeable active-swipeable
:extra-fn extra-fn
:interpolation-opacity style/left-swipe-opacity-interpolation-js
:interpolation-translate-x
style/left-swipe-translate-x-interpolation-js
:on-press left-on-press
:swipe-button left-button
:swipeable-ref swipeable-ref})
:render-right-actions (render-swipe-action
{:active-swipeable active-swipeable
:extra-fn extra-fn
:interpolation-opacity style/right-swipe-opacity-interpolation-js
:interpolation-translate-x
style/right-swipe-translate-x-interpolation-js
:on-press right-on-press
:swipe-button right-button
:swipeable-ref swipeable-ref})}]
children))))

40
src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs
View File

@ -1,18 +1,36 @@
(ns status-im2.contexts.activity-center.notification.contact-requests.view
(:require [quo2.core :as quo]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[status-im2.constants :as constants]
[status-im2.contexts.activity-center.notification.common.view :as common]
[utils.datetime :as datetime]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn swipeable
[{:keys [height active-swipeable notification]} child]
(let [message (or (:message notification) (:last-message notification))]
(if (#{constants/contact-request-message-state-accepted
constants/contact-request-message-state-declined}
(:contact-request-state message))
[common/swipeable
{:left-button common/left-swipe-button
:left-on-press common/left-swipe-on-press
:right-button common/right-swipe-button
:right-on-press common/right-swipe-on-press
:active-swipeable active-swipeable
:extra-fn (fn [] {:height @height :notification notification})}
child]
child)))
(defn outgoing-contact-request-view
[{:keys [id chat-id message last-message] :as notification}]
[{:keys [id chat-id message last-message] :as notification}
set-swipeable-height]
(let [{:keys [contact-request-state] :as message} (or message last-message)]
(if (= contact-request-state constants/contact-request-message-state-accepted)
[quo/activity-log
{:title (i18n/label :t/contact-request-was-accepted)
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification))
@ -22,6 +40,7 @@
:items []]
[quo/activity-log
{:title (i18n/label :t/contact-request)
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification))
@ -55,10 +74,12 @@
nil)}])))
(defn incoming-contact-request-view
[{:keys [id author message last-message] :as notification}]
[{:keys [id author message last-message] :as notification}
set-swipeable-height]
(let [message (or message last-message)]
[quo/activity-log
{:title (i18n/label :t/contact-request)
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification))
@ -79,7 +100,7 @@
:key :status-declined
:label (i18n/label :t/declined)}]
constants/contact-request-state-mutual
constants/contact-request-message-state-pending
[{:type :button
:subtype :danger
:key :button-decline
@ -101,19 +122,20 @@
nil)}]))
(defn view
[{:keys [author message last-message] :as notification}]
[{:keys [author message last-message] :as notification}
set-swipeable-height]
(let [{:keys [public-key]} (rf/sub [:multiaccount/contact])
{:keys [contact-request-state]} (or message last-message)]
(cond
(= public-key author)
[outgoing-contact-request-view notification]
[outgoing-contact-request-view notification set-swipeable-height]
(= contact-request-state constants/contact-request-message-state-accepted)
[rn/touchable-opacity
[gesture/touchable-without-feedback
{:on-press (fn []
(rf/dispatch [:hide-popover])
(rf/dispatch [:chat.ui/start-chat {:public-key author}]))}
[incoming-contact-request-view notification]]
[incoming-contact-request-view notification set-swipeable-height]]
:else
[incoming-contact-request-view notification])))
[incoming-contact-request-view notification set-swipeable-height])))

19
src/status_im2/contexts/activity_center/notification/mentions/view.cljs
View File

@ -2,7 +2,7 @@
(:require [clojure.string :as string]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[status-im2.contexts.activity-center.notification.common.view :as common]
[status-im2.contexts.activity-center.notification.mentions.style :as style]
[utils.datetime :as datetime]
@ -35,18 +35,31 @@
literal))
parsed-text-children))))
(defn swipeable
[{:keys [height active-swipeable notification]} child]
[common/swipeable
{:left-button common/left-swipe-button
:left-on-press common/left-swipe-on-press
:right-button common/right-swipe-button
:right-on-press common/right-swipe-on-press
:active-swipeable active-swipeable
:extra-fn (fn [] {:height @height :notification notification})}
child])
(defn view
[{:keys [author chat-name community-id chat-id message read timestamp]}]
[{:keys [author chat-name community-id chat-id message read timestamp]}
set-swipeable-height]
(let [community-chat? (not (string/blank? community-id))
community (rf/sub [:communities/community community-id])
community-name (:name community)
community-image (get-in community [:images :thumbnail :uri])]
[rn/touchable-opacity
[gesture/touchable-without-feedback
{:on-press (fn []
(rf/dispatch [:hide-popover])
(rf/dispatch [:chat/navigate-to-chat chat-id]))}
[quo/activity-log
{:title (i18n/label :t/mention)
:on-layout set-swipeable-height
:icon :i/mention
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)

19
src/status_im2/contexts/activity_center/notification/reply/view.cljs
View File

@ -2,7 +2,7 @@
(:require [clojure.string :as string]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[status-im.ui2.screens.chat.messages.message :as old-message]
[status-im2.common.not-implemented :as not-implemented]
[status-im2.constants :as constants]
@ -37,18 +37,31 @@
nil))
(defn swipeable
[{:keys [height active-swipeable notification]} child]
[common/swipeable
{:left-button common/left-swipe-button
:left-on-press common/left-swipe-on-press
:right-button common/right-swipe-button
:right-on-press common/right-swipe-on-press
:active-swipeable active-swipeable
:extra-fn (fn [] {:height @height :notification notification})}
child])
(defn view
[{:keys [author chat-name community-id chat-id message read timestamp]}]
[{:keys [author chat-name community-id chat-id message read timestamp]}
set-swipeable-height]
(let [community-chat? (not (string/blank? community-id))
community (rf/sub [:communities/community community-id])
community-name (:name community)
community-image (get-in community [:images :thumbnail :uri])]
[rn/touchable-opacity
[gesture/touchable-without-feedback
{:on-press (fn []
(rf/dispatch [:hide-popover])
(rf/dispatch [:chat/navigate-to-chat chat-id]))}
[quo/activity-log
{:title (i18n/label :t/message-reply)
:on-layout set-swipeable-height
:icon :i/reply
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)

84
src/status_im2/contexts/activity_center/view.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.activity-center.view
(:require [quo.react :as react]
(:require [oops.core :as oops]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
@ -166,47 +166,59 @@
[rn/view {:style style/filter-toggle-container}
[filter-selector-read-toggle]]]])
(defn render-notification
[{:keys [type] :as notification} index]
[rn/view {:style (style/notification-container index)}
(cond
(= type types/contact-verification)
[contact-verification/view notification {}]
(defn notification-component
[]
(let [height (atom 0)
set-swipeable-height #(reset! height (oops/oget % "nativeEvent.layout.height"))]
(fn [{:keys [type] :as notification} index _ active-swipeable]
(let [swipeable-args {:height height
:active-swipeable active-swipeable
:notification notification}]
[rn/view {:style (style/notification-container index)}
(cond
(= type types/contact-verification)
[contact-verification/view notification {}]
(= type types/mention)
[mentions/view notification]
(= type types/contact-request)
[contact-requests/swipeable swipeable-args
[contact-requests/view notification set-swipeable-height]]
(= type types/reply)
[reply/view notification]
(= type types/mention)
[mentions/swipeable swipeable-args
[mentions/view notification set-swipeable-height]]
(= type types/contact-request)
[contact-requests/view notification]
(= type types/reply)
[reply/swipeable swipeable-args
[reply/view notification set-swipeable-height]]
(= type types/admin)
[admin/view notification]
(= type types/admin)
[admin/swipeable swipeable-args
[admin/view notification set-swipeable-height]]
(some types/membership [type])
[membership/view notification]
(some types/membership [type])
[membership/view notification]
:else
nil)])
:else
nil)]))))
(defn view
[]
[:f>
(fn []
(react/effect! #(rf/dispatch [:activity-center.notifications/fetch-first-page]))
[safe-area/consumer
(fn [{:keys [top bottom]}]
(let [notifications (rf/sub [:activity-center/filtered-notifications])
window-width (rf/sub [:dimensions/window-width])]
[rn/view {:style (style/screen-container window-width top bottom)}
[header]
[rn/flat-list
{:data notifications
:content-container-style {:flex-grow 1}
:empty-component [empty-tab]
:key-fn :id
:on-scroll-to-index-failed identity
:on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page])
:render-fn render-notification}]]))])])
(let [active-swipeable (atom nil)]
[:f>
(fn []
(rn/use-effect-once #(rf/dispatch [:activity-center.notifications/fetch-first-page]))
[safe-area/consumer
(fn [{:keys [top bottom]}]
(let [notifications (rf/sub [:activity-center/filtered-notifications])
window-width (rf/sub [:dimensions/window-width])]
[rn/view {:style (style/screen-container window-width top bottom)}
[header]
[rn/flat-list
{:data notifications
:render-data active-swipeable
:content-container-style {:flex-grow 1}
:empty-component [empty-tab]
:key-fn :id
:on-scroll-to-index-failed identity
:on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page])
:render-fn notification-component}]]))])]))

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

@ -51,13 +51,13 @@
[quo/text (i18n/label :t/blank-contacts-text)]])
(defn contacts
[contact-requests]
[pending-contact-requests]
(let [items (rf/sub [:contacts/active-sections])]
(if (and (empty? items) (empty? contact-requests))
(if (and (empty? items) (empty? pending-contact-requests))
[welcome-blank-contacts]
[:<>
(when (seq contact-requests)
[contact-request/contact-requests contact-requests])
(when (seq pending-contact-requests)
[contact-request/contact-requests pending-contact-requests])
(when (seq items)
[contact-list/contact-list {:icon :options}])])))
@ -65,7 +65,7 @@
[]
(let [selected-tab (reagent/atom :recent)]
(fn []
(let [contact-requests (rf/sub [:activity-center/pending-contact-requests])]
(let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])]
[:<>
[quo/discover-card
{:title (i18n/label :t/invite-friends-to-status)
@ -86,9 +86,9 @@
{:id :contacts
:label (i18n/label :t/contacts)
:accessibility-label :tab-contacts
:notification-dot? (pos? (count contact-requests))}]}]
:notification-dot? (pos? (count pending-contact-requests))}]}]
(if (= @selected-tab :contacts)
[contacts contact-requests]
[contacts pending-contact-requests]
[chats @selected-tab])]))))
(defn home

6
src/status_im2/subs/activity_center.cljs
View File

@ -1,5 +1,6 @@
(ns status-im2.subs.activity-center
(:require [re-frame.core :as re-frame]
[status-im2.constants :as constants]
[status-im2.contexts.activity-center.notification-types :as types]))
(re-frame/reg-sub
@ -70,4 +71,7 @@
:activity-center/pending-contact-requests
:<- [:activity-center/notifications]
(fn [notifications]
(get-in notifications [types/contact-request :unread :data])))
(filter (fn [{:keys [message]}]
(= constants/contact-request-message-state-pending
(:contact-request-state message)))
(get-in notifications [types/contact-request :unread :data]))))

25
src/status_im2/subs/activity_center_test.cljs
View File

@ -1,6 +1,7 @@
(ns status-im2.subs.activity-center-test
(:require [cljs.test :refer [is testing]]
[re-frame.db :as rf-db]
[status-im2.constants :as constants]
[status-im2.contexts.activity-center.notification-types :as types]
status-im2.subs.activity-center
[test-helpers.unit :as h]
@ -63,3 +64,27 @@
types/admin 7})
(is (= 28 (rf/sub [sub-name]))))
(h/deftest-sub :activity-center/pending-contact-requests
[sub-name]
(testing "returns only contact request notifications in the pending state"
(let [pending {:id "0x2"
:type types/contact-request
:message {:contact-request-state
constants/contact-request-message-state-pending}}]
(swap! rf-db/app-db assoc-in
[:activity-center :notifications types/contact-request :unread :data]
[{:id "0x1"
:type types/contact-request
:message {:contact-request-state constants/contact-request-message-state-none}}
pending
{:id "0x3"
:type types/contact-request
:message {:contact-request-state constants/contact-request-message-state-accepted}}
{:id "0x4"
:type types/contact-request
:message {:contact-request-state constants/contact-request-message-state-declined}}
{:id "0x5"
:type types/mention}])
(is (= [pending] (rf/sub [sub-name]))))))

6
status-go-version.json
View File

@ -3,7 +3,7 @@
"_comment": "Instead use: scripts/update-status-go.sh <rev>",
"owner": "status-im",
"repo": "status-go",
"version": "v0.131.12",
"commit-sha1": "3c88a9fd7f0e95aad237d125625b109815af0f73",
"src-sha256": "04zcwgayd70rsdx7pjr05fjnv5qbzvih7fr5a63a4a2bxvajpkms"
"version": "v0.132.3",
"commit-sha1": "999d8c0ee0f2274c58b5a2de3beddab7feaabd16",
"src-sha256": "0qcpbhkhy8l3cq1055gnxghi7292jnd7xznl6s6h92pcg37y1jzc"
}

2
translations/en.json
View File

@ -1018,6 +1018,8 @@
"push-failed-transaction-body": "{{value}} {{currency}} to {{to}}",
"allow-mention-notifications": "Show @ mentions",
"server": "Server",
"read": "Read",
"unread": "Unread",
"specify-server-public-key": "Enter server public key",
"notify": "Notify",
"off": "Off",