Add categoryId argument to addVideoView (#1201)

src/api/queries/__generated__/videos.generated.tsx

@@ -145,6 +145,7 @@ export type GetMostViewedVideosAllTimeQuery = {
 export type AddVideoViewMutationVariables = Types.Exact<{
   videoId: Types.Scalars['ID']
   channelId: Types.Scalars['ID']
+  categoryId?: Types.Maybe<Types.Scalars['ID']>
 }>
 
 export type AddVideoViewMutation = {
@@ -581,8 +582,8 @@ export type GetMostViewedVideosAllTimeQueryResult = Apollo.QueryResult<
   GetMostViewedVideosAllTimeQueryVariables
 >
 export const AddVideoViewDocument = gql`
-  mutation AddVideoView($videoId: ID!, $channelId: ID!) {
-    addVideoView(videoId: $videoId, channelId: $channelId) {
+  mutation AddVideoView($videoId: ID!, $channelId: ID!, $categoryId: ID) {
+    addVideoView(videoId: $videoId, channelId: $channelId, categoryId: $categoryId) {
       id
       views
     }
@@ -605,6 +606,7 @@ export type AddVideoViewMutationFn = Apollo.MutationFunction<AddVideoViewMutatio
  *   variables: {
  *      videoId: // value for 'videoId'
  *      channelId: // value for 'channelId'
+ *      categoryId: // value for 'categoryId'
  *   },
  * });
  */

src/api/queries/videos.graphql

@@ -132,8 +132,8 @@ query GetMostViewedVideosAllTime($limit: Int!) {
   }
 }
 
-mutation AddVideoView($videoId: ID!, $channelId: ID!) {
-  addVideoView(videoId: $videoId, channelId: $channelId) {
+mutation AddVideoView($videoId: ID!, $channelId: ID!, $categoryId: ID) {
+  addVideoView(videoId: $videoId, channelId: $channelId, categoryId: $categoryId) {
     id
     views
   }

src/api/schemas/orion.graphql

@@ -17,7 +17,7 @@ type Mutation {
   """
   Add a single view to the target video's count
   """
-  addVideoView(categoryId: ID, channelId: ID!, videoId: ID!): EntityViewsInfo!
+  addVideoView(categoryId: ID, channelId: ID!, videoId: ID!, categoryId: ID): EntityViewsInfo!
 
   """
   Add a single follow to the target channel

src/views/viewer/VideoView/VideoView.tsx

@@ -67,6 +67,7 @@ export const VideoView: React.FC = () => {
 
   const channelId = video?.channel.id
   const videoId = video?.id
+  const categoryId = video?.category?.id
 
   useEffect(() => {
     if (!videoId || !channelId) {
@@ -76,11 +77,12 @@ export const VideoView: React.FC = () => {
       variables: {
         videoId,
         channelId,
+        categoryId,
       },
     }).catch((error) => {
       SentryLogger.error('Failed to increase video views', 'VideoView', error)
     })
-  }, [addVideoView, videoId, channelId])
+  }, [addVideoView, videoId, channelId, categoryId])
 
   // Save the video timestamp
   // disabling eslint for this line since debounce is an external fn and eslint can't figure out its args, so it will complain.

src/views/viewer/VideosView/VideosView.tsx

@@ -1,87 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { useInView } from 'react-intersection-observer'
-
-import { useCategories, useVideos } from '@/api/hooks'
-import { VideoOrderByInput } from '@/api/queries'
-import { BackgroundPattern, TOP_NAVBAR_HEIGHT, VideoGallery, ViewErrorFallback } from '@/components'
-import { Text } from '@/shared/components'
-import { transitions } from '@/shared/theme'
-import { SentryLogger } from '@/utils/logs'
-
-import {
-  CategoriesVideosContainer,
-  FeaturedVideosContainer,
-  GRID_TOP_PADDING,
-  Header,
-  IntersectionTarget,
-  StyledCategoryPicker,
-  StyledInfiniteVideoGrid,
-  StyledViewWrapper,
-} from './VideosView.style'
-
-export const VideosView: React.FC = () => {
-  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null)
-  const { loading: categoriesLoading, categories, error: categoriesError } = useCategories(undefined, {
-    onError: (error) => SentryLogger.error('Failed to fetch categories', 'VideosView', error),
-  })
-  const { loading: featuredVideosLoading, videos: featuredVideos, error: videosError } = useVideos(
-    {
-      where: {
-        isFeatured_eq: true,
-      },
-      orderBy: VideoOrderByInput.CreatedAtDesc,
-    },
-    {
-      notifyOnNetworkStatusChange: true,
-      onError: (error) => SentryLogger.error('Failed to fetch videos', 'VideosView', error),
-    }
-  )
-
-  const topicsRef = useRef<HTMLHeadingElement>(null)
-  const { ref: targetRef, inView } = useInView({
-    rootMargin: `-${TOP_NAVBAR_HEIGHT - GRID_TOP_PADDING}px 0px 0px`,
-  })
-  const handleCategoryChange = (categoryId: string | null, scrollTop = true) => {
-    setSelectedCategoryId(categoryId)
-    if (topicsRef.current && scrollTop) {
-      setTimeout(() => {
-        const offset = TOP_NAVBAR_HEIGHT
-        const relativeY = topicsRef?.current?.getBoundingClientRect().top || 0
-        const scrollY = relativeY + window.pageYOffset - offset
-        window.scrollTo({ top: scrollY, behavior: 'smooth' })
-      })
-    }
-  }
-
-  if (videosError || categoriesError) {
-    return <ViewErrorFallback />
-  }
-
-  return (
-    <StyledViewWrapper>
-      <BackgroundPattern />
-      <div className={transitions.names.slide}>
-        <Header variant="hero">Videos</Header>
-        {featuredVideosLoading || featuredVideos?.length ? (
-          <FeaturedVideosContainer>
-            <VideoGallery title="Featured" loading={featuredVideosLoading} videos={featuredVideos || []} />
-          </FeaturedVideosContainer>
-        ) : null}
-        <CategoriesVideosContainer>
-          <Text ref={topicsRef} variant="h5">
-            Topics that may interest you
-          </Text>
-          <IntersectionTarget ref={targetRef} />
-          <StyledCategoryPicker
-            categories={categories}
-            loading={categoriesLoading}
-            selectedCategoryId={selectedCategoryId}
-            onChange={handleCategoryChange}
-            isAtTop={inView}
-          />
-          <StyledInfiniteVideoGrid categoryId={selectedCategoryId || undefined} ready={!!categories} />
-        </CategoriesVideosContainer>
-      </div>
-    </StyledViewWrapper>
-  )
-}