Code Review Fixes

src/components/ChannelGallery.tsx

@@ -9,19 +9,15 @@ type ChannelGalleryProps = {
   title?: string
   channels?: ChannelFields[]
   loading?: boolean
-  error?: Error
 }
 
 const PLACEHOLDERS_COUNT = 12
 
 const trackPadding = `${spacing.xs} 0 0 ${spacing.xs}`
 
-const ChannelGallery: React.FC<ChannelGalleryProps> = ({ title, channels, loading, error }) => {
+const ChannelGallery: React.FC<ChannelGalleryProps> = ({ title, channels, loading }) => {
   const displayPlaceholders = loading || !channels
 
-  if (error) {
-    throw error
-  }
   return (
     <Gallery title={title} trackPadding={trackPadding} itemWidth={210}>
       {displayPlaceholders

src/components/ErrorFallback.tsx

@@ -1,28 +1,48 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import { FallbackProps } from 'react-error-boundary'
-import { Button } from '@/shared/components'
-import { sizes, colors } from '@/shared/theme'
+
+import { ReactComponent as ErrorIllustration } from '@/assets/error.svg'
+import { Button, Typography } from '@/shared/components'
+import { sizes } from '@/shared/theme'
 
 const Container = styled.div`
-  padding: ${sizes.b4};
-  color: ${colors.gray[400]};
+  margin: ${sizes.b10 * 2}px auto 0;
   display: grid;
   place-items: center;
+
+  > svg {
+    max-width: 650px;
+  }
+`
+
+const Message = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin-top: 90px;
+  margin-bottom: ${sizes.b10}px;
+
+  > p {
+    margin: 0;
+    line-height: 1.75;
+  }
 `
 
-const StyledButton = styled(Button)`
-  color: ${colors.white};
+const Title = styled(Typography)`
+  line-height: 1.25;
 `
 
 const ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
+  console.error(error)
   return (
     <Container>
-      <p>Something went wrong:</p>
-      <pre>{error?.message}</pre>
-      <StyledButton variant="tertiary" onClick={resetErrorBoundary}>
-        Try again
-      </StyledButton>
+      <ErrorIllustration />
+      <Message>
+        <Title variant="h3">Ops! An Error occurred</Title>
+        <p>We could not aquire expected results. Please try reloading or return to the home page.</p>
+      </Message>
+      <Button onClick={resetErrorBoundary}>Return to home page</Button>
     </Container>
   )
 }

src/components/GalleryErrorFallback.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import styled from '@emotion/styled'
+
+import { Button } from '@/shared/components'
+import { sizes, colors } from '@/shared/theme'
+
+const Container = styled.div`
+  padding: ${sizes.b4};
+  color: ${colors.gray[400]};
+  display: grid;
+  place-items: center;
+`
+
+const StyledButton = styled(Button)`
+  color: ${colors.white};
+`
+type GalleryFallbackProps = {
+  error: any
+  reset: () => void
+}
+const GalleryErrorFallback: React.FC<GalleryFallbackProps> = ({ error, reset }) => {
+  console.error(error)
+  return (
+    <Container>
+      <p>Something went wrong...</p>
+      <StyledButton variant="tertiary" onClick={reset}>
+        Try again
+      </StyledButton>
+    </Container>
+  )
+}
+
+export default GalleryErrorFallback

src/components/VideoGallery.tsx

@@ -14,7 +14,6 @@ type VideoGalleryProps = {
   title?: string
   videos?: VideoFields[]
   loading?: boolean
-  error?: Error
 }
 
 const PLACEHOLDERS_COUNT = 12

src/components/index.ts

@@ -9,3 +9,4 @@ export { default as VideoPreview } from './VideoPreviewWithNavigation'
 export { default as ChannelPreview } from './ChannelPreviewWithNavigation'
 export { default as ChannelGrid } from './ChannelGrid'
 export { default as ErrorFallback } from './ErrorFallback'
+export { default as GalleryErrorFallback } from './GalleryErrorFallback'

src/views/HomeView.tsx

@@ -23,6 +23,7 @@ const HomeView: React.FC<RouteComponentProps> = () => {
     refetch: refetchNewestVideos,
   } = useQuery<GetNewestVideos, GetNewestVideosVariables>(GET_NEWEST_VIDEOS, {
     variables: { first: NEWEST_VIDEOS_COUNT },
+    notifyOnNetworkStatusChange: true,
   })
   const {
     loading: featuredVideosLoading,
@@ -37,51 +38,41 @@ const HomeView: React.FC<RouteComponentProps> = () => {
     refetch: refetchNewestChannels,
   } = useQuery<GetNewestChannels, GetNewestChannelsVariables>(GET_NEWEST_CHANNELS, {
     variables: { first: NEWEST_CHANNELS_COUNT },
+    notifyOnNetworkStatusChange: true,
   })
 
   const newestVideos = videosData?.videosConnection.edges.slice(0, NEWEST_VIDEOS_COUNT).map((e) => e.node)
   const newestChannels = newestChannelsData?.channelsConnection.edges.map((e) => e.node)
+  const hasNewestVideosError = newestVideosError && !newestVideosLoading
+  const hasFeaturedVideosError = featuredVideosError && !featuredVideosLoading
+  const hasNewestChannelsError = newestChannelsError && !newestChannelsLoading
 
   return (
     <>
       <FeaturedVideoHeader />
       <Container>
-        <ErrorBoundary
-          FallbackComponent={ErrorFallback}
-          resetKeys={[newestVideos, newestVideosLoading]}
-          onReset={() => refetchNewestVideos()}
-        >
-          <VideoGallery
-            title="Newest videos"
-            loading={newestVideosLoading}
-            videos={newestVideos}
-            error={newestVideosError}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary
-          FallbackComponent={ErrorFallback}
-          resetKeys={[featuredVideosLoading, featuredVideosData]}
-          onReset={() => refetchFeaturedVideos()}
-        >
+        {!hasNewestVideosError ? (
+          <VideoGallery title="Newest videos" loading={newestVideosLoading} videos={newestVideos} />
+        ) : (
+          <GalleryErrorFallback error={newestVideosError} reset={() => refetchNewestVideos()} />
+        )}
+
+        {!hasFeaturedVideosError ? (
           <VideoGallery
             title="Featured videos"
             loading={featuredVideosLoading}
             videos={featuredVideosData?.featured_videos}
-            error={featuredVideosError}
           />
-        </ErrorBoundary>
-        <ErrorBoundary
-          FallbackComponent={ErrorFallback}
-          resetKeys={[newestChannelsLoading, newestChannels]}
-          onReset={() => refetchNewestChannels()}
-        >
-          <ChannelGallery
-            title="Newest channels"
-            loading={newestChannelsLoading}
-            channels={newestChannels}
-            error={newestChannelsError}
-          />
-        </ErrorBoundary>
+        ) : (
+          <GalleryErrorFallback error={featuredVideosError} reset={() => refetchFeaturedVideos()} />
+        )}
+
+        {!hasNewestChannelsError ? (
+          <ChannelGallery title="Newest channels" loading={newestChannelsLoading} channels={newestChannels} />
+        ) : (
+          <GalleryErrorFallback error={newestChannelsError} reset={() => refetchNewestChannels()} />
+        )}
+
         <StyledInfiniteVideoGrid title="More videos" skipCount={NEWEST_VIDEOS_COUNT} />
       </Container>
     </>

src/views/SearchView/SearchView.tsx

@@ -35,7 +35,7 @@ const SearchView: React.FC<SearchViewProps> = ({ search = '' }) => {
     throw error
   }
   if (!loading && !data?.search) {
-    return <p>Something went wrong...</p>
+    throw new Error(`There was a problem with your search...`)
   }
   if (loading || !data) {
     return <p>Loading...</p>