Fix notifications

https://gitlab.com/soapbox-pub/soapbox/merge_requests/120/diffs#diff-content-917c7fb80cf426cfae1e7baaa21b3d90ccb2b29c

app/javascript/gabsocial/actions/notifications.js

@@ -14,6 +14,7 @@ import { unescapeHTML } from '../utils/html';
 import { getFilters, regexFromFilters } from '../selectors';
 import { me } from 'gabsocial/initial_state';
 
+export const NOTIFICATIONS_INITIALIZE  = 'NOTIFICATIONS_INITIALIZE';
 export const NOTIFICATIONS_UPDATE      = 'NOTIFICATIONS_UPDATE';
 export const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';
 export const NOTIFICATIONS_UPDATE_QUEUE = 'NOTIFICATIONS_UPDATE_QUEUE';
@@ -27,6 +28,7 @@ export const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';
 
 export const NOTIFICATIONS_CLEAR      = 'NOTIFICATIONS_CLEAR';
 export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
+export const NOTIFICATIONS_MARK_READ  = 'NOTIFICATIONS_MARK_READ';
 
 export const MAX_QUEUED_NOTIFICATIONS = 40;
 
@@ -43,6 +45,12 @@ const fetchRelatedRelationships = (dispatch, notifications) => {
   }
 };
 
+export function initializeNotifications() {
+  return {
+    type: NOTIFICATIONS_INITIALIZE,
+  };
+}
+
 export function updateNotifications(notification, intlMessages, intlLocale) {
   return (dispatch, getState) => {
     const showInColumn = getState().getIn(['settings', 'notifications', 'shows', notification.type], true);
@@ -134,6 +142,7 @@ export function dequeueNotifications() {
     dispatch({
       type: NOTIFICATIONS_DEQUEUE,
     });
+    dispatch(markReadNotifications());
   }
 };
 
@@ -225,10 +234,13 @@ export function clearNotifications() {
 };
 
 export function scrollTopNotifications(top) {
-  return {
-    type: NOTIFICATIONS_SCROLL_TOP,
-    top,
-  };
+  return (dispatch, getState) => {
+    dispatch({
+      type: NOTIFICATIONS_SCROLL_TOP,
+      top,
+    });
+    dispatch(markReadNotifications());
+  }
 };
 
 export function setFilter (filterType) {
@@ -242,3 +254,20 @@ export function setFilter (filterType) {
     dispatch(saveSettings());
   };
 };
+
+export function markReadNotifications() {
+  return (dispatch, getState) => {
+    if (!me) return;
+    const top_notification = parseInt(getState().getIn(['notifications', 'items', 0, 'id']));
+    const last_read = getState().getIn(['notifications', 'lastRead']);
+
+    if (top_notification && top_notification > last_read) {
+      api(getState).post('/api/v1/notifications/mark_read', {id: top_notification}).then(response => {
+        dispatch({
+          type: NOTIFICATIONS_MARK_READ,
+          notification: top_notification,
+        });
+      });
+    }
+  }
+};

app/javascript/gabsocial/features/ui/index.js

@@ -14,7 +14,10 @@ import { isMobile } from '../../is_mobile';
 import { debounce } from 'lodash';
 import { uploadCompose, resetCompose } from '../../actions/compose';
 import { expandHomeTimeline } from '../../actions/timelines';
-import { expandNotifications } from '../../actions/notifications';
+import {
+  initializeNotifications,
+  expandNotifications,
+} from '../../actions/notifications';
 import { fetchFilters } from '../../actions/filters';
 import { clearHeight } from '../../actions/height_cache';
 import { openModal } from '../../actions/modal';
@@ -381,6 +384,7 @@ class UI extends React.PureComponent {
     if (me) {
       this.props.dispatch(expandHomeTimeline());
       this.props.dispatch(expandNotifications());
+      this.props.dispatch(initializeNotifications());
       this.props.dispatch(fetchGroups('member'));
 
       setTimeout(() => this.props.dispatch(fetchFilters()), 500);

app/javascript/gabsocial/initial_state.js

@@ -24,5 +24,6 @@ export const profile_directory = getMeta('profile_directory');
 export const isStaff = getMeta('is_staff');
 export const forceSingleColumn = !getMeta('advanced_layout');
 export const promotions = initialState && initialState.promotions;
+export const unreadCount = getMeta('unread_count');
 
 export default initialState;

app/javascript/gabsocial/reducers/notifications.js

@@ -1,4 +1,5 @@
 import {
+  NOTIFICATIONS_INITIALIZE,
   NOTIFICATIONS_UPDATE,
   NOTIFICATIONS_EXPAND_SUCCESS,
   NOTIFICATIONS_EXPAND_REQUEST,
@@ -9,6 +10,7 @@ import {
   NOTIFICATIONS_UPDATE_QUEUE,
   NOTIFICATIONS_DEQUEUE,
   MAX_QUEUED_NOTIFICATIONS,
+  NOTIFICATIONS_MARK_READ,
 } from '../actions/notifications';
 import {
   ACCOUNT_BLOCK_SUCCESS,
@@ -17,6 +19,7 @@ import {
 import { TIMELINE_DELETE, TIMELINE_DISCONNECT } from '../actions/timelines';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import compareId from '../compare_id';
+import { unreadCount } from 'gabsocial/initial_state';
 
 const initialState = ImmutableMap({
   items: ImmutableList(),
@@ -26,6 +29,7 @@ const initialState = ImmutableMap({
   isLoading: false,
   queuedNotifications: ImmutableList(), //max = MAX_QUEUED_NOTIFICATIONS
   totalQueuedNotificationsCount: 0, //used for queuedItems overflow for MAX_QUEUED_NOTIFICATIONS+
+  lastRead: -1,
 });
 
 const notificationToMap = notification => ImmutableMap({
@@ -126,6 +130,10 @@ const updateNotificationsQueue = (state, notification, intlMessages, intlLocale)
 
 export default function notifications(state = initialState, action) {
   switch(action.type) {
+  case NOTIFICATIONS_INITIALIZE:
+    return state.set('unread', unreadCount);
+  case NOTIFICATIONS_MARK_READ:
+    return state.set('lastRead', action.notification);
   case NOTIFICATIONS_EXPAND_REQUEST:
     return state.set('isLoading', true);
   case NOTIFICATIONS_EXPAND_FAIL: