feat(discover): handle errors gracefully when content is available (#1542)

Co-authored-by: Dhaval <dhaval.javia@broadlume.com>
Co-authored-by: gauthier-th <mail@gauthierth.fr>

src/hooks/useDiscover.ts

@@ -1,4 +1,8 @@
+import globalMessages from '@app/i18n/globalMessages';
 import { MediaStatus } from '@server/constants/media';
+import { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
 import useSWRInfinite from 'swr/infinite';
 import useSettings from './useSettings';
 import { Permission, useUser } from './useUser';
@@ -58,6 +62,8 @@ const useDiscover = <
 ): DiscoverResult<T, S> => {
   const settings = useSettings();
   const { hasPermission } = useUser();
+  const { addToast } = useToasts();
+  const intl = useIntl();
   const { data, error, size, setSize, isValidating, mutate } = useSWRInfinite<
     BaseSearchResult<T> & S
   >(
@@ -143,13 +149,23 @@ const useDiscover = <
     (!!data && (data[data?.length - 1]?.totalResults ?? 0) <= size * 20) ||
     (!!data && (data[data?.length - 1]?.totalResults ?? 0) < 41);
 
+  useEffect(() => {
+    if (error && titles.length) {
+      addToast(intl.formatMessage(globalMessages.error), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+      console.error('Error while fetching discover titles:', error);
+    }
+  }, [data, error, addToast, intl, titles.length]);
+
   return {
     isLoadingInitialData,
     isLoadingMore,
     fetchMore,
     isEmpty,
     isReachingEnd,
-    error,
+    error: error && titles.length ? null : error,
     titles,
     firstResultData: data?.[0],
     mutate,

src/i18n/globalMessages.ts

@@ -51,6 +51,7 @@ const globalMessages = defineMessages('i18n', {
   settings: 'Settings',
   usersettings: 'User Settings',
   delimitedlist: '{a}, {b}',
+  error: 'Something went wrong. Please try again.',
   showingresults:
     'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
   resultsperpage: 'Display {pageSize} results per page',

src/i18n/locale/en.json

@@ -1581,6 +1581,7 @@
   "i18n.deleting": "Deleting…",
   "i18n.delimitedlist": "{a}, {b}",
   "i18n.edit": "Edit",
+  "i18n.error": "Something went wrong. Please try again.",
   "i18n.experimental": "Experimental",
   "i18n.failed": "Failed",
   "i18n.import": "Import",