Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve option to mark all notifications read #16044

Merged
merged 5 commits into from
Jun 1, 2023
Merged

Improve option to mark all notifications read #16044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1958725
Allow action drawer to be disabled
ilmotta May 29, 2023
0a43000
Refactor: use new test helpers
ilmotta May 29, 2023
cb458f6
Component test for disabled state
ilmotta May 29, 2023
18ee915
Use disabled state when there are no unread notifications
ilmotta May 29, 2023
dd8c31c
Use correct icon
ilmotta May 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 55 additions & 46 deletions src/quo2/components/drawers/action_drawers/component_spec.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,62 @@
(ns quo2.components.drawers.action-drawers.component-spec
(:require ["@testing-library/react-native" :as rtl]
[quo2.components.drawers.action-drawers.view :as action-drawer]
[reagent.core :as reagent]))
(:require [quo2.components.drawers.action-drawers.view :as action-drawer]
[test-helpers.component :as h]))

(defn render-action-drawer
([options]
(rtl/render (reagent/as-element [action-drawer/action-drawer options]))))
(h/describe "action drawer"
(h/test "default render"
(h/render [action-drawer/action-drawer
[[{:icon :i/friend
:label "a sample label"}]]])
(h/is-truthy (h/get-by-text "a sample label")))

(js/global.test "action-drawer renders with elements label displaying"
(fn []
(render-action-drawer [[{:icon :i/friend
:label "a sample label"}]])
(-> (js/expect (rtl/screen.getByText "a sample label"))
(.toBeTruthy))))
(h/test "renders with elements sub-label displaying"
(h/render [action-drawer/action-drawer
[[{:icon :i/friend
:label "a sample label"
:sub-label "a sample sub label"}]]])
(h/is-truthy (h/get-by-text "a sample sub label")))

(js/global.test "action-drawer renders with elements sub-label displaying"
(fn []
(render-action-drawer [[{:icon :i/friend
:label "a sample label"
:sub-label "a sample sub label"}]])
(-> (js/expect (rtl/screen.getByText "a sample sub label"))
(.toBeTruthy))))
(h/test "on click action works on element"
(let [on-press (js/jest.fn)]
(h/render [action-drawer/action-drawer
[[{:icon :i/friend
:label "a sample label"
:on-press on-press}]]])
(h/fire-event :press (h/get-by-text "a sample label"))
(h/was-called on-press)))

(js/global.test "action-drawer on click action works on element"
(let [event (js/jest.fn)]
(fn []
(render-action-drawer [[{:icon :i/friend
:label "a sample label"
:on-press event}]])
(rtl/fireEvent.press (rtl/screen.getByText "a sample label"))
(-> (js/expect event)
(.toHaveBeenCalled)))))
(h/test "disabled state"
(let [on-press-muted (js/jest.fn)
on-press-friend (js/jest.fn)
label-mute "Mute"
label-friend "View member details"]
(h/render [action-drawer/action-drawer
[[{:icon :i/muted
:label label-mute
:on-press on-press-muted}
{:icon :i/friend
:label label-friend
:disabled? true
:on-press on-press-friend}]]])
(h/fire-event :press (h/get-by-text label-mute))
(h/was-called on-press-muted)

(js/global.test "action-drawer renders two icons when set"
(fn []
(render-action-drawer [[{:icon :i/friend
:label "a sample label"
:right-icon :i/friend
:accessibility-label :first-element}]])
(-> (js/expect (rtl/screen.getByLabelText "right-icon-for-action"))
(.toBeTruthy))
(-> (js/expect (rtl/screen.queryByLabelText "left-icon-for-action"))
(.toBeTruthy))))
(h/fire-event :press (h/get-by-text label-friend))
(h/was-not-called on-press-friend)))

(js/global.test "action-drawer renders a divider when the add-divider? prop is true"
(fn []
(render-action-drawer [[{:icon :i/friend
:label "a sample label"
:add-divider? true
:accessibility-label :first-element}]])
(-> (js/expect (rtl/screen.getAllByLabelText "divider"))
(.toBeTruthy))))
(h/test "renders two icons when set"
(h/render [action-drawer/action-drawer
[[{:icon :i/friend
:label "a sample label"
:right-icon :i/friend
:accessibility-label :first-element}]]])
(h/is-truthy (h/get-by-label-text "right-icon-for-action"))
(h/is-truthy (h/query-by-label-text "left-icon-for-action")))

(h/test "renders a divider when the add-divider? prop is true"
(h/render [action-drawer/action-drawer
[[{:icon :i/friend
:label "a sample label"
:add-divider? true
:accessibility-label :first-element}]]])
(h/is-truthy (h/get-all-by-label-text "divider"))))
3 changes: 2 additions & 1 deletion src/quo2/components/drawers/action_drawers/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@
:flex-direction :row})

(defn container
[sub-label]
[sub-label disabled?]
{:border-radius 12
:height (if sub-label 58 50)
:opacity (when disabled? 0.3)
:margin-horizontal 8})

(defn row-container
Expand Down
13 changes: 10 additions & 3 deletions src/quo2/components/drawers/action_drawers/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,19 @@
:accessible true
:accessibility-label :divider}])

(defn action
(defn- maybe-pressable
[disabled? props child]
(if disabled?
[rn/view (dissoc props :on-press) child]
[rn/touchable-highlight props child]))

(defn- action
[{:keys [icon
label
sub-label
right-icon
danger?
disabled?
on-press
add-divider?
override-theme
Expand All @@ -33,9 +40,9 @@
[:<> {:key label}
(when add-divider?
[divider])
[rn/touchable-highlight
[maybe-pressable disabled?
{:accessibility-label accessibility-label
:style (style/container sub-label)
:style (style/container sub-label disabled?)
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
:on-press on-press}
[rn/view
Expand Down
22 changes: 9 additions & 13 deletions src/status_im2/contexts/activity_center/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,22 +38,18 @@
[]
(let [unread-count (rf/sub [:activity-center/unread-count])]
[quo/action-drawer
[[{:icon :i/check
[[{:icon :i/mark-as-read
:override-theme :dark
:label (i18n/label :t/mark-all-notifications-as-read)
:disabled? (zero? unread-count)
:on-press (fn []
(if (pos? unread-count)
(rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
(fn []
{:icon :up-to-date
:icon-color colors/success-50
:text (i18n/label :t/notifications-marked-as-read
{:count unread-count})
:override-theme :dark})])
;; Need design improvements if there is NO unread
;; notifications to mark as read
;; https://github.com/status-im/status-mobile/issues/14983
(js/alert "No unread notifications to mark as read"))
(rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
(fn []
{:icon :up-to-date
:icon-color colors/success-50
:text (i18n/label :t/notifications-marked-as-read
{:count unread-count})
:override-theme :dark})])
(rf/dispatch [:hide-bottom-sheet]))}]]]))

(defn empty-tab
Expand Down
10 changes: 7 additions & 3 deletions src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
[{:label "Muted?"
:key :muted?
:type :boolean}
{:label "Mark as read disabled?"
:key :mark-as-read-disabled?
:type :boolean}
{:label "Show red options?"
:key :show-red-options?
:type :boolean}])
Expand All @@ -31,9 +34,10 @@
[[{:icon :i/friend
:label "View channel members and details"
:on-press #(js/alert "View channel members and details")}
{:icon :i/communities
:label "Mark as read"
:on-press #(js/alert "Mark as read")}
{:icon :i/communities
:label "Mark as read"
:disabled? (:mark-as-read-disabled? @state)
:on-press #(js/alert "Mark as read")}
{:icon :i/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel")
:on-press #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel"))
Expand Down
4 changes: 4 additions & 0 deletions src/test_helpers/component.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,3 +207,7 @@
(defn was-called-times
[^js mock number-of-times]
(.toHaveBeenCalledTimes (js/expect mock) number-of-times))

(defn was-not-called
[mock]
(was-called-times mock 0))