[Glitch] Change home timeline to reload after follow recommendations in web UI

Port 0ad240cb6b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/actions/timelines.js

@@ -20,6 +20,8 @@ export const TIMELINE_LOAD_PENDING = 'TIMELINE_LOAD_PENDING';
 export const TIMELINE_DISCONNECT   = 'TIMELINE_DISCONNECT';
 export const TIMELINE_CONNECT      = 'TIMELINE_CONNECT';
 
+export const TIMELINE_MARK_AS_PARTIAL = 'TIMELINE_MARK_AS_PARTIAL';
+
 export const loadPending = timeline => ({
   type: TIMELINE_LOAD_PENDING,
   timeline,
@@ -31,6 +33,13 @@ export function updateTimeline(timeline, status, accept) {
       return;
     }
 
+    if (getState().getIn(['timelines', timeline, 'isPartial'])) {
+      // Prevent new items from being added to a partial timeline,
+      // since it will be reloaded anyway
+
+      return;
+    }
+
     const filters   = getFiltersRegex(getState(), { contextType: timeline });
     const dropRegex = filters[0];
     const regex     = filters[1];
@@ -198,3 +207,8 @@ export const disconnectTimeline = timeline => ({
   timeline,
   usePendingItems: preferPendingItems,
 });
+
+export const markAsPartial = timeline => ({
+  type: TIMELINE_MARK_AS_PARTIAL,
+  timeline,
+});

app/javascript/flavours/glitch/features/follow_recommendations/index.js

@@ -7,6 +7,7 @@ import { FormattedMessage } from 'react-intl';
 import { fetchSuggestions } from 'flavours/glitch/actions/suggestions';
 import { changeSetting, saveSettings } from 'flavours/glitch/actions/settings';
 import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
+import { markAsPartial } from 'flavours/glitch/actions/timelines';
 import Column from 'flavours/glitch/features/ui/components/column';
 import Account from './components/account';
 import Logo from 'flavours/glitch/components/logo';
@@ -42,6 +43,15 @@ class FollowRecommendations extends ImmutablePureComponent {
     }
   }
 
+  componentWillUnmount () {
+    const { dispatch } = this.props;
+
+    // Force the home timeline to be reloaded when the user navigates
+    // to it; if the user is new, it would've been empty before
+
+    dispatch(markAsPartial('home'));
+  }
+
   handleDone = () => {
     const { dispatch } = this.props;
     const { router } = this.context;

app/javascript/flavours/glitch/features/home_timeline/index.js

@@ -72,7 +72,7 @@ class HomeTimeline extends React.PureComponent {
   }
 
   componentDidMount () {
-    this.props.dispatch(fetchAnnouncements());
+    setTimeout(() => this.props.dispatch(fetchAnnouncements()), 700);
     this._checkIfReloadNeeded(false, this.props.isPartial);
   }
 
@@ -152,7 +152,7 @@ class HomeTimeline extends React.PureComponent {
           scrollKey={`home_timeline-${columnId}`}
           onLoadMore={this.handleLoadMore}
           timelineId='home'
-          emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} or use search to get started and meet other users.' values={{ public: <Link to='/timelines/public'><FormattedMessage id='empty_column.home.public_timeline' defaultMessage='the public timeline' /></Link> }} />}
+          emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Follow more people to fill it up. {suggestions}' values={{ suggestions: <Link to='/start'><FormattedMessage id='empty_column.home.suggestions' defaultMessage='See some suggestions' /></Link> }} />}
           bindToDocument={!multiColumn}
         />
       </Column>

app/javascript/flavours/glitch/features/notifications/index.js

@@ -224,7 +224,7 @@ class Notifications extends React.PureComponent {
     const { notifCleaning, notifCleaningActive } = this.props;
     const { animatingNCD } = this.state;
     const pinned = !!columnId;
-    const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
+    const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. When other people interact with you, you will see it here." />;
 
     let scrollableContent = null;
 

app/javascript/flavours/glitch/reducers/timelines.js

@@ -9,6 +9,7 @@ import {
   TIMELINE_CONNECT,
   TIMELINE_DISCONNECT,
   TIMELINE_LOAD_PENDING,
+  TIMELINE_MARK_AS_PARTIAL,
 } from 'flavours/glitch/actions/timelines';
 import {
   ACCOUNT_BLOCK_SUCCESS,
@@ -173,6 +174,12 @@ export default function timelines(state = initialState, action) {
       initialTimeline,
       map => map.set('online', false).update(action.usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items),
     );
+  case TIMELINE_MARK_AS_PARTIAL:
+    return state.update(
+      action.timeline,
+      initialTimeline,
+      map => map.set('isPartial', true).set('items', ImmutableList()).set('pendingItems', ImmutableList()).set('unread', 0),
+    );
   default:
     return state;
   }