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

src/api/index.js

@@ -235,6 +235,9 @@ export const fetchMarkNotificationAsRead = (notificationID, accessToken) =>
 export const fetchMarkRepoNotificationAsRead = (repoFullName, accessToken) =>
   v3.put(`/repos/${repoFullName}/notifications`, accessToken);
 
+export const fetchMarkAllNotificationsAsRead = accessToken =>
+  v3.put('/notifications', accessToken);
+
 export const fetchChangeStarStatusRepo = (owner, repo, starred, accessToken) =>
   v3[starred ? 'delete' : 'put'](`/user/starred/${owner}/${repo}`, accessToken);
 

src/config/colors.js

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

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',
     },
   },
   search: {

src/locale/languages/fr.js

@@ -137,6 +137,7 @@ export const fr = {
       allButton: 'Tous',
       retrievingMessage: 'Récupération des notifications',
       noneMessage: "Vous n'avez aucune notification de ce type",
+      markAllAsRead: 'Mark all notifications as read',
     },
   },
   search: {

src/locale/languages/nl.js

@@ -133,6 +133,7 @@ export const nl = {
       allButton: 'Alles',
       retrievingMessage: 'Notificaties ophalen',
       noneMessage: 'Je hebt geen notificaties met dit type',
+      markAllAsRead: 'Mark all notifications as read',
     },
   },
   search: {

src/locale/languages/pt-br.js

@@ -132,6 +132,7 @@ export const ptBr = {
       allButton: 'Todas',
       retrievingMessage: 'Buscando notificações',
       noneMessage: 'Você não tem notificações deste tipo',
+      markAllAsRead: 'Mark all notifications as read',
     },
   },
   search: {

src/locale/languages/ru.js

@@ -132,6 +132,7 @@ export const ru = {
       allButton: 'Все',
       retrievingMessage: 'Получение уведомлений',
       noneMessage: 'У вас нет уведомлений по этому типу',
+      markAllAsRead: 'Отметить все уведомления как прочитанные',
     },
   },
   search: {

src/locale/languages/tr.js

@@ -133,6 +133,7 @@ export const tr = {
       allButton: 'Tümü',
       retrievingMessage: 'Bildirim alınıyor',
       noneMessage: 'Bu türde hiçbir bildirime sahip değilsiniz',
+      markAllAsRead: 'Mark all notifications as read',
     },
   },
   search: {

src/notifications/notifications.action.js

@@ -2,13 +2,15 @@ import {
   fetchNotifications,
   fetchMarkNotificationAsRead,
   fetchMarkRepoNotificationAsRead,
+  fetchMarkAllNotificationsAsRead,
 } from 'api';
 import {
   GET_UNREAD_NOTIFICATIONS,
   GET_PARTICIPATING_NOTIFICATIONS,
   GET_ALL_NOTIFICATIONS,
   MARK_NOTIFICATION_AS_READ,
   MARK_REPO_AS_READ,
+  MARK_ALL_NOTIFICATIONS_AS_READ,
 } from './notifications.type';
 
 export const getUnreadNotifications = () => {
@@ -120,3 +122,24 @@ export const markRepoAsRead = repoFullName => {
       });
   };
 };
+
+export const markAllNotificationsAsRead = () => {
+  return (dispatch, getState) => {
+    const accessToken = getState().auth.accessToken;
+
+    dispatch({ type: MARK_ALL_NOTIFICATIONS_AS_READ.PENDING });
+
+    fetchMarkAllNotificationsAsRead(accessToken)
+      .then(() => {
+        dispatch({
+          type: MARK_ALL_NOTIFICATIONS_AS_READ.SUCCESS,
+        });
+      })
+      .catch(error => {
+        dispatch({
+          type: MARK_ALL_NOTIFICATIONS_AS_READ.ERROR,
+          payload: error,
+        });
+      });
+  };
+};

src/notifications/notifications.reducer.js

@@ -4,6 +4,7 @@ import {
   GET_ALL_NOTIFICATIONS,
   MARK_NOTIFICATION_AS_READ,
   MARK_REPO_AS_READ,
+  MARK_ALL_NOTIFICATIONS_AS_READ,
 } from './notifications.type';
 
 const initialState = {
@@ -15,6 +16,7 @@ const initialState = {
   isPendingAll: false,
   isPendingMarkNotificationAsRead: false,
   isPendingRepoMarkAsRead: false,
+  isPendingMarkAllNotificationsAsRead: false,
   error: '',
 };
 
@@ -129,6 +131,22 @@ export const notificationsReducer = (state = initialState, action = {}) => {
         error: action.payload,
         isPendingRepoMarkAsRead: false,
       };
+    case MARK_ALL_NOTIFICATIONS_AS_READ.PENDING:
+      return {
+        ...state,
+        isPendingMarkAllNotificationsAsRead: true,
+      };
+    case MARK_ALL_NOTIFICATIONS_AS_READ.SUCCESS:
+      return {
+        ...state,
+        isPendingMarkAllNotificationsAsRead: false,
+      };
+    case MARK_ALL_NOTIFICATIONS_AS_READ.ERROR:
+      return {
+        ...state,
+        error: action.payload,
+        isPendingMarkAllNotificationsAsRead: false,
+      };
     default:
       return state;
   }

src/notifications/notifications.type.js

@@ -11,3 +11,6 @@ export const MARK_NOTIFICATION_AS_READ = createActionSet(
   'MARK_NOTIFICATION_AS_READ'
 );
 export const MARK_REPO_AS_READ = createActionSet('MARK_REPO_AS_READ');
+export const MARK_ALL_NOTIFICATIONS_AS_READ = createActionSet(
+  'MARK_ALL_NOTIFICATIONS_AS_READ'
+);

src/notifications/screens/notifications.screen.js

@@ -13,7 +13,7 @@ import {
   Image,
   Platform,
 } from 'react-native';
-import { ButtonGroup, Card, Icon } from 'react-native-elements';
+import { ButtonGroup, Card, Icon, Button } from 'react-native-elements';
 
 import { v3 } from 'api';
 import {
@@ -29,6 +29,7 @@ import {
   getAllNotifications,
   markAsRead,
   markRepoAsRead,
+  markAllNotificationsAsRead,
 } from '../index';
 
 const mapStateToProps = state => ({
@@ -40,6 +41,8 @@ const mapStateToProps = state => ({
   isPendingUnread: state.notifications.isPendingUnread,
   isPendingParticipating: state.notifications.isPendingParticipating,
   isPendingAll: state.notifications.isPendingAll,
+  isPendingMarkAllNotificationsAsRead:
+    state.notifications.isPendingMarkAllNotificationsAsRead,
 });
 
 const mapDispatchToProps = dispatch =>
@@ -50,17 +53,20 @@ const mapDispatchToProps = dispatch =>
       getAllNotifications,
       markAsRead,
       markRepoAsRead,
+      markAllNotificationsAsRead,
     },
     dispatch
   );
 
 const styles = StyleSheet.create({
   buttonGroupWrapper: {
     backgroundColor: colors.greyLight,
-    paddingTop: Platform.OS === 'ios' ? 28 : 15,
+    paddingTop: Platform.OS === 'ios' ? 30 : 10,
+    paddingBottom: 10,
   },
   buttonGroupContainer: {
     height: 30,
+    marginTop: 0,
   },
   buttonGroupText: {
     ...fonts.fontPrimaryBold,
@@ -70,7 +76,7 @@ const styles = StyleSheet.create({
   },
   repositoryContainer: {
     padding: 0,
-    marginVertical: 25,
+    marginBottom: 15,
   },
   headerContainer: {
     flexDirection: 'row',
@@ -110,6 +116,16 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     ...fonts.fontPrimary,
   },
+  markAllAsReadButton: {
+    marginTop: 3,
+    paddingTop: 3,
+    paddingBottom: 3,
+    marginLeft: 11,
+    marginRight: 11,
+    borderColor: colors.mercury,
+    borderWidth: 1,
+    borderRadius: 3,
+  },
 });
 
 class Notifications extends Component {
@@ -119,13 +135,15 @@ class Notifications extends Component {
     getAllNotifications: Function,
     markAsRead: Function,
     markRepoAsRead: Function,
+    markAllNotificationsAsRead: Function,
     unread: Array,
     participating: Array,
     all: Array,
     language: string,
     isPendingUnread: boolean,
     isPendingParticipating: boolean,
     isPendingAll: boolean,
+    isPendingMarkAllNotificationsAsRead: boolean,
     navigation: Object,
   };
 
@@ -147,6 +165,16 @@ class Notifications extends Component {
     this.props.getAllNotifications();
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (
+      !nextProps.isPendingMarkAllNotificationsAsRead &&
+      this.props.isPendingMarkAllNotificationsAsRead &&
+      !this.isLoading()
+    ) {
+      this.getNotifications()();
+    }
+  }
+
   getImage(repoName) {
     const notificationForRepo = this.notifications().find(
       notification => notification.repository.full_name === repoName
@@ -316,7 +344,7 @@ class Notifications extends Component {
 
   render() {
     const { type } = this.state;
-    const { language } = this.props;
+    const { language, markAllNotificationsAsRead } = this.props;
 
     const repositories = [
       ...new Set(
@@ -330,6 +358,8 @@ class Notifications extends Component {
       return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
     });
 
+    const isEmptyNotifications = this.notifications().length === 0;
+
     return (
       <ViewContainer>
         <View style={styles.container}>
@@ -346,25 +376,41 @@ class Notifications extends Component {
               selectedTextStyle={styles.buttonGroupTextSelected}
               containerStyle={styles.buttonGroupContainer}
             />
+
+            <Button
+              icon={{
+                name: 'check',
+                size: 20,
+                type: 'octicon',
+                color: colors.shark,
+              }}
+              title={translate('notifications.main.markAllAsRead')}
+              buttonStyle={styles.markAllAsReadButton}
+              color={colors.shark}
+              backgroundColor={colors.white}
+              textStyle={styles.buttonGroupText}
+              onPress={() => markAllNotificationsAsRead()}
+              disabled={isEmptyNotifications}
+            />
           </View>
 
           {this.isLoading() &&
-            this.notifications().length === 0 &&
+            isEmptyNotifications &&
             <LoadingContainer
-              animating={this.isLoading() && this.notifications().length === 0}
+              animating={this.isLoading() && isEmptyNotifications}
               text={translate('notifications.main.retrievingMessage', language)}
               style={styles.marginSpacing}
             />}
 
           {!this.isLoading() &&
-            this.notifications().length === 0 &&
+            isEmptyNotifications &&
             <View style={styles.textContainer}>
               <Text style={styles.noneTitle}>
                 {translate('notifications.main.noneMessage', language)}
               </Text>
             </View>}
 
-          {this.notifications().length > 0 &&
+          {!isEmptyNotifications &&
             <FlatList
               ref={ref => {
                 this.notificationsList = ref;