Display suggestions when logged out

src/actions/suggestions.ts

@@ -56,12 +56,9 @@ const fetchSuggestionsV2 = (params: Record<string, any> = {}) =>
 const fetchSuggestions = (params: Record<string, any> = { limit: 50 }) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
-    const me = state.me;
     const instance = state.instance;
     const features = getFeatures(instance);
 
-    if (!me) return null;
-
     if (features.suggestionsV2) {
       return dispatch(fetchSuggestionsV2(params))
         .then((suggestions: APIEntity[]) => {

src/features/ui/components/who-to-follow-panel.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { Text, Widget } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 import PlaceholderSidebarSuggestions from 'soapbox/features/placeholder/components/placeholder-sidebar-suggestions';
+import { useOwnAccount } from 'soapbox/hooks';
 import { useDismissSuggestion, useSuggestions } from 'soapbox/queries/suggestions';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
@@ -20,6 +21,7 @@ interface IWhoToFollowPanel {
 const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
   const intl = useIntl();
 
+  const { account } = useOwnAccount();
   const { data: suggestions, isFetching } = useSuggestions();
   const dismissSuggestion = useDismissSuggestion();
 
@@ -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={account ? handleDismiss : undefined}
           />
         ))
       )}

src/pages/default-page.tsx

@@ -36,7 +36,7 @@ const DefaultPage: React.FC<IDefaultPage> = ({ children }) => {
         {features.trends && (
           <TrendsPanel limit={5} />
         )}
-        {me && features.suggestions && (
+        {features.suggestions && (
           <WhoToFollowPanel limit={3} />
         )}
         <LinkFooter key='link-footer' />

src/pages/home-page.tsx

@@ -108,7 +108,7 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
         {features.trends && (
           <TrendsPanel limit={5} />
         )}
-        {me && features.suggestions && (
+        {features.suggestions && (
           <WhoToFollowPanel limit={3} />
         )}
         <PromoPanel />

src/pages/landing-page.tsx

@@ -5,6 +5,7 @@ import {
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
+  WhoToFollowPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
 
@@ -35,6 +36,9 @@ const LandingPage: React.FC<ILandingPage> = ({ children }) => {
         {features.trends && (
           <TrendsPanel limit={5} />
         )}
+        {features.suggestions && (
+          <WhoToFollowPanel limit={3} />
+        )}
         <LinkFooter />
       </Layout.Aside>
     </>

src/pages/search-page.tsx

@@ -39,7 +39,7 @@ const SearchPage: React.FC<ISearchPage> = ({ children }) => {
           <TrendsPanel limit={5} />
         )}
 
-        {me && features.suggestions && (
+        {features.suggestions && (
           <WhoToFollowPanel limit={3} />
         )}
 

src/pages/status-page.tsx

@@ -36,7 +36,7 @@ const StatusPage: React.FC<IStatusPage> = ({ children }) => {
         {features.trends && (
           <TrendsPanel limit={5} />
         )}
-        {me && features.suggestions && (
+        {features.suggestions && (
           <WhoToFollowPanel limit={3} />
         )}
         <LinkFooter />