Add popular videos section on popular page (#1093)

* Add popular videos section on popular page

* Change popular video query to most popular of all time

src/api/hooks/video.ts

@@ -5,6 +5,8 @@ import {
   AddVideoViewMutation,
   GetBasicVideosQuery,
   GetBasicVideosQueryVariables,
+  GetMostViewedVideosAllTimeQuery,
+  GetMostViewedVideosAllTimeQueryVariables,
   GetMostViewedVideosQuery,
   GetMostViewedVideosQueryVariables,
   GetVideoQuery,
@@ -12,6 +14,7 @@ import {
   GetVideosQueryVariables,
   useAddVideoViewMutation,
   useGetBasicVideosQuery,
+  useGetMostViewedVideosAllTimeQuery,
   useGetMostViewedVideosQuery,
   useGetVideoQuery,
   useGetVideosQuery,
@@ -97,15 +100,24 @@ export const useMostViewedVideos = (variables?: GetMostViewedVideosQueryVariable
     { skip: !mostViewedVideosIds }
   )
 
-  const sortedVideos = useMemo(() => {
-    if (videos) {
-      return [...videos].sort((a, b) => (b.views && a.views ? b.views - a.views : 0))
-    }
-    return null
-  }, [videos])
+  const sortedVideos = videos
+    ? videos.map((video) => ({ ...video, views: video.views || 0 })).sort((a, b) => b.views - a.views)
+    : null
 
   return {
     videos: sortedVideos,
     ...rest,
   }
 }
+
+type MostViewedVideosAllTimeOpts = QueryHookOptions<GetMostViewedVideosAllTimeQuery>
+export const useMostViewedVideosAllTimeIds = (
+  variables?: GetMostViewedVideosAllTimeQueryVariables,
+  opts?: MostViewedVideosAllTimeOpts
+) => {
+  const { data, ...rest } = useGetMostViewedVideosAllTimeQuery({ ...opts, variables })
+  return {
+    mostViewedVideosAllTime: data?.mostViewedVideosAllTime,
+    ...rest,
+  }
+}

src/api/queries/__generated__/baseTypes.generated.ts

@@ -308,6 +308,8 @@ export type Query = {
   mostViewedChannelsAllTime?: Maybe<Array<EntityViewsInfo>>
   /** Get list of most viewed videos in given period */
   mostViewedVideos?: Maybe<Array<EntityViewsInfo>>
+  /** Get list of most viewed videos in given period */
+  mostViewedVideosAllTime?: Maybe<Array<EntityViewsInfo>>
   search: Array<SearchFtsOutput>
   videoByUniqueInput?: Maybe<Video>
   videoCategories: Array<VideoCategory>
@@ -385,6 +387,10 @@ export type QueryMostViewedVideosArgs = {
   limit?: Maybe<Scalars['Int']>
 }
 
+export type QueryMostViewedVideosAllTimeArgs = {
+  limit: Scalars['Int']
+}
+
 export type QuerySearchArgs = {
   limit?: Maybe<Scalars['Int']>
   text: Scalars['String']

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

@@ -133,6 +133,15 @@ export type GetMostViewedVideosQuery = {
   mostViewedVideos?: Types.Maybe<Array<{ __typename?: 'EntityViewsInfo'; id: string; views: number }>>
 }
 
+export type GetMostViewedVideosAllTimeQueryVariables = Types.Exact<{
+  limit: Types.Scalars['Int']
+}>
+
+export type GetMostViewedVideosAllTimeQuery = {
+  __typename?: 'Query'
+  mostViewedVideosAllTime?: Types.Maybe<Array<{ __typename?: 'EntityViewsInfo'; id: string; views: number }>>
+}
+
 export type AddVideoViewMutationVariables = Types.Exact<{
   videoId: Types.Scalars['ID']
   channelId: Types.Scalars['ID']
@@ -524,6 +533,53 @@ export type GetMostViewedVideosQueryResult = Apollo.QueryResult<
   GetMostViewedVideosQuery,
   GetMostViewedVideosQueryVariables
 >
+export const GetMostViewedVideosAllTimeDocument = gql`
+  query GetMostViewedVideosAllTime($limit: Int!) {
+    mostViewedVideosAllTime(limit: $limit) {
+      id
+      views
+    }
+  }
+`
+
+/**
+ * __useGetMostViewedVideosAllTimeQuery__
+ *
+ * To run a query within a React component, call `useGetMostViewedVideosAllTimeQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetMostViewedVideosAllTimeQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetMostViewedVideosAllTimeQuery({
+ *   variables: {
+ *      limit: // value for 'limit'
+ *   },
+ * });
+ */
+export function useGetMostViewedVideosAllTimeQuery(
+  baseOptions: Apollo.QueryHookOptions<GetMostViewedVideosAllTimeQuery, GetMostViewedVideosAllTimeQueryVariables>
+) {
+  return Apollo.useQuery<GetMostViewedVideosAllTimeQuery, GetMostViewedVideosAllTimeQueryVariables>(
+    GetMostViewedVideosAllTimeDocument,
+    baseOptions
+  )
+}
+export function useGetMostViewedVideosAllTimeLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<GetMostViewedVideosAllTimeQuery, GetMostViewedVideosAllTimeQueryVariables>
+) {
+  return Apollo.useLazyQuery<GetMostViewedVideosAllTimeQuery, GetMostViewedVideosAllTimeQueryVariables>(
+    GetMostViewedVideosAllTimeDocument,
+    baseOptions
+  )
+}
+export type GetMostViewedVideosAllTimeQueryHookResult = ReturnType<typeof useGetMostViewedVideosAllTimeQuery>
+export type GetMostViewedVideosAllTimeLazyQueryHookResult = ReturnType<typeof useGetMostViewedVideosAllTimeLazyQuery>
+export type GetMostViewedVideosAllTimeQueryResult = Apollo.QueryResult<
+  GetMostViewedVideosAllTimeQuery,
+  GetMostViewedVideosAllTimeQueryVariables
+>
 export const AddVideoViewDocument = gql`
   mutation AddVideoView($videoId: ID!, $channelId: ID!) {
     addVideoView(videoId: $videoId, channelId: $channelId) {

src/api/queries/videos.graphql

@@ -125,6 +125,13 @@ query GetMostViewedVideos($viewedWithinDays: Int!, $limit: Int) {
   }
 }
 
+query GetMostViewedVideosAllTime($limit: Int!) {
+  mostViewedVideosAllTime(limit: $limit) {
+    id
+    views
+  }
+}
+
 mutation AddVideoView($videoId: ID!, $channelId: ID!) {
   addVideoView(videoId: $videoId, channelId: $channelId) {
     id

src/api/schemas/orion.graphql

@@ -66,6 +66,11 @@ type Query {
   """
   mostViewedVideos(period: Int!, limit: Int): [EntityViewsInfo!]
 
+  """
+  Get list of most viewed videos in given period
+  """
+  mostViewedVideosAllTime(limit: Int!): [EntityViewsInfo!]
+
   """
   Get list of channels with most views in given period
   """

src/shared/components/LoadMoreButton/LoadMoreButton.tsx

@@ -11,7 +11,7 @@ type LoadMoreButtonProps = {
 
 export const LoadMoreButton: FC<LoadMoreButtonProps> = ({ onClick, label = 'Show more videos' }) => (
   <LoadMore
-    variant="secondary"
+    variant="tertiary"
     size="large"
     fullWidth
     onClick={onClick}

src/views/viewer/PopularView/PopularView.tsx

@@ -1,23 +1,43 @@
 import styled from '@emotion/styled'
 import React, { FC } from 'react'
 
+import { useMostViewedVideosAllTimeIds } from '@/api/hooks'
 import { useMostViewedVideos } from '@/api/hooks'
 import { useMostViewedChannelsAllTimeIds } from '@/api/hooks'
-import { InfiniteChannelWithVideosGrid, VideoGallery, ViewWrapper } from '@/components'
+import { InfiniteChannelWithVideosGrid, InfiniteVideoGrid, VideoGallery, ViewWrapper } from '@/components'
 import { absoluteRoutes } from '@/config/routes'
 import { CallToActionButton, CallToActionWrapper, Text } from '@/shared/components'
 import { SvgNavChannels, SvgNavHome, SvgNavNew } from '@/shared/icons'
 import { sizes } from '@/shared/theme'
 
 export const PopularView: FC = () => {
+  const {
+    mostViewedVideosAllTime,
+    loading: mostViewedVideosLoading,
+    error: mostViewedVideosError,
+  } = useMostViewedVideosAllTimeIds({
+    limit: 200,
+  })
+  const mostViewedVideosIds = mostViewedVideosAllTime?.map((item) => item.id)
   const { mostViewedChannelsAllTime } = useMostViewedChannelsAllTimeIds({ limit: 15 })
   const mostViewedChannelsAllTimeIds = mostViewedChannelsAllTime?.map((item) => item.id)
   const { videos, loading } = useMostViewedVideos({ viewedWithinDays: 30, limit: 10 })
+
+  if (mostViewedVideosError) {
+    throw mostViewedVideosError
+  }
+
   return (
     <StyledViewWrapper>
       <Header variant="h2">Popular</Header>
       <StyledVideoGallery hasRanking title="Top 10 this month" videos={videos || []} loading={loading} />
-      <StyledInfiniteChannelWithVideosGrid
+      <StyledInfiniteVideoGrid
+        title="Popular videos"
+        idIn={mostViewedVideosIds}
+        ready={!mostViewedVideosLoading}
+        onDemand
+      />
+      <InfiniteChannelWithVideosGrid
         title="Popular channels"
         onDemand
         idIn={mostViewedChannelsAllTimeIds}
@@ -59,7 +79,7 @@ const StyledViewWrapper = styled(ViewWrapper)`
   padding-bottom: ${sizes(10)};
 `
 
-const StyledInfiniteChannelWithVideosGrid = styled(InfiniteChannelWithVideosGrid)`
+const StyledInfiniteVideoGrid = styled(InfiniteVideoGrid)`
   :not(:last-of-type) {
     margin-bottom: ${sizes(38)};
   }