Do not display account suggestion dismiss button if not supported

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/actions/suggestions.ts

@@ -1,5 +1,3 @@
-import { isLoggedIn } from 'pl-fe/utils/auth';
-
 import { getClient } from '../api';
 
 import { fetchRelationships } from './accounts';
@@ -12,8 +10,6 @@ const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST' as const;
 const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS' as const;
 const SUGGESTIONS_FETCH_FAIL = 'SUGGESTIONS_FETCH_FAIL' as const;
 
-const SUGGESTIONS_DISMISS = 'SUGGESTIONS_DISMISS' as const;
-
 const fetchSuggestions = (limit = 50) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
@@ -47,24 +43,10 @@ const fetchSuggestionsForTimeline = () => (dispatch: AppDispatch) => {
   dispatch(fetchSuggestions(20))?.then(() => dispatch(insertSuggestionsIntoTimeline()));
 };
 
-const dismissSuggestion = (accountId: string) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    if (!isLoggedIn(getState)) return;
-
-    dispatch({
-      type: SUGGESTIONS_DISMISS,
-      accountId,
-    });
-
-    return getClient(getState).myAccount.dismissSuggestions(accountId);
-  };
-
 export {
   SUGGESTIONS_FETCH_REQUEST,
   SUGGESTIONS_FETCH_SUCCESS,
   SUGGESTIONS_FETCH_FAIL,
-  SUGGESTIONS_DISMISS,
   fetchSuggestions,
   fetchSuggestionsForTimeline,
-  dismissSuggestion,
 };

packages/pl-fe/src/features/follow-recommendations/index.tsx

@@ -1,28 +1,21 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchSuggestions } from 'pl-fe/actions/suggestions';
 import ScrollableList from 'pl-fe/components/scrollable-list';
 import { Column, Stack, Text } from 'pl-fe/components/ui';
 import AccountContainer from 'pl-fe/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
+import { useSuggestions } from 'pl-fe/queries/suggestions';
 
 const messages = defineMessages({
   heading: { id: 'follow_recommendations.heading', defaultMessage: 'Suggested profiles' },
 });
 
 const FollowRecommendations: React.FC = () => {
-  const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const suggestions = useAppSelector((state) => state.suggestions.items);
-  const isLoading = useAppSelector((state) => state.suggestions.isLoading);
+  const { data: suggestions, isFetching } = useSuggestions();
 
-  useEffect(() => {
-    dispatch(fetchSuggestions(20));
-  }, []);
-
-  if (suggestions.size === 0 && !isLoading) {
+  if (suggestions.length === 0 && !isFetching) {
     return (
       <Column label={intl.formatMessage(messages.heading)}>
         <Text align='center'>
@@ -36,7 +29,7 @@ const FollowRecommendations: React.FC = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <Stack space={4}>
         <ScrollableList
-          isLoading={isLoading}
+          isLoading={isFetching}
           scrollKey='suggestions'
           itemClassName='pb-4'
         >

packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { Text, Widget } from 'pl-fe/components/ui';
 import AccountContainer from 'pl-fe/containers/account-container';
 import PlaceholderSidebarSuggestions from 'pl-fe/features/placeholder/components/placeholder-sidebar-suggestions';
+import { useFeatures } from 'pl-fe/hooks';
 import { useDismissSuggestion, useSuggestions } from 'pl-fe/queries/suggestions';
 
 import type { Account as AccountEntity } from 'pl-fe/normalizers';
@@ -18,6 +19,7 @@ interface IWhoToFollowPanel {
 }
 
 const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
+  const features = useFeatures();
   const intl = useIntl();
 
   const { data: suggestions, isFetching } = useSuggestions();
@@ -54,7 +56,7 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
             id={suggestion.account}
             actionIcon={require('@tabler/icons/outline/x.svg')}
             actionTitle={intl.formatMessage(messages.dismissSuggestion)}
-            onActionClick={handleDismiss}
+            onActionClick={features.suggestionsDismiss ? handleDismiss : undefined}
           />
         ))
       )}

packages/pl-fe/src/queries/suggestions.ts

@@ -22,7 +22,7 @@ const useSuggestions = () => {
     dispatch(importFetchedAccounts(accounts));
     dispatch(fetchRelationships(accountIds));
 
-    return response.map(x => ({ ...x, account: x.account.id }));
+    return response.map(({ account, ...x }) => ({ ...x, account_id: account.id }));
   };
 
   const result = useQuery({

packages/pl-fe/src/reducers/suggestions.test.ts

@@ -1,5 +1,3 @@
-import { SUGGESTIONS_FETCH_SUCCESS, SUGGESTIONS_DISMISS } from 'pl-fe/actions/suggestions';
-
 import reducer from './suggestions';
 
 describe('suggestions reducer', () => {
@@ -10,32 +8,4 @@ describe('suggestions reducer', () => {
       isLoading: false,
     });
   });
-
-  describe('SUGGESTIONS_DISMISS', () => {
-    it('should remove the account', () => {
-      let state = reducer(undefined, {} as any);
-
-      state = reducer(state, {
-        type: SUGGESTIONS_FETCH_SUCCESS,
-        accounts: [
-          { id: '123' },
-          { id: '456' },
-          { id: '789' },
-        ],
-      });
-
-      const action = { type: SUGGESTIONS_DISMISS, id: '123' };
-
-      const expected = {
-        items: [
-          { account: '456', source: 'past_interactions' },
-          { account: '789', source: 'past_interactions' },
-        ],
-        isLoading: false,
-        next: null,
-      };
-
-      expect(reducer(state, action).toJS()).toEqual(expected);
-    });
-  });
 });

packages/pl-fe/src/reducers/suggestions.ts

@@ -6,7 +6,6 @@ import {
   SUGGESTIONS_FETCH_REQUEST,
   SUGGESTIONS_FETCH_SUCCESS,
   SUGGESTIONS_FETCH_FAIL,
-  SUGGESTIONS_DISMISS,
 } from 'pl-fe/actions/suggestions';
 
 import type { Suggestion as SuggestionEntity } from 'pl-api';
@@ -46,8 +45,6 @@ const suggestionsReducer = (state: State = ReducerRecord(), action: AnyAction) =
       return importSuggestions(state, action.suggestions);
     case SUGGESTIONS_FETCH_FAIL:
       return state.set('isLoading', false);
-    case SUGGESTIONS_DISMISS:
-      return dismissAccount(state, action.accountId);
     case ACCOUNT_BLOCK_SUCCESS:
     case ACCOUNT_MUTE_SUCCESS:
       return dismissAccount(state, action.relationship.id);