Add top 10 this week section on home page (#1095)

src/components/TopTenThisWeek.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled'
+import React from 'react'
+
+import { useMostViewedVideos } from '@/api/hooks'
+import { VideoGallery } from '@/components'
+import { sizes } from '@/shared/theme'
+
+export const TopTenThisWeek = () => {
+  const { videos, loading } = useMostViewedVideos({ limit: 10, viewedWithinDays: 7 })
+
+  return (
+    <Wrapper>
+      <VideoGallery title="Top 10 this week" videos={videos || []} loading={loading} hasRanking />
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  margin-top: ${sizes(18)};
+`

src/components/VideoGallery.tsx

@@ -45,7 +45,7 @@ export const VideoGallery: React.FC<VideoGalleryProps> = ({
   onRemoveButtonClick,
   onVideoNotFound,
   seeAllUrl,
-  hasRanking = true,
+  hasRanking = false,
 }) => {
   const breakpoints = useMemo(() => {
     return breakpointsOfGrid({

src/components/index.ts

@@ -24,3 +24,4 @@ export * from './SignInSteps'
 export * from './StudioEntrypoint'
 export * from './PrivateRoute'
 export * from './OfficialJoystreamUpdate'
+export * from './TopTenThisWeek'

src/views/viewer/HomeView.tsx

@@ -6,6 +6,7 @@ import {
   InfiniteVideoGrid,
   LimitedWidthContainer,
   OfficialJoystreamUpdate,
+  TopTenThisWeek,
   VideoHero,
   ViewErrorFallback,
 } from '@/components'
@@ -61,6 +62,7 @@ export const HomeView: React.FC = () => {
           />
         ) : null}
         <OfficialJoystreamUpdate />
+        <TopTenThisWeek />
         <StyledInfiniteVideoGrid title="All content" onDemand />
       </Container>
     </LimitedWidthContainer>