Code Review Fixes

src/components/ErrorFallback.tsx

@@ -1,48 +1,30 @@
 import React from 'react'
+
 import styled from '@emotion/styled'
 import { FallbackProps } from 'react-error-boundary'
 
-import { ReactComponent as ErrorIllustration } from '@/assets/error.svg'
-import { Button, Typography } from '@/shared/components'
-import { sizes } from '@/shared/theme'
+import { Button } from '@/shared/components'
+import { sizes, colors } from '@/shared/theme'
 
 const Container = styled.div`
-  margin: ${sizes.b10 * 2}px auto 0;
+  padding: ${sizes.b4};
+  color: ${colors.gray[400]};
   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 Title = styled(Typography)`
-  line-height: 1.25;
+const StyledButton = styled(Button)`
+  color: ${colors.white};
 `
 
 const ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
   console.error(error)
   return (
     <Container>
-      <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>
+      <p>Something went wrong...</p>
+      <StyledButton variant="tertiary" onClick={resetErrorBoundary}>
+        Try again
+      </StyledButton>
     </Container>
   )
 }

src/components/GalleryErrorFallback.tsx

@@ -1,34 +0,0 @@
-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/LayoutWithRouting.tsx

@@ -4,7 +4,7 @@ import { RouteComponentProps, Router, navigate } from '@reach/router'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import { GlobalStyle } from '@/shared/components'
-import { Navbar, ErrorFallback } from '@/components'
+import { Navbar, ViewErrorFallback } from '@/components'
 import { HomeView, VideoView, SearchView, ChannelView, BrowseView } from '@/views'
 import routes from '@/config/routes'
 
@@ -14,7 +14,7 @@ type RouteProps = {
 const Route: React.FC<RouteProps> = ({ Component, ...pathProps }) => {
   return (
     <ErrorBoundary
-      FallbackComponent={ErrorFallback}
+      FallbackComponent={ViewErrorFallback}
       onReset={() => {
         navigate('/')
       }}

src/components/ViewErrorFallback.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { FallbackProps } from 'react-error-boundary'
+
+import { ReactComponent as ErrorIllustration } from '@/assets/error.svg'
+import { Button, Typography } from '@/shared/components'
+import { sizes } from '@/shared/theme'
+
+const Container = styled.div`
+  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 Title = styled(Typography)`
+  line-height: 1.25;
+`
+
+const ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
+  console.error(error)
+  return (
+    <Container>
+      <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>
+  )
+}
+
+export default ErrorFallback

src/components/index.ts

@@ -8,5 +8,5 @@ export { default as PlaceholderVideoGrid } from './PlaceholderVideoGrid'
 export { default as VideoPreview } from './VideoPreviewWithNavigation'
 export { default as ChannelPreview } from './ChannelPreviewWithNavigation'
 export { default as ChannelGrid } from './ChannelGrid'
+export { default as ViewErrorFallback } from './ViewErrorFallback'
 export { default as ErrorFallback } from './ErrorFallback'
-export { default as GalleryErrorFallback } from './GalleryErrorFallback'

src/shared/components/InfiniteVideoGrid/InfiniteVideoGrid.tsx

@@ -40,13 +40,17 @@ const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
   const targetDisplayedVideosCount = targetRowsCount * videosPerRow
   const targetLoadedVideosCount = targetDisplayedVideosCount + skipCount
 
-  const [fetchVideos, { loading, data, fetchMore, called, refetch }] = useLazyQuery<
+  const [fetchVideos, { loading, data, error, fetchMore, called, refetch }] = useLazyQuery<
     GetNewestVideos,
     GetNewestVideosVariables
   >(GET_NEWEST_VIDEOS, {
     notifyOnNetworkStatusChange: true,
   })
 
+  if (error) {
+    throw error
+  }
+
   const loadedVideosCount = data?.videosConnection.edges.length || 0
   const allVideosLoaded = data ? !data.videosConnection.pageInfo.hasNextPage : false
 

src/views/BrowseView.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
 import { RouteComponentProps } from '@reach/router'
+import { ErrorBoundary } from 'react-error-boundary'
+
+import { ErrorFallback } from '@/components'
 import { CategoryPicker, InfiniteVideoGrid, Typography } from '@/shared/components'
 import { colors, sizes } from '@/shared/theme'
 import { useQuery } from '@apollo/client'
@@ -35,7 +38,9 @@ const BrowseView: React.FC<RouteComponentProps> = () => {
         selectedCategoryId={selectedCategoryId}
         onChange={handleCategoryChange}
       />
-      <StyledInfiniteVideoGrid categoryId={selectedCategoryId || undefined} ready={!!selectedCategoryId} />
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <StyledInfiniteVideoGrid categoryId={selectedCategoryId || undefined} ready={!!selectedCategoryId} />
+      </ErrorBoundary>
     </div>
   )
 }

src/views/HomeView.tsx

@@ -4,13 +4,13 @@ import { ChannelGallery, FeaturedVideoHeader, ErrorFallback, VideoGallery } from
 
 import { RouteComponentProps } from '@reach/router'
 import { useQuery } from '@apollo/client'
+import { ErrorBoundary } from 'react-error-boundary'
 import { InfiniteVideoGrid } from '@/shared/components'
 import { GET_FEATURED_VIDEOS, GET_NEWEST_CHANNELS, GET_NEWEST_VIDEOS } from '@/api/queries'
 import { GetFeaturedVideos } from '@/api/queries/__generated__/GetFeaturedVideos'
 import { GetNewestVideos, GetNewestVideosVariables } from '@/api/queries/__generated__/GetNewestVideos'
 import { GetNewestChannels, GetNewestChannelsVariables } from '@/api/queries/__generated__/GetNewestChannels'
 import { spacing } from '@/shared/theme'
-import { ErrorBoundary } from 'react-error-boundary'
 
 const NEWEST_VIDEOS_COUNT = 8
 const NEWEST_CHANNELS_COUNT = 8
@@ -30,7 +30,9 @@ const HomeView: React.FC<RouteComponentProps> = () => {
     data: featuredVideosData,
     error: featuredVideosError,
     refetch: refetchFeaturedVideos,
-  } = useQuery<GetFeaturedVideos>(GET_FEATURED_VIDEOS)
+  } = useQuery<GetFeaturedVideos>(GET_FEATURED_VIDEOS, {
+    notifyOnNetworkStatusChange: true,
+  })
   const {
     loading: newestChannelsLoading,
     data: newestChannelsData,
@@ -54,7 +56,7 @@ const HomeView: React.FC<RouteComponentProps> = () => {
         {!hasNewestVideosError ? (
           <VideoGallery title="Newest videos" loading={newestVideosLoading} videos={newestVideos} />
         ) : (
-          <GalleryErrorFallback error={newestVideosError} reset={() => refetchNewestVideos()} />
+          <ErrorFallback error={newestVideosError} resetErrorBoundary={() => refetchNewestVideos()} />
         )}
 
         {!hasFeaturedVideosError ? (
@@ -64,16 +66,17 @@ const HomeView: React.FC<RouteComponentProps> = () => {
             videos={featuredVideosData?.featured_videos}
           />
         ) : (
-          <GalleryErrorFallback error={featuredVideosError} reset={() => refetchFeaturedVideos()} />
+          <ErrorFallback error={featuredVideosError} resetErrorBoundary={() => refetchFeaturedVideos()} />
         )}
 
         {!hasNewestChannelsError ? (
           <ChannelGallery title="Newest channels" loading={newestChannelsLoading} channels={newestChannels} />
         ) : (
-          <GalleryErrorFallback error={newestChannelsError} reset={() => refetchNewestChannels()} />
+          <ErrorFallback error={newestChannelsError} resetErrorBoundary={() => refetchNewestChannels()} />
         )}
-
-        <StyledInfiniteVideoGrid title="More videos" skipCount={NEWEST_VIDEOS_COUNT} />
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <StyledInfiniteVideoGrid title="More videos" skipCount={NEWEST_VIDEOS_COUNT} />
+        </ErrorBoundary>
       </Container>
     </>
   )