Handle error state for carousels

app/soapbox/features/feed-filtering/feed-carousel.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { fetchCarouselAvatars } from 'soapbox/actions/carousels';
 import { replaceHomeTimeline } from 'soapbox/actions/timelines';
@@ -57,6 +58,7 @@ const FeedCarousel = () => {
 
   const avatars = useAppSelector((state) => state.carousels.avatars);
   const isLoading = useAppSelector((state) => state.carousels.isLoading);
+  const hasError = useAppSelector((state) => state.carousels.error);
   const numberOfPages = Math.floor(avatars.length / pageSize);
 
   const hasNextPage = currentPage < numberOfPages && numberOfPages > 1;
@@ -81,6 +83,16 @@ const FeedCarousel = () => {
     return null;
   }
 
+  if (hasError) {
+    return (
+      <Card variant='rounded' size='lg'>
+        <Text align='center'>
+          <FormattedMessage id='common.error' defaultMessage="Something isn't right. Try reloading the page." />
+        </Text>
+      </Card>
+    );
+  }
+
   return (
     <Card variant='rounded' size='lg' ref={cardRef} className='relative'>
       <div>

app/soapbox/locales/en.json

@@ -258,6 +258,7 @@
   "column_forbidden.title": "Forbidden",
   "column_header.show_settings": "Show settings",
   "common.cancel": "Cancel",
+  "common.error": "Something isn't right. Try reloading the page.",
   "community.column_settings.media_only": "Media Only",
   "community.column_settings.title": "Local timeline settings",
   "compose.character_counter.title": "Used {chars} out of {maxChars} characters",

app/soapbox/reducers/__tests__/carousels.test.ts

@@ -32,6 +32,7 @@ describe('carousels reducer', () => {
 
       expect(result.isLoading).toEqual(false);
       expect(result.avatars).toEqual([45]);
+      expect(result.error).toEqual(false);
     });
   });
 
@@ -39,7 +40,10 @@ describe('carousels reducer', () => {
     it('sets "isLoading" to "true"', () => {
       const initialState = { isLoading: true, avatars: [] };
       const action = { type: CAROUSEL_AVATAR_FAIL };
-      expect(reducer(initialState, action).isLoading).toEqual(false);
+      const result = reducer(initialState, action);
+
+      expect(result.isLoading).toEqual(false);
+      expect(result.error).toEqual(true);
     });
   });
 });

app/soapbox/reducers/carousels.ts

@@ -13,13 +13,15 @@ type Avatar = {
 }
 
 type CarouselsState = {
-  avatars: Avatar[],
+  avatars: Avatar[]
   isLoading: boolean
+  error: boolean
 }
 
 const initialState: CarouselsState = {
   avatars: [],
   isLoading: false,
+  error: false,
 };
 
 export default function rules(state: CarouselsState = initialState, action: AnyAction): CarouselsState {
@@ -29,7 +31,7 @@ export default function rules(state: CarouselsState = initialState, action: AnyA
     case CAROUSEL_AVATAR_SUCCESS:
       return { ...state, isLoading: false, avatars: action.payload };
     case CAROUSEL_AVATAR_FAIL:
-      return { ...state, isLoading: false };
+      return { ...state, isLoading: false, error: true };
     default:
       return state;
   }