feat(notifications): add button to mark all notifications as read #371

lex111 · 2017-09-27T17:38:55Z

machour

Nice feature! Left some comments to review.

machour · 2017-09-27T17:47:03Z

src/notifications/screens/notifications.screen.js

+      this.props.isPendingMarkAllNotificationsAsRead &&
+      !this.isLoading()
+    ) {
+      this.getNotifications()();


Because this function returns a function, it still needs to be called, so one more parentheses.

How about rename getNotifications as getFuncForGettingNotifications, or something else?

It is unlikely that the first name is fine (getFuncForGettingNotifications), because this function does two things: not only returns another function, but also updates the notification counter.

@lex111 Sorry, I didn't quite get your words. Can you tell me where "updates the notification counter"?

It's you who excuse me 😄 , I mixed up with my other PR #360 - I'm doing a notification counter there and there's this function.
But we need to think more, we can be renamed.

I think something like getNotificationsForCurrentTab or something along those lines will be okay

@lex111 I prefer to keep getNotifications as simple as now, instead of mixing getNotificationsCount in it.

Because there is another place calls this function, which just expects a function. After #360 is merged, I guess getNotificationsCount will be called frequently by render.

machour · 2017-09-27T17:49:55Z

src/config/colors.js

@@ -29,6 +29,8 @@ export const colors = {
  purple: '#8e44ad',
  orange: '#e67e22',
  githubDark: '#1f2327',
+  mercury: '#e3e3e3',
+  shark: '#24292e',
 };


I know those are official names, but they're not explicite at all.
Also, do we really need to add news colors?

As I understand it, we add all the colors to the configuration, or am I mistaken?

yes, new colors should be added in configuration.
I was asking if we could nor reuse existing colors instead

Okay, I remove those colors

machour · 2017-09-27T17:51:27Z

src/locale/languages/en.js

@@ -135,6 +135,7 @@ export const en = {
      allButton: 'All',
      retrievingMessage: 'Retrieving notifications',
      noneMessage: "You don't have any notifications of this type",
+      markAllAsRead: 'Mark all notifications as read',


This sentence is too long for a button, + translations may be bigger.
Can we use "Mark all read" instead?

The size of the button allows, so I made a detailed description, well I'll remove the word "notifications".

machour · 2017-09-27T17:54:28Z

src/notifications/screens/notifications.screen.js

+    borderColor: colors.mercury,
+    borderWidth: 1,
+    borderRadius: 3,
+  },
 });


I'm not a fan of this button design, and it looks too different from the "Merge pull request" button we have :

Hmm this is interesting... I agree that we should keep to a similar style in general, but I don't think a bulky button like this taking up a bunch of space is the best UI. I like how this style is more discrete at the top of the screen.

Absolutely! Right after commenting on this, I started implementing a standard component to be used everywhere (small/normal/big, info/danger/..) :)

Maybe yes, we can not make this button fixed, then it will be before the first notification, how's this?

In style, I think this is the best option, I mean that the button is stretched to full width.

lex111 · 2017-09-28T11:30:12Z

Updated version

…read

machour · 2017-09-28T11:42:06Z

@lex111 what about putting the button to the bottom of the screen? Makes more sense to me: I go to the tab, scroll down while watching my notifications, then decide to mark them all read

lex111 · 2017-09-28T11:48:34Z

It's rather controversial, I'm comfortable when it's on top, and that's why I made it position is fixed initially, so that it was always visible .. let's wait for the opinions of others.

andrewda · 2017-09-28T23:18:49Z

I like the top, personally. It's more like what GitHub has.

housseindjirdeh

Just a few points, and some merge conflicts popped up since we merged your other notifications screen changes :O Otherwise I'm loving this!

I also prefer it at the top 🙌

housseindjirdeh · 2017-09-28T23:28:07Z

src/notifications/screens/notifications.screen.js

+      this.props.isPendingMarkAllNotificationsAsRead &&
+      !this.isLoading()
+    ) {
+      this.getNotifications()();


I think something like getNotificationsForCurrentTab or something along those lines will be okay

housseindjirdeh · 2017-09-28T23:30:11Z

src/notifications/screens/notifications.screen.js

+            color={colors.black}
+            backgroundColor={colors.white}
+            textStyle={styles.buttonGroupText}
+            onPress={() => markAllNotificationsAsRead()}


Does this button show when unread, pending and all tabs are selected? Not sure if that's the best way of doing things. Do you think it will make more sense to have it only show only when all is selected (and then maybe having buttons that show Mark all unread notifications as read and Mark all participating notifications as read for the other 2 tabs?

Even if you think we don't need the other two buttons in this PR, I think having the Mark ALL button in each of the tabs can be kind of misleading

Currently, on notifications page this button is displayed everywhere, and it always marks notifications as read all notifications, i.e. there is no way to mark as read only participating notifications.

Let's display this button only on the first tab (unread)?

Ah that's a very good point 🤔

Hmmmmmm, I think I'm okay with having it display only on the first tab in the case. If I'm not mistaken, all participating notifications are unread notifications anyway so this should be okay 👍

jouderianjr · 2017-09-29T01:44:00Z

src/notifications/screens/notifications.screen.js

+      case 2:
+        return all;
+      default:
+        return null;


Hey, looks like #notifications method should always return an array, it is safer in default return also an array( probably [])

I know that default cause should be not called, but I believe it's always nice to try keep the type return consistency 💃

jouderianjr · 2017-09-29T01:47:07Z

src/notifications/screens/notifications.screen.js

+      case 2:
+        return all && isPendingAll;
+      default:
+        return null;


Same of #notifications method, but this time I should return a boolean.

jouderianjr · 2017-09-29T02:09:27Z

src/notifications/screens/notifications.screen.js

+    this.setState({ contentBlockHeight: height - sizes.tabBar });
+  };
+
+  keyExtractor = (item, index) => {


Hey, this is a pretty small piece of code, I think that could be added inline in the like that:

keyExtractor={(item, index) => index}

…read

lex111 · 2017-09-29T15:58:36Z

Ready for review.

housseindjirdeh

Good stuff 🎉 🎉

Left a few observations here but let's get this merged in sooner rather than later 👍

feat(notifications): add button to mark all notifications as read

5770590

lex111 requested review from housseindjirdeh, machour and patw0929 September 27, 2017 17:39

lex111 added the ready for review label Sep 27, 2017

machour requested changes Sep 27, 2017

View reviewed changes

refactor(notifications): change after PR feedback

28b763a

Merge remote-tracking branch 'origin' into mark-all-notifications-as-…

4c233b1

…read

lex111 force-pushed the mark-all-notifications-as-read branch from 150303e to 4c233b1 Compare September 28, 2017 11:42

lex111 and others added 2 commits September 28, 2017 23:56

Merge branch 'master' into mark-all-notifications-as-read

d30e356

fix(notifications): set correct content block height

1b96443

lex111 force-pushed the mark-all-notifications-as-read branch from 55067e7 to acdb0f4 Compare September 28, 2017 21:36

fix(notifications): fix eslint some problems

4a95f12

lex111 force-pushed the mark-all-notifications-as-read branch from acdb0f4 to 4a95f12 Compare September 28, 2017 22:04

housseindjirdeh requested changes Sep 28, 2017

View reviewed changes

jouderianjr reviewed Sep 29, 2017

View reviewed changes

lex111 added 4 commits September 29, 2017 16:31

Merge remote-tracking branch 'origin' into mark-all-notifications-as-…

ea141e8

…read

fix(notifications): fix content block height and update counter

43dc3f0

feat(notifications): show button for mark all as read only on first tab

c26eab9

refactor(notifications): implements PR review feedbacks

e091f4d

machour approved these changes Sep 29, 2017

View reviewed changes

This was referenced Sep 29, 2017

Make notifications list takes all screen height #385

Closed

v1.3.0 Prep #381

Closed

housseindjirdeh approved these changes Sep 29, 2017

View reviewed changes

housseindjirdeh merged commit 35379d1 into master Sep 29, 2017

lex111 deleted the mark-all-notifications-as-read branch September 29, 2017 20:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(notifications): add button to mark all notifications as read #371

feat(notifications): add button to mark all notifications as read #371

lex111 commented Sep 27, 2017

machour left a comment

machour Sep 27, 2017

lex111 Sep 27, 2017

chinesedfan Sep 28, 2017

lex111 Sep 28, 2017

chinesedfan Sep 28, 2017

lex111 Sep 28, 2017

housseindjirdeh Sep 28, 2017

chinesedfan Sep 29, 2017

machour Sep 27, 2017

lex111 Sep 27, 2017

machour Sep 27, 2017

lex111 Sep 27, 2017

machour Sep 27, 2017

lex111 Sep 27, 2017

machour Sep 27, 2017

andrewda Sep 27, 2017

machour Sep 27, 2017

lex111 Sep 27, 2017 •

edited

Loading

lex111 commented Sep 28, 2017

machour commented Sep 28, 2017

lex111 commented Sep 28, 2017

andrewda commented Sep 28, 2017

housseindjirdeh left a comment •

edited

Loading

housseindjirdeh Sep 28, 2017

housseindjirdeh Sep 28, 2017

housseindjirdeh Sep 28, 2017

lex111 Sep 28, 2017

housseindjirdeh Sep 29, 2017

jouderianjr Sep 29, 2017

jouderianjr Sep 29, 2017

jouderianjr Sep 29, 2017

lex111 commented Sep 29, 2017

housseindjirdeh left a comment •

edited

Loading

feat(notifications): add button to mark all notifications as read #371

feat(notifications): add button to mark all notifications as read #371

Conversation

lex111 commented Sep 27, 2017

machour left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lex111 Sep 27, 2017 • edited Loading

Choose a reason for hiding this comment

lex111 commented Sep 28, 2017

machour commented Sep 28, 2017

lex111 commented Sep 28, 2017

andrewda commented Sep 28, 2017

housseindjirdeh left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lex111 commented Sep 29, 2017

housseindjirdeh left a comment • edited Loading

Choose a reason for hiding this comment

lex111 Sep 27, 2017 •

edited

Loading

housseindjirdeh left a comment •

edited

Loading

housseindjirdeh left a comment •

edited

Loading