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

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

* refactor(notifications): change after PR feedback

* fix(notifications): set correct content block height

* fix(notifications): fix eslint some problems

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

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

* refactor(notifications): implements PR review feedbacks

Author: lex111

routes.js

@@ -263,48 +263,44 @@ const MainTabNavigator = TabNavigator(
     Home: {
       screen: HomeStackNavigator,
       navigationOptions: {
-        tabBarIcon: ({ tintColor }) => (
+        tabBarIcon: ({ tintColor }) =>
           <Icon
             containerStyle={{ justifyContent: 'center', alignItems: 'center' }}
             color={tintColor}
             name="home"
             size={33}
-          />
-        ),
+          />,
       },
     },
     Notifications: {
       screen: NotificationsStackNavigator,
       navigationOptions: {
-        tabBarIcon: ({ tintColor }) => (
-          <NotificationIcon iconColor={tintColor} />
-        ),
+        tabBarIcon: ({ tintColor }) =>
+          <NotificationIcon iconColor={tintColor} />,
       },
     },
     Search: {
       screen: SearchStackNavigator,
       navigationOptions: {
-        tabBarIcon: ({ tintColor }) => (
+        tabBarIcon: ({ tintColor }) =>
           <Icon
             containerStyle={{ justifyContent: 'center', alignItems: 'center' }}
             color={tintColor}
             name="search"
             size={33}
-          />
-        ),
+          />,
       },
     },
     MyProfile: {
       screen: MyProfileStackNavigator,
       navigationOptions: {
-        tabBarIcon: ({ tintColor }) => (
+        tabBarIcon: ({ tintColor }) =>
           <Icon
             containerStyle={{ justifyContent: 'center', alignItems: 'center' }}
             color={tintColor}
             name="person"
             size={33}
-          />
-        ),
+          />,
       },
     },
   },
@@ -319,7 +315,7 @@ const MainTabNavigator = TabNavigator(
         backgroundColor: colors.alabaster,
       },
     },
-    tabBarComponent: ({ jumpToIndex, ...props }) => (
+    tabBarComponent: ({ jumpToIndex, ...props }) =>
       <TabBarBottom
         {...props}
         jumpToIndex={index => {
@@ -345,8 +341,7 @@ const MainTabNavigator = TabNavigator(
             jumpToIndex(index);
           }
         }}
-      />
-    ),
+      />,
   }
 );
 

src/api/index.js

@@ -263,6 +263,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/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 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 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 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 as read',
     },
   },
   search: {

src/locale/languages/ru.js

@@ -135,6 +135,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 as read',
     },
   },
   search: {

src/notifications/notifications.action.js

@@ -4,6 +4,7 @@ import {
   fetchMarkRepoNotificationAsRead,
   fetchNotificationsCount,
   fetchRepoNotificationsCount,
+  fetchMarkAllNotificationsAsRead,
 } from 'api';
 import {
   GET_UNREAD_NOTIFICATIONS,
@@ -12,6 +13,7 @@ import {
   MARK_NOTIFICATION_AS_READ,
   MARK_REPO_AS_READ,
   GET_NOTIFICATIONS_COUNT,
+  MARK_ALL_NOTIFICATIONS_AS_READ,
 } from './notifications.type';
 
 export const getUnreadNotifications = () => {
@@ -153,3 +155,24 @@ export const getNotificationsCount = () => {
       });
   };
 };
+
+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

@@ -5,6 +5,7 @@ import {
   MARK_NOTIFICATION_AS_READ,
   MARK_REPO_AS_READ,
   GET_NOTIFICATIONS_COUNT,
+  MARK_ALL_NOTIFICATIONS_AS_READ,
 } from './notifications.type';
 
 const initialState = {
@@ -16,6 +17,7 @@ const initialState = {
   isPendingAll: false,
   isPendingMarkNotificationAsRead: false,
   isPendingRepoMarkAsRead: false,
+  isPendingMarkAllNotificationsAsRead: false,
   error: '',
   notificationsCount: null,
 };
@@ -150,6 +152,22 @@ export const notificationsReducer = (state = initialState, action = {}) => {
         ...state,
         error: action.payload,
       };
+    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;
   }