pl-fe: landing: fall back to about page when failed to load timeline

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

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

@@ -158,7 +158,7 @@ const deduplicateStatuses = (statuses: Array<BaseStatus>) => {
   return deduplicatedStatuses;
 };
 
-const handleTimelineExpand = (timelineId: string, fn: Promise<PaginatedResponse<BaseStatus>>, isLoadingRecent: boolean, done = noOp) =>
+const handleTimelineExpand = (timelineId: string, fn: Promise<PaginatedResponse<BaseStatus>>, isLoadingRecent: boolean, done = noOp, onError?: (error: any) => void) =>
   (dispatch: AppDispatch) => {
     dispatch(expandTimelineRequest(timelineId));
 
@@ -180,6 +180,7 @@ const handleTimelineExpand = (timelineId: string, fn: Promise<PaginatedResponse<
     }).catch(error => {
       dispatch(expandTimelineFail(timelineId, error));
       done();
+      onError?.(error);
     });
   };
 
@@ -197,7 +198,7 @@ const fetchHomeTimeline = (expand = false, done = noOp) =>
     return dispatch(handleTimelineExpand('home', fn, false, done));
   };
 
-const fetchPublicTimeline = ({ onlyMedia, local, instance }: Record<string, any> = {}, expand = false, done = noOp) =>
+const fetchPublicTimeline = ({ onlyMedia, local, instance }: Record<string, any> = {}, expand = false, done = noOp, onError = noOp) =>
   async (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
     const timelineId = `${instance ? 'remote' : 'public'}${local ? ':local' : ''}${onlyMedia ? ':media' : ''}${instance ? `:${instance}` : ''}`;
@@ -209,7 +210,7 @@ const fetchPublicTimeline = ({ onlyMedia, local, instance }: Record<string, any>
 
     const fn = (expand && state.timelines[timelineId]?.next?.()) || getClient(state).timelines.publicTimeline(params);
 
-    return dispatch(handleTimelineExpand(timelineId, fn, false, done));
+    return dispatch(handleTimelineExpand(timelineId, fn, false, done, onError));
   };
 
 const fetchBubbleTimeline = ({ onlyMedia }: Record<string, any> = {}, expand = false, done = noOp) =>

packages/pl-fe/src/pages/timelines/landing-timeline.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchPublicTimeline } from 'pl-fe/actions/timelines';
@@ -58,6 +58,8 @@ const LandingTimelinePage = () => {
   const theme = useTheme();
   const isMobile = useIsMobile();
 
+  const [timelineFailed, setTimelineFailed] = useState(false);
+
   const timelineEnabled = !instance.pleroma.metadata.restrict_unauthenticated.timelines.local;
 
   const timelineId = 'public:local';
@@ -72,7 +74,9 @@ const LandingTimelinePage = () => {
 
   useEffect(() => {
     if (timelineEnabled) {
-      dispatch(fetchPublicTimeline({ local: true }));
+      dispatch(fetchPublicTimeline({ local: true }, false, undefined, () => {
+        setTimelineFailed(true);
+      }));
     }
   }, []);
 
@@ -82,7 +86,7 @@ const LandingTimelinePage = () => {
         <SiteBanner />
       </div>
 
-      {timelineEnabled ? (
+      {timelineEnabled && !timelineFailed ? (
         <PullToRefresh onRefresh={handleRefresh}>
           <Timeline
             className='black:p-0 black:sm:p-4 black:sm:pt-0'