Merge branch 'timeline-fix' into 'develop'

Refetch timeline if user stops following someone

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

app/soapbox/actions/timelines.ts

@@ -28,6 +28,7 @@ const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
 
 const TIMELINE_REPLACE = 'TIMELINE_REPLACE';
 const TIMELINE_INSERT = 'TIMELINE_INSERT';
+const TIMELINE_CLEAR_FEED_ACCOUNT_ID = 'TIMELINE_CLEAR_FEED_ACCOUNT_ID';
 
 const MAX_QUEUED_ITEMS = 40;
 
@@ -270,6 +271,10 @@ const insertSuggestionsIntoTimeline = () => (dispatch: AppDispatch, getState: ()
   dispatch({ type: TIMELINE_INSERT, timeline: 'home' });
 };
 
+const clearFeedAccountId = () => (dispatch: AppDispatch, _getState: () => RootState) => {
+  dispatch({ type: TIMELINE_CLEAR_FEED_ACCOUNT_ID });
+};
+
 export {
   TIMELINE_UPDATE,
   TIMELINE_DELETE,
@@ -283,6 +288,7 @@ export {
   TIMELINE_CONNECT,
   TIMELINE_DISCONNECT,
   TIMELINE_REPLACE,
+  TIMELINE_CLEAR_FEED_ACCOUNT_ID,
   TIMELINE_INSERT,
   MAX_QUEUED_ITEMS,
   processTimelineUpdate,
@@ -311,4 +317,5 @@ export {
   disconnectTimeline,
   scrollTopTimeline,
   insertSuggestionsIntoTimeline,
+  clearFeedAccountId,
 };

app/soapbox/features/home_timeline/index.tsx

@@ -2,12 +2,16 @@ import React, { useEffect, useRef } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
+import { fetchRelationships } from 'soapbox/actions/accounts';
+import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions';
 import { expandHomeTimeline } from 'soapbox/actions/timelines';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column, Stack, Text } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
 import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
 
+import { clearFeedAccountId } from '../../actions/timelines';
+
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
 });
@@ -20,8 +24,9 @@ const HomeTimeline: React.FC = () => {
   const polling = useRef<NodeJS.Timer | null>(null);
 
   const isPartial = useAppSelector(state => state.timelines.get('home')?.isPartial === true);
-  const currentAccountId = useAppSelector(state => state.timelines.get('home')?.feedAccountId);
+  const currentAccountId = useAppSelector(state => state.timelines.get('home')?.feedAccountId as string | undefined);
   const siteTitle = useAppSelector(state => state.instance.title);
+  const currentAccountRelationship = useAppSelector(state => currentAccountId ? state.relationships.get(currentAccountId) : null);
 
   const handleLoadMore = (maxId: string) => {
     dispatch(expandHomeTimeline({ maxId, accountId: currentAccountId }));
@@ -58,6 +63,25 @@ const HomeTimeline: React.FC = () => {
     };
   }, [isPartial]);
 
+  useEffect(() => {
+    // Check to see if we still follow the user that is selected in the Feed Carousel.
+    if (currentAccountId) {
+      dispatch(fetchRelationships([currentAccountId]));
+    }
+  }, []);
+
+  useEffect(() => {
+    // If we unfollowed the currently selected user from the Feed Carousel,
+    // let's clear the feed filter and refetch fresh timeline data.
+    if (currentAccountRelationship && !currentAccountRelationship?.following) {
+      dispatch(clearFeedAccountId());
+
+      dispatch(expandHomeTimeline({}, () => {
+        dispatch(fetchSuggestionsForTimeline());
+      }));
+    }
+  }, [currentAccountId]);
+
   return (
     <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <PullToRefresh onRefresh={handleRefresh}>

app/soapbox/reducers/timelines.ts

@@ -32,6 +32,7 @@ import {
   TIMELINE_SCROLL_TOP,
   TIMELINE_REPLACE,
   TIMELINE_INSERT,
+  TIMELINE_CLEAR_FEED_ACCOUNT_ID,
 } from '../actions/timelines';
 
 import type { AnyAction } from 'redux';
@@ -358,12 +359,20 @@ export default function timelines(state: State = initialState, action: AnyAction
     case TIMELINE_INSERT:
       return state.update(action.timeline, TimelineRecord(), timeline => timeline.withMutations(timeline => {
         timeline.update('items', oldIds => {
-          const oldIdsArray = oldIds.toArray();
+
+          let oldIdsArray = oldIds.toArray();
+          const existingSuggestionId = oldIdsArray.find(key => key.includes('末suggestions'));
+
+          if (existingSuggestionId) {
+            oldIdsArray = oldIdsArray.slice(1);
+          }
           const positionInTimeline = sample([5, 6, 7, 8, 9]) as number;
           oldIdsArray.splice(positionInTimeline, 0, `末suggestions-${oldIds.last()}`);
           return ImmutableOrderedSet(oldIdsArray);
         });
       }));
+    case TIMELINE_CLEAR_FEED_ACCOUNT_ID:
+      return state.update('home', TimelineRecord(), timeline => timeline.set('feedAccountId', null));
     default:
       return state;
   }