Merge branch 'refactor-timelines' into 'develop'

Refactor timelines and user lists to use OrderedSet

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

app/soapbox/actions/timelines.js

@@ -1,6 +1,6 @@
 import { importFetchedStatus, importFetchedStatuses } from './importer';
 import api, { getLinks } from '../api';
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
 import { getSettings } from 'soapbox/actions/settings';
 import { shouldFilter } from 'soapbox/utils/timelines';
 
@@ -63,42 +63,30 @@ export function updateTimelineQueue(timeline, statusId, accept) {
   };
 };
 
-export function dequeueTimeline(timeline, expandFunc, optionalExpandArgs) {
+export function dequeueTimeline(timelineId, expandFunc, optionalExpandArgs) {
   return (dispatch, getState) => {
-    const queuedItems = getState().getIn(['timelines', timeline, 'queuedItems'], ImmutableList());
-    const totalQueuedItemsCount = getState().getIn(['timelines', timeline, 'totalQueuedItemsCount'], 0);
+    const state = getState();
+    const queuedCount = state.getIn(['timelines', timelineId, 'totalQueuedItemsCount'], 0);
 
-    let shouldDispatchDequeue = true;
+    if (queuedCount <= 0) return;
 
-    if (totalQueuedItemsCount === 0) {
+    if (queuedCount <= MAX_QUEUED_ITEMS) {
+      dispatch({ type: TIMELINE_DEQUEUE, timeline: timelineId });
       return;
-    } else if (totalQueuedItemsCount > 0 && totalQueuedItemsCount <= MAX_QUEUED_ITEMS) {
-      queuedItems.forEach(statusId => {
-        dispatch(updateTimeline(timeline, statusId, null));
-      });
-    } else {
-      if (typeof expandFunc === 'function') {
-        dispatch(clearTimeline(timeline));
-        expandFunc();
-      } else {
-        if (timeline === 'home') {
-          dispatch(clearTimeline(timeline));
-          dispatch(expandHomeTimeline(optionalExpandArgs));
-        } else if (timeline === 'community') {
-          dispatch(clearTimeline(timeline));
-          dispatch(expandCommunityTimeline(optionalExpandArgs));
-        } else {
-          shouldDispatchDequeue = false;
-        }
-      }
     }
 
-    if (!shouldDispatchDequeue) return;
-
-    dispatch({
-      type: TIMELINE_DEQUEUE,
-      timeline,
-    });
+    if (typeof expandFunc === 'function') {
+      dispatch(clearTimeline(timelineId));
+      expandFunc();
+    } else {
+      if (timelineId === 'home') {
+        dispatch(clearTimeline(timelineId));
+        dispatch(expandHomeTimeline(optionalExpandArgs));
+      } else if (timelineId === 'community') {
+        dispatch(clearTimeline(timelineId));
+        dispatch(expandCommunityTimeline(optionalExpandArgs));
+      }
+    }
   };
 };
 
@@ -142,7 +130,7 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) {
       return;
     }
 
-    if (!params.max_id && !params.pinned && timeline.get('items', ImmutableList()).size > 0) {
+    if (!params.max_id && !params.pinned && timeline.get('items', ImmutableOrderedSet()).size > 0) {
       params.since_id = timeline.getIn(['items', 0]);
     }
 

app/soapbox/components/blurhash.js

@@ -56,7 +56,7 @@ function Blurhash({
 }
 
 Blurhash.propTypes = {
-  hash: PropTypes.string.isRequired,
+  hash: PropTypes.string,
   width: PropTypes.number,
   height: PropTypes.number,
   dummy: PropTypes.bool,

app/soapbox/components/status_list.js

@@ -17,9 +17,9 @@ export default class StatusList extends ImmutablePureComponent {
 
   static propTypes = {
     scrollKey: PropTypes.string.isRequired,
-    statusIds: ImmutablePropTypes.list.isRequired,
+    statusIds: ImmutablePropTypes.orderedSet.isRequired,
     lastStatusId: PropTypes.string,
-    featuredStatusIds: ImmutablePropTypes.list,
+    featuredStatusIds: ImmutablePropTypes.orderedSet,
     onLoadMore: PropTypes.func,
     isLoading: PropTypes.bool,
     isPartial: PropTypes.bool,

app/soapbox/features/account_timeline/index.js

@@ -7,7 +7,7 @@ import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../acti
 import StatusList from '../../components/status_list';
 import LoadingIndicator from '../../components/loading_indicator';
 import Column from '../ui/components/column';
-import { List as ImmutableList } from 'immutable';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import { fetchAccountIdentityProofs } from '../../actions/identity_proofs';
@@ -16,8 +16,6 @@ import { NavLink } from 'react-router-dom';
 import { fetchPatronAccount } from '../../actions/patron';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
-const emptyList = ImmutableList();
-
 const mapStateToProps = (state, { params, withReplies = false }) => {
   const username = params.username || '';
   const me = state.get('me');
@@ -48,8 +46,8 @@ const mapStateToProps = (state, { params, withReplies = false }) => {
     accountUsername,
     accountApId,
     isAccount: !!state.getIn(['accounts', accountId]),
-    statusIds: state.getIn(['timelines', `account:${path}`, 'items'], emptyList),
-    featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], emptyList),
+    statusIds: state.getIn(['timelines', `account:${path}`, 'items'], ImmutableOrderedSet()),
+    featuredStatusIds: withReplies ? ImmutableOrderedSet() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], ImmutableOrderedSet()),
     isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
     hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
     me,
@@ -63,8 +61,8 @@ class AccountTimeline extends ImmutablePureComponent {
   static propTypes = {
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
-    statusIds: ImmutablePropTypes.list,
-    featuredStatusIds: ImmutablePropTypes.list,
+    statusIds: ImmutablePropTypes.orderedSet,
+    featuredStatusIds: ImmutablePropTypes.orderedSet,
     isLoading: PropTypes.bool,
     hasMore: PropTypes.bool,
     withReplies: PropTypes.bool,

app/soapbox/features/bookmarks/index.js

@@ -30,7 +30,7 @@ class Bookmarks extends ImmutablePureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     shouldUpdateScroll: PropTypes.func,
-    statusIds: ImmutablePropTypes.list.isRequired,
+    statusIds: ImmutablePropTypes.orderedSet.isRequired,
     intl: PropTypes.object.isRequired,
     columnId: PropTypes.string,
     multiColumn: PropTypes.bool,

app/soapbox/features/favourited_statuses/index.js

@@ -28,7 +28,7 @@ class Favourites extends ImmutablePureComponent {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
-    statusIds: ImmutablePropTypes.list.isRequired,
+    statusIds: ImmutablePropTypes.orderedSet.isRequired,
     intl: PropTypes.object.isRequired,
     hasMore: PropTypes.bool,
     isLoading: PropTypes.bool,

app/soapbox/features/pinned_statuses/index.js

@@ -26,7 +26,7 @@ class PinnedStatuses extends ImmutablePureComponent {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
-    statusIds: ImmutablePropTypes.list.isRequired,
+    statusIds: ImmutablePropTypes.orderedSet.isRequired,
     intl: PropTypes.object.isRequired,
     hasMore: PropTypes.bool.isRequired,
     isMyAccount: PropTypes.bool.isRequired,

app/soapbox/features/scheduled_statuses/index.js

@@ -30,7 +30,7 @@ class ScheduledStatuses extends ImmutablePureComponent {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
-    statusIds: ImmutablePropTypes.list.isRequired,
+    statusIds: ImmutablePropTypes.orderedSet.isRequired,
     intl: PropTypes.object.isRequired,
     hasMore: PropTypes.bool,
     isLoading: PropTypes.bool,

app/soapbox/features/ui/components/profile_info_panel.js

@@ -131,7 +131,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
               {fields.map((pair, i) =>
                 isTicker(pair.get('name', '')) ? (
-                  <CryptoAddress ticker={getTicker(pair.get('name')).toLowerCase()} address={pair.get('value_plain')} />
+                  <CryptoAddress key={i} ticker={getTicker(pair.get('name')).toLowerCase()} address={pair.get('value_plain')} />
                 ) : (
                   <dl className='profile-info-panel-content__fields__item' key={i}>
                     <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />

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

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import StatusList from '../../../components/status_list';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { createSelector } from 'reselect';
 import { debounce } from 'lodash';
 import { dequeueTimeline } from 'soapbox/actions/timelines';
@@ -10,7 +10,7 @@ import { shouldFilter } from 'soapbox/utils/timelines';
 
 const makeGetStatusIds = () => createSelector([
   (state, { type }) => getSettings(state).get(type, ImmutableMap()),
-  (state, { type }) => state.getIn(['timelines', type, 'items'], ImmutableList()),
+  (state, { type }) => state.getIn(['timelines', type, 'items'], ImmutableOrderedSet()),
   (state)           => state.get('statuses'),
   (state)           => state.get('me'),
 ], (columnSettings, statusIds, statuses, me) => {
@@ -25,7 +25,7 @@ const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
 
   const mapStateToProps = (state, { timelineId }) => {
-    const lastStatusId = state.getIn(['timelines', timelineId, 'items'], ImmutableList()).last();
+    const lastStatusId = state.getIn(['timelines', timelineId, 'items'], ImmutableOrderedSet()).last();
 
     return {
       statusIds: getStatusIds(state, { type: timelineId }),

app/soapbox/reducers/__tests__/status_lists-test.js

@@ -1,5 +1,5 @@
 import reducer from '../status_lists';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
 
 describe('status_lists reducer', () => {
   it('should return the initial state', () => {
@@ -7,22 +7,22 @@ describe('status_lists reducer', () => {
       favourites: ImmutableMap({
         next: null,
         loaded: false,
-        items: ImmutableList(),
+        items: ImmutableOrderedSet(),
       }),
       bookmarks: ImmutableMap({
         next: null,
         loaded: false,
-        items: ImmutableList(),
+        items: ImmutableOrderedSet(),
       }),
       pins: ImmutableMap({
         next: null,
         loaded: false,
-        items: ImmutableList(),
+        items: ImmutableOrderedSet(),
       }),
       scheduled_statuses: ImmutableMap({
         next: null,
         loaded: false,
-        items: ImmutableList(),
+        items: ImmutableOrderedSet(),
       }),
     }));
   });

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

@@ -1,8 +1,121 @@
 import reducer from '../timelines';
-import { Map as ImmutableMap } from 'immutable';
+import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
+import {
+  TIMELINE_EXPAND_REQUEST,
+  TIMELINE_EXPAND_FAIL,
+  TIMELINE_EXPAND_SUCCESS,
+} from 'soapbox/actions/timelines';
 
 describe('timelines reducer', () => {
   it('should return the initial state', () => {
     expect(reducer(undefined, {})).toEqual(ImmutableMap());
   });
+
+  describe('TIMELINE_EXPAND_REQUEST', () => {
+    it('sets loading to true', () => {
+      const action = {
+        type: TIMELINE_EXPAND_REQUEST,
+        timeline: 'home',
+      };
+
+      const result = reducer(undefined, action);
+      expect(result.getIn(['home', 'isLoading'])).toBe(true);
+    });
+  });
+
+  describe('TIMELINE_EXPAND_FAIL', () => {
+    it('sets loading to false', () => {
+      const state = fromJS({
+        home: { isLoading: true },
+      });
+
+      const action = {
+        type: TIMELINE_EXPAND_FAIL,
+        timeline: 'home',
+      };
+
+      const result = reducer(state, action);
+      expect(result.getIn(['home', 'isLoading'])).toBe(false);
+    });
+  });
+
+  describe('TIMELINE_EXPAND_SUCCESS', () => {
+    it('sets loading to false', () => {
+      const state = fromJS({
+        home: { isLoading: true },
+      });
+
+      const action = {
+        type: TIMELINE_EXPAND_SUCCESS,
+        timeline: 'home',
+      };
+
+      const result = reducer(state, action);
+      expect(result.getIn(['home', 'isLoading'])).toBe(false);
+    });
+
+    it('adds the status IDs', () => {
+      const expected = ImmutableOrderedSet(['1', '2', '5']);
+
+      const action = {
+        type: TIMELINE_EXPAND_SUCCESS,
+        timeline: 'home',
+        statuses: [{ id: '1' }, { id: '2' }, { id: '5' }],
+      };
+
+      const result = reducer(undefined, action);
+      expect(result.getIn(['home', 'items'])).toEqual(expected);
+    });
+
+    it('merges new status IDs', () => {
+      const state = fromJS({
+        home: { items: ImmutableOrderedSet(['5', '2', '1']) },
+      });
+
+      const expected = ImmutableOrderedSet(['6', '5', '4', '2', '1']);
+
+      const action = {
+        type: TIMELINE_EXPAND_SUCCESS,
+        timeline: 'home',
+        statuses: [{ id: '6' }, { id: '5' }, { id: '4' }],
+      };
+
+      const result = reducer(state, action);
+      expect(result.getIn(['home', 'items'])).toEqual(expected);
+    });
+
+    it('merges old status IDs', () => {
+      const state = fromJS({
+        home: { items: ImmutableOrderedSet(['6', '4', '3']) },
+      });
+
+      const expected = ImmutableOrderedSet(['6', '4', '3', '5', '2', '1']);
+
+      const action = {
+        type: TIMELINE_EXPAND_SUCCESS,
+        timeline: 'home',
+        statuses: [{ id: '5' }, { id: '2' }, { id: '1' }],
+      };
+
+      const result = reducer(state, action);
+      expect(result.getIn(['home', 'items'])).toEqual(expected);
+    });
+
+    it('overrides pinned post IDs', () => {
+      const state = fromJS({
+        'account:1:pinned': { items: ImmutableOrderedSet(['5', '2', '1']) },
+      });
+
+      const expected = ImmutableOrderedSet(['9', '8', '7']);
+
+      const action = {
+        type: TIMELINE_EXPAND_SUCCESS,
+        timeline: 'home',
+        statuses: [{ id: '9' }, { id: '8' }, { id: '7' }],
+      };
+
+      const result = reducer(state, action);
+      expect(result.getIn(['home', 'items'])).toEqual(expected);
+    });
+  });
 });

app/soapbox/reducers/status_lists.js

@@ -17,7 +17,7 @@ import {
 import {
   PINNED_STATUSES_FETCH_SUCCESS,
 } from '../actions/pin_statuses';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import {
   FAVOURITE_SUCCESS,
   UNFAVOURITE_SUCCESS,
@@ -37,76 +37,76 @@ import {
   SCHEDULED_STATUS_CANCEL_SUCCESS,
 } from '../actions/scheduled_statuses';
 
-const initialState = ImmutableMap({
-  favourites: ImmutableMap({
-    next: null,
-    loaded: false,
-    items: ImmutableList(),
-  }),
-  bookmarks: ImmutableMap({
-    next: null,
-    loaded: false,
-    items: ImmutableList(),
-  }),
-  pins: ImmutableMap({
-    next: null,
-    loaded: false,
-    items: ImmutableList(),
-  }),
-  scheduled_statuses: ImmutableMap({
-    next: null,
-    loaded: false,
-    items: ImmutableList(),
-  }),
+const initialMap = ImmutableMap({
+  next: null,
+  loaded: false,
+  items: ImmutableOrderedSet(),
 });
 
+const initialState = ImmutableMap({
+  favourites: initialMap,
+  bookmarks: initialMap,
+  pins: initialMap,
+  scheduled_statuses: initialMap,
+});
+
+const getStatusId = status => typeof status === 'string' ? status : status.get('id');
+
+const getStatusIds = (statuses = []) => (
+  ImmutableOrderedSet(statuses.map(status => status.id))
+);
+
+const setLoading = (state, listType, loading) => state.setIn([listType, 'isLoading'], loading);
+
 const normalizeList = (state, listType, statuses, next) => {
-  return state.update(listType, listMap => listMap.withMutations(map => {
+  return state.update(listType, initialMap, listMap => listMap.withMutations(map => {
     map.set('next', next);
     map.set('loaded', true);
     map.set('isLoading', false);
-    map.set('items', ImmutableList(statuses.map(item => item.id)));
+    map.set('items', getStatusIds(statuses));
   }));
 };
 
 const appendToList = (state, listType, statuses, next) => {
-  return state.update(listType, listMap => listMap.withMutations(map => {
+  const newIds = getStatusIds(statuses);
+
+  return state.update(listType, initialMap, listMap => listMap.withMutations(map => {
     map.set('next', next);
     map.set('isLoading', false);
-    map.set('items', map.get('items').concat(statuses.map(item => item.id)));
+    map.update('items', ImmutableOrderedSet(), items => items.union(newIds));
   }));
 };
 
 const prependOneToList = (state, listType, status) => {
-  return state.update(listType, listMap => listMap.withMutations(map => {
-    map.set('items', map.get('items').unshift(status.get('id')));
-  }));
+  const statusId = getStatusId(status);
+  return state.updateIn([listType, 'items'], ImmutableOrderedSet(), items => {
+    return ImmutableOrderedSet([statusId]).union(items);
+  });
 };
 
-const removeOneFromList = (state, listType, statusId) => {
-  return state.update(listType, listMap => listMap.withMutations(map => {
-    map.set('items', map.get('items').filter(item => item !== statusId));
-  }));
+const removeOneFromList = (state, listType, status) => {
+  const statusId = getStatusId(status);
+  return state.updateIn([listType, 'items'], ImmutableOrderedSet(), items => items.delete(statusId));
 };
 
 export default function statusLists(state = initialState, action) {
   switch(action.type) {
   case FAVOURITED_STATUSES_FETCH_REQUEST:
   case FAVOURITED_STATUSES_EXPAND_REQUEST:
-    return state.setIn(['favourites', 'isLoading'], true);
+    return setLoading(state, 'favourites', true);
   case FAVOURITED_STATUSES_FETCH_FAIL:
   case FAVOURITED_STATUSES_EXPAND_FAIL:
-    return state.setIn(['favourites', 'isLoading'], false);
+    return setLoading(state, 'favourites', false);
   case FAVOURITED_STATUSES_FETCH_SUCCESS:
     return normalizeList(state, 'favourites', action.statuses, action.next);
   case FAVOURITED_STATUSES_EXPAND_SUCCESS:
     return appendToList(state, 'favourites', action.statuses, action.next);
   case BOOKMARKED_STATUSES_FETCH_REQUEST:
   case BOOKMARKED_STATUSES_EXPAND_REQUEST:
-    return state.setIn(['bookmarks', 'isLoading'], true);
+    return setLoading(state, 'bookmarks', true);
   case BOOKMARKED_STATUSES_FETCH_FAIL:
   case BOOKMARKED_STATUSES_EXPAND_FAIL:
-    return state.setIn(['bookmarks', 'isLoading'], false);
+    return setLoading(state, 'bookmarks', false);
   case BOOKMARKED_STATUSES_FETCH_SUCCESS:
     return normalizeList(state, 'bookmarks', action.statuses, action.next);
   case BOOKMARKED_STATUSES_EXPAND_SUCCESS:
@@ -127,10 +127,10 @@ export default function statusLists(state = initialState, action) {
     return removeOneFromList(state, 'pins', action.status);
   case SCHEDULED_STATUSES_FETCH_REQUEST:
   case SCHEDULED_STATUSES_EXPAND_REQUEST:
-    return state.setIn(['scheduled_statuses', 'isLoading'], true);
+    return setLoading(state, 'scheduled_statuses', true);
   case SCHEDULED_STATUSES_FETCH_FAIL:
   case SCHEDULED_STATUSES_EXPAND_FAIL:
-    return state.setIn(['scheduled_statuses', 'isLoading'], false);
+    return setLoading(state, 'scheduled_statuses', false);
   case SCHEDULED_STATUSES_FETCH_SUCCESS:
     return normalizeList(state, 'scheduled_statuses', action.statuses, action.next);
   case SCHEDULED_STATUSES_EXPAND_SUCCESS:

app/soapbox/reducers/timelines.js

@@ -17,10 +17,17 @@ import {
   ACCOUNT_MUTE_SUCCESS,
   ACCOUNT_UNFOLLOW_SUCCESS,
 } from '../actions/accounts';
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
-import compareId from '../compare_id';
+import {
+  Map as ImmutableMap,
+  List as ImmutableList,
+  OrderedSet as ImmutableOrderedSet,
+  fromJS,
+} from 'immutable';
 import { GROUP_REMOVE_STATUS_SUCCESS } from '../actions/groups';
 
+const TRUNCATE_LIMIT = 40;
+const TRUNCATE_SIZE  = 20;
+
 const initialState = ImmutableMap();
 
 const initialTimeline = ImmutableMap({
@@ -29,139 +36,195 @@ const initialTimeline = ImmutableMap({
   top: true,
   isLoading: false,
   hasMore: true,
-  items: ImmutableList(),
-  queuedItems: ImmutableList(), //max= MAX_QUEUED_ITEMS
+  items: ImmutableOrderedSet(),
+  queuedItems: ImmutableOrderedSet(), //max= MAX_QUEUED_ITEMS
   totalQueuedItemsCount: 0, //used for queuedItems overflow for MAX_QUEUED_ITEMS+
 });
 
-const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent) => {
-  return state.update(timeline, initialTimeline, map => map.withMutations(mMap => {
-    mMap.set('isLoading', false);
-    mMap.set('isPartial', isPartial);
+const getStatusIds = (statuses = ImmutableList()) => (
+  statuses.map(status => status.get('id')).toOrderedSet()
+);
 
-    if (!next && !isLoadingRecent) mMap.set('hasMore', false);
+const mergeStatusIds = (oldIds = ImmutableOrderedSet(), newIds = ImmutableOrderedSet()) => (
+  newIds.union(oldIds)
+);
 
-    if (!statuses.isEmpty()) {
-      mMap.update('items', ImmutableList(), oldIds => {
-        const newIds = statuses.map(status => status.get('id'));
+const addStatusId = (oldIds = ImmutableOrderedSet(), newId) => (
+  mergeStatusIds(oldIds, ImmutableOrderedSet([newId]))
+);
 
-        if (timeline.indexOf(':pinned') !== -1) {
-          return newIds;
+// Like `take`, but only if the collection's size exceeds truncateLimit
+const truncate = (items, truncateLimit, newSize) => (
+  items.size > truncateLimit ? items.take(newSize) : items
+);
+
+const truncateIds = items => truncate(items, TRUNCATE_LIMIT, TRUNCATE_SIZE);
+
+const setLoading = (state, timelineId, loading) => {
+  return state.update(timelineId, initialTimeline, timeline => timeline.set('isLoading', loading));
+};
+
+const expandNormalizedTimeline = (state, timelineId, statuses, next, isPartial, isLoadingRecent) => {
+  const newIds = getStatusIds(statuses);
+
+  return state.update(timelineId, initialTimeline, timeline => timeline.withMutations(timeline => {
+    timeline.set('isLoading', false);
+    timeline.set('isPartial', isPartial);
+
+    if (!next && !isLoadingRecent) timeline.set('hasMore', false);
+
+    // Pinned timelines can be replaced entirely
+    if (timelineId.endsWith(':pinned')) {
+      timeline.set('items', newIds);
+      return;
+    }
+
+    if (!newIds.isEmpty()) {
+      timeline.update('items', ImmutableOrderedSet(), oldIds => {
+        if (newIds.first() > oldIds.first()) {
+          return mergeStatusIds(oldIds, newIds);
+        } else {
+          return mergeStatusIds(newIds, oldIds);
         }
-
-        const lastIndex = oldIds.findLastIndex(id => id !== null && compareId(id, newIds.last()) >= 0) + 1;
-        const firstIndex = oldIds.take(lastIndex).findLastIndex(id => id !== null && compareId(id, newIds.first()) > 0);
-
-        if (firstIndex < 0) {
-          return (isPartial ? newIds.unshift(null) : newIds).concat(oldIds.skip(lastIndex));
-        }
-
-        return oldIds.take(firstIndex + 1).concat(
-          isPartial && oldIds.get(firstIndex) !== null ? newIds.unshift(null) : newIds,
-          oldIds.skip(lastIndex),
-        );
       });
     }
   }));
 };
 
-const updateTimeline = (state, timeline, statusId) => {
-  const top        = state.getIn([timeline, 'top']);
-  const ids        = state.getIn([timeline, 'items'], ImmutableList());
-  const includesId = ids.includes(statusId);
-  const unread     = state.getIn([timeline, 'unread'], 0);
+const updateTimeline = (state, timelineId, statusId) => {
+  const top    = state.getIn([timelineId, 'top']);
+  const oldIds = state.getIn([timelineId, 'items'], ImmutableOrderedSet());
+  const unread = state.getIn([timelineId, 'unread'], 0);
 
-  if (includesId) {
-    return state;
-  }
+  if (oldIds.includes(statusId)) return state;
 
-  let newIds = ids;
+  const newIds = addStatusId(oldIds, statusId);
 
-  return state.update(timeline, initialTimeline, map => map.withMutations(mMap => {
-    if (!top) mMap.set('unread', unread + 1);
-    if (top && ids.size > 40) newIds = newIds.take(20);
-    mMap.set('items', newIds.unshift(statusId));
-  }));
-};
-
-const updateTimelineQueue = (state, timeline, statusId) => {
-  const queuedStatuses = state.getIn([timeline, 'queuedItems'], ImmutableList());
-  const listedStatuses = state.getIn([timeline, 'items'], ImmutableList());
-  const totalQueuedItemsCount = state.getIn([timeline, 'totalQueuedItemsCount'], 0);
-
-  let alreadyExists = queuedStatuses.find(existingQueuedStatus => existingQueuedStatus === statusId);
-  if (!alreadyExists) alreadyExists = listedStatuses.find(existingListedStatusId => existingListedStatusId === statusId);
-
-  if (alreadyExists) {
-    return state;
-  }
-
-  let newQueuedStatuses = queuedStatuses;
-
-  return state.update(timeline, initialTimeline, map => map.withMutations(mMap => {
-    if (totalQueuedItemsCount <= MAX_QUEUED_ITEMS) {
-      mMap.set('queuedItems', newQueuedStatuses.push(statusId));
+  return state.update(timelineId, initialTimeline, timeline => timeline.withMutations(timeline => {
+    if (top) {
+      // For performance, truncate items if user is scrolled to the top
+      timeline.set('items', truncateIds(newIds));
+    } else {
+      timeline.set('unread', unread + 1);
+      timeline.set('items', newIds);
     }
-    mMap.set('totalQueuedItemsCount', totalQueuedItemsCount + 1);
   }));
 };
 
-const deleteStatus = (state, id, accountId, references, exclude_account = null) => {
-  state.keySeq().forEach(timeline => {
-    if (exclude_account === null || (timeline !== `account:${exclude_account}` && !timeline.startsWith(`account:${exclude_account}:`)))
-      state = state.updateIn([timeline, 'items'], list => list.filterNot(item => item === id));
-  });
+const updateTimelineQueue = (state, timelineId, statusId) => {
+  const queuedIds   = state.getIn([timelineId, 'queuedItems'], ImmutableOrderedSet());
+  const listedIds   = state.getIn([timelineId, 'items'], ImmutableOrderedSet());
+  const queuedCount = state.getIn([timelineId, 'totalQueuedItemsCount'], 0);
 
-  // Remove reblogs of deleted status
-  references.forEach(ref => {
-    state = deleteStatus(state, ref[0], ref[1], [], exclude_account);
-  });
+  if (queuedIds.includes(statusId)) return state;
+  if (listedIds.includes(statusId)) return state;
 
-  return state;
-};
-
-const clearTimeline = (state, timeline) => {
-  return state.set(timeline, initialTimeline);
-};
-
-const filterTimelines = (state, relationship, statuses) => {
-  let references;
-
-  statuses.forEach(status => {
-    if (status.get('account') !== relationship.id) {
-      return;
-    }
-
-    references = statuses.filter(item => item.get('reblog') === status.get('id')).map(item => [item.get('id'), item.get('account')]);
-    state      = deleteStatus(state, status.get('id'), status.get('account'), references, relationship.id);
-  });
-
-  return state;
-};
-
-const updateTop = (state, timeline, top) => {
-  return state.update(timeline, initialTimeline, map => map.withMutations(mMap => {
-    if (top) mMap.set('unread', 0);
-    mMap.set('top', top);
+  return state.update(timelineId, initialTimeline, timeline => timeline.withMutations(timeline => {
+    timeline.set('totalQueuedItemsCount', queuedCount + 1);
+    timeline.set('queuedItems', addStatusId(queuedIds, statusId).take(MAX_QUEUED_ITEMS));
   }));
 };
 
-const filterTimeline = (timeline, state, relationship, statuses) =>
-  state.updateIn([timeline, 'items'], ImmutableList(), list =>
-    list.filterNot(statusId =>
+const shouldDelete = (timelineId, excludeAccount) => {
+  if (!excludeAccount) return true;
+  if (timelineId === `account:${excludeAccount}`) return false;
+  if (timelineId.startsWith(`account:${excludeAccount}:`)) return false;
+  return true;
+};
+
+const deleteStatus = (state, statusId, accountId, references, excludeAccount = null) => {
+  return state.withMutations(state => {
+    state.keySeq().forEach(timelineId => {
+      if (shouldDelete(timelineId, excludeAccount)) {
+        state.updateIn([timelineId, 'items'], ids => ids.delete(statusId));
+        state.updateIn([timelineId, 'queuedItems'], ids => ids.delete(statusId));
+      }
+    });
+
+    // Remove reblogs of deleted status
+    references.forEach(ref => {
+      deleteStatus(state, ref[0], ref[1], [], excludeAccount);
+    });
+  });
+};
+
+const clearTimeline = (state, timelineId) => {
+  return state.set(timelineId, initialTimeline);
+};
+
+const updateTop = (state, timelineId, top) => {
+  return state.update(timelineId, initialTimeline, timeline => timeline.withMutations(timeline => {
+    if (top) timeline.set('unread', 0);
+    timeline.set('top', top);
+  }));
+};
+
+const isReblogOf = (reblog, status) => reblog.get('reblog') === status.get('id');
+const statusToReference = status => [status.get('id'), status.get('account')];
+
+const buildReferencesTo = (statuses, status) => (
+  statuses
+    .filter(reblog => isReblogOf(reblog, status))
+    .map(statusToReference)
+);
+
+const filterTimeline = (state, timelineId, relationship, statuses) =>
+  state.updateIn([timelineId, 'items'], ImmutableOrderedSet(), ids =>
+    ids.filterNot(statusId =>
       statuses.getIn([statusId, 'account']) === relationship.id,
     ));
 
+const filterTimelines = (state, relationship, statuses) => {
+  return state.withMutations(state => {
+    statuses.forEach(status => {
+      if (status.get('account') !== relationship.id) return;
+      const references = buildReferencesTo(statuses, status);
+      deleteStatus(state, status.get('id'), status.get('account'), references, relationship.id);
+    });
+  });
+};
+
 const removeStatusFromGroup = (state, groupId, statusId) => {
-  return state.updateIn([`group:${groupId}`, 'items'], list => list.filterNot(item => item === statusId));
+  return state.updateIn([`group:${groupId}`, 'items'], ImmutableOrderedSet(), ids => ids.delete(statusId));
+};
+
+const timelineDequeue = (state, timelineId) => {
+  const top = state.getIn([timelineId, 'top']);
+
+  return state.update(timelineId, initialTimeline, timeline => timeline.withMutations(timeline => {
+    const queuedIds = timeline.get('queuedItems');
+
+    timeline.update('items', ids => {
+      const newIds = mergeStatusIds(ids, queuedIds);
+      return top ? truncateIds(newIds) : newIds;
+    });
+
+    timeline.set('queuedItems', ImmutableOrderedSet());
+    timeline.set('totalQueuedItemsCount', 0);
+  }));
+};
+
+const timelineConnect = (state, timelineId) => {
+  return state.update(timelineId, initialTimeline, timeline => timeline.set('online', true));
+};
+
+const timelineDisconnect = (state, timelineId) => {
+  return state.update(timelineId, initialTimeline, timeline => timeline.withMutations(timeline => {
+    timeline.set('online', false);
+
+    const items = timeline.get('items', ImmutableOrderedSet());
+    if (items.isEmpty()) return;
+
+    timeline.set('items', addStatusId(items, null));
+  }));
 };
 
 export default function timelines(state = initialState, action) {
   switch(action.type) {
   case TIMELINE_EXPAND_REQUEST:
-    return state.update(action.timeline, initialTimeline, map => map.set('isLoading', true));
+    return setLoading(state, action.timeline, true);
   case TIMELINE_EXPAND_FAIL:
-    return state.update(action.timeline, initialTimeline, map => map.set('isLoading', false));
+    return setLoading(state, action.timeline, false);
   case TIMELINE_EXPAND_SUCCESS:
     return expandNormalizedTimeline(state, action.timeline, fromJS(action.statuses), action.next, action.partial, action.isLoadingRecent);
   case TIMELINE_UPDATE:
@@ -169,10 +232,7 @@ export default function timelines(state = initialState, action) {
   case TIMELINE_UPDATE_QUEUE:
     return updateTimelineQueue(state, action.timeline, action.statusId);
   case TIMELINE_DEQUEUE:
-    return state.update(action.timeline, initialTimeline, map => map.withMutations(mMap => {
-      mMap.set('queuedItems', ImmutableList());
-      mMap.set('totalQueuedItemsCount', 0);
-    }));
+    return timelineDequeue(state, action.timeline);
   case TIMELINE_DELETE:
     return deleteStatus(state, action.id, action.accountId, action.references, action.reblogOf);
   case TIMELINE_CLEAR:
@@ -181,17 +241,13 @@ export default function timelines(state = initialState, action) {
   case ACCOUNT_MUTE_SUCCESS:
     return filterTimelines(state, action.relationship, action.statuses);
   case ACCOUNT_UNFOLLOW_SUCCESS:
-    return filterTimeline('home', state, action.relationship, action.statuses);
-  case TIMELINE_CONNECT:
-    return state.update(action.timeline, initialTimeline, map => map.set('online', true));
+    return filterTimeline(state, 'home', action.relationship, action.statuses);
   case TIMELINE_SCROLL_TOP:
     return updateTop(state, action.timeline, action.top);
+  case TIMELINE_CONNECT:
+    return timelineConnect(state, action.timeline);
   case TIMELINE_DISCONNECT:
-    return state.update(
-      action.timeline,
-      initialTimeline,
-      map => map.set('online', false).update('items', items => items.first() ? items.unshift(null) : items),
-    );
+    return timelineDisconnect(state, action.timeline);
   case GROUP_REMOVE_STATUS_SUCCESS:
     return removeStatusFromGroup(state, action.groupId, action.id);
   default: