Merge branch 'timeline-queue-filters' into 'develop'

Fix timeline queue header when filters are enabled, fixes #306

Closes #306

See merge request soapbox-pub/soapbox-fe!163

app/soapbox/actions/streaming.js

@@ -4,7 +4,7 @@ import {
   expandHomeTimeline,
   connectTimeline,
   disconnectTimeline,
-  updateTimelineQueue,
+  processTimelineUpdate,
 } from './timelines';
 import { updateNotificationsQueue, expandNotifications } from './notifications';
 import { updateConversations } from './conversations';
@@ -36,7 +36,7 @@ export function connectTimelineStream(timelineId, path, pollingRefresh = null, a
       onReceive(data) {
         switch(data.event) {
         case 'update':
-          dispatch(updateTimelineQueue(timelineId, JSON.parse(data.payload), accept));
+          dispatch(processTimelineUpdate(timelineId, JSON.parse(data.payload), accept));
           break;
         case 'delete':
           dispatch(deleteFromTimelines(data.payload));

app/soapbox/actions/timelines.js

@@ -1,6 +1,8 @@
 import { importFetchedStatus, importFetchedStatuses } from './importer';
 import api, { getLinks } from '../api';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { getSettings } from 'soapbox/actions/settings';
+import { shouldFilter } from 'soapbox/utils/timelines';
 
 export const TIMELINE_UPDATE  = 'TIMELINE_UPDATE';
 export const TIMELINE_DELETE  = 'TIMELINE_DELETE';
@@ -18,6 +20,19 @@ export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
 
 export const MAX_QUEUED_ITEMS = 40;
 
+export function processTimelineUpdate(timeline, status, accept) {
+  return (dispatch, getState) => {
+    const columnSettings = getSettings(getState()).get(timeline, ImmutableMap());
+    const shouldSkipQueue = shouldFilter(fromJS(status), columnSettings);
+
+    if (shouldSkipQueue) {
+      return dispatch(updateTimeline(timeline, status, accept));
+    } else {
+      return dispatch(updateTimelineQueue(timeline, status, accept));
+    }
+  };
+}
+
 export function updateTimeline(timeline, status, accept) {
   return dispatch => {
     if (typeof accept === 'function' && !accept(status)) {

app/soapbox/features/ui/containers/status_list_container.js

@@ -6,6 +6,7 @@ import { debounce } from 'lodash';
 import { dequeueTimeline } from 'soapbox/actions/timelines';
 import { scrollTopTimeline } from '../../../actions/timelines';
 import { getSettings } from 'soapbox/actions/settings';
+import { shouldFilter } from 'soapbox/utils/timelines';
 
 const makeGetStatusIds = () => createSelector([
   (state, { type }) => getSettings(state).get(type, ImmutableMap()),
@@ -14,24 +15,9 @@ const makeGetStatusIds = () => createSelector([
   (state)           => state.get('me'),
 ], (columnSettings, statusIds, statuses, me) => {
   return statusIds.filter(id => {
-    if (id === null) return true;
-
-    const statusForId = statuses.get(id);
-    let showStatus    = true;
-
-    if (columnSettings.getIn(['shows', 'reblog']) === false) {
-      showStatus = showStatus && statusForId.get('reblog') === null;
-    }
-
-    if (columnSettings.getIn(['shows', 'reply']) === false) {
-      showStatus = showStatus && (statusForId.get('in_reply_to_id') === null);
-    }
-
-    if (columnSettings.getIn(['shows', 'direct']) === false) {
-      showStatus = showStatus && (statusForId.get('visibility') !== 'direct');
-    }
-
-    return showStatus;
+    const status = statuses.get(id);
+    if (!status) return true;
+    return !shouldFilter(status, columnSettings);
   });
 });
 

app/soapbox/utils/__tests__/timelines-test.js

@@ -0,0 +1,70 @@
+import { shouldFilter } from '../timelines';
+import { fromJS } from 'immutable';
+
+describe('shouldFilter', () => {
+  it('returns false under normal circumstances', () => {
+    const columnSettings = fromJS({});
+    const status = fromJS({});
+    expect(shouldFilter(status, columnSettings)).toBe(false);
+  });
+
+  it('reblog: returns true when `shows.reblog == false`', () => {
+    const columnSettings = fromJS({ shows: { reblog: false } });
+    const status = fromJS({ reblog: {} });
+    expect(shouldFilter(status, columnSettings)).toBe(true);
+  });
+
+  it('reblog: returns false when `shows.reblog == true`', () => {
+    const columnSettings = fromJS({ shows: { reblog: true } });
+    const status = fromJS({ reblog: {} });
+    expect(shouldFilter(status, columnSettings)).toBe(false);
+  });
+
+  it('reply: returns true when `shows.reply == false`', () => {
+    const columnSettings = fromJS({ shows: { reply: false } });
+    const status = fromJS({ in_reply_to_id: '1234' });
+    expect(shouldFilter(status, columnSettings)).toBe(true);
+  });
+
+  it('reply: returns false when `shows.reply == true`', () => {
+    const columnSettings = fromJS({ shows: { reply: true } });
+    const status = fromJS({ in_reply_to_id: '1234' });
+    expect(shouldFilter(status, columnSettings)).toBe(false);
+  });
+
+  it('direct: returns true when `shows.direct == false`', () => {
+    const columnSettings = fromJS({ shows: { direct: false } });
+    const status = fromJS({ visibility: 'direct' });
+    expect(shouldFilter(status, columnSettings)).toBe(true);
+  });
+
+  it('direct: returns false when `shows.direct == true`', () => {
+    const columnSettings = fromJS({ shows: { direct: true } });
+    const status = fromJS({ visibility: 'direct' });
+    expect(shouldFilter(status, columnSettings)).toBe(false);
+  });
+
+  it('direct: returns false for a public post when `shows.direct == false`', () => {
+    const columnSettings = fromJS({ shows: { direct: false } });
+    const status = fromJS({ visibility: 'public' });
+    expect(shouldFilter(status, columnSettings)).toBe(false);
+  });
+
+  it('multiple settings', () => {
+    const columnSettings = fromJS({ shows: { reblog: false, reply: false, direct: false } });
+    const status = fromJS({ reblog: null, in_reply_to_id: null, visibility: 'direct' });
+    expect(shouldFilter(status, columnSettings)).toBe(true);
+  });
+
+  it('multiple settings', () => {
+    const columnSettings = fromJS({ shows: { reblog: false, reply: true, direct: false } });
+    const status = fromJS({ reblog: null, in_reply_to_id: '1234', visibility: 'public' });
+    expect(shouldFilter(status, columnSettings)).toBe(false);
+  });
+
+  it('multiple settings', () => {
+    const columnSettings = fromJS({ shows: { reblog: true, reply: false, direct: true } });
+    const status = fromJS({ reblog: {}, in_reply_to_id: '1234', visibility: 'direct' });
+    expect(shouldFilter(status, columnSettings)).toBe(true);
+  });
+});

app/soapbox/utils/timelines.js

@@ -0,0 +1,13 @@
+import { Map as ImmutableMap } from 'immutable';
+
+export const shouldFilter = (status, columnSettings) => {
+  const shows = ImmutableMap({
+    reblog: status.get('reblog') !== null,
+    reply: status.get('in_reply_to_id') !== null,
+    direct: status.get('visibility') === 'direct',
+  });
+
+  return shows.some((value, key) => {
+    return columnSettings.getIn(['shows', key]) === false && value;
+  });
+};