diff --git a/public/compiled-lang/en.json b/public/compiled-lang/en.json index cdf8202b8..86d94f3df 100644 --- a/public/compiled-lang/en.json +++ b/public/compiled-lang/en.json @@ -1449,6 +1449,18 @@ "value": "Previous topics" } ], + "discover__trendingMusicNext": [ + { + "type": 0, + "value": "Next trending scripture songs" + } + ], + "discover__trendingMusicPrevious": [ + { + "type": 0, + "value": "Previous trending scripture songs" + } + ], "discover__trendingTeachingsNext": [ { "type": 0, @@ -1491,6 +1503,12 @@ "value": "Topics" } ], + "discover_trendingMusicHeading": [ + { + "type": 0, + "value": "Trending Scripture Songs" + } + ], "discover_trendingTeachingsHeading": [ { "type": 0, diff --git a/public/lang/en.json b/public/lang/en.json index a0f72f123..f1c251134 100644 --- a/public/lang/en.json +++ b/public/lang/en.json @@ -684,6 +684,12 @@ "discover__topicsPrevious": { "string": "Previous topics" }, + "discover__trendingMusicNext": { + "string": "Next trending scripture songs" + }, + "discover__trendingMusicPrevious": { + "string": "Previous trending scripture songs" + }, "discover__trendingTeachingsNext": { "string": "Next trending teachings" }, @@ -705,6 +711,9 @@ "discover_topicsHeading": { "string": "Topics" }, + "discover_trendingMusicHeading": { + "string": "Trending Scripture Songs" + }, "discover_trendingTeachingsHeading": { "string": "Trending Teachings" }, diff --git a/src/components/organisms/cardSlider/section/trendingMusic.graphql b/src/components/organisms/cardSlider/section/trendingMusic.graphql new file mode 100644 index 000000000..75c16484a --- /dev/null +++ b/src/components/organisms/cardSlider/section/trendingMusic.graphql @@ -0,0 +1,22 @@ +query getSectionTrendingMusic( + $language: Language! + $first: Int! = 3 + $after: String = null +) { + trendingMusic: popularRecordings( + language: $language + contentType: MUSIC_TRACK + first: $first + after: $after + ) { + nodes { + recording { + ...cardRecording + } + } + pageInfo { + hasNextPage + endCursor + } + } +} diff --git a/src/components/organisms/cardSlider/section/trendingMusic.tsx b/src/components/organisms/cardSlider/section/trendingMusic.tsx new file mode 100644 index 000000000..253f337c4 --- /dev/null +++ b/src/components/organisms/cardSlider/section/trendingMusic.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { useIntl } from 'react-intl'; + +import { CardRecordingFragment } from '~src/components/molecules/card/__generated__/recording'; +import CardRecording from '~src/components/molecules/card/recording'; +import root from '~src/lib/routes'; +import useLanguageRoute from '~src/lib/useLanguageRoute'; + +import Section from '.'; +import { useInfiniteGetSectionTrendingMusicQuery } from './__generated__/trendingMusic'; + +export default function TrendingMusic(): JSX.Element { + const route = useLanguageRoute(); + const intl = useIntl(); + + return ( +
p?.trendingMusic.nodes?.map((n) => n.recording)} + Card={(p: { node: CardRecordingFragment }) => ( + + )} + /> + ); +} diff --git a/src/containers/discover/index.tsx b/src/containers/discover/index.tsx index 4e37080f7..d49362853 100644 --- a/src/containers/discover/index.tsx +++ b/src/containers/discover/index.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import TrendingTeachings from '~src/components/organisms/cardSlider/section/trendingTeachings'; - -import BlogPosts from '../../components/organisms/cardSlider/section/blogPosts'; -import Conferences from '../../components/organisms/cardSlider/section/conferences'; -import FeaturedTeachings from '../../components/organisms/cardSlider/section/featuredTeachings'; -import RecentTeachings from '../../components/organisms/cardSlider/section/recentTeachings'; -import StorySeasons from '../../components/organisms/cardSlider/section/storySeasons'; -import Topics from '../../components/organisms/cardSlider/section/topics'; +import BlogPosts from '~components/organisms/cardSlider/section/blogPosts'; +import Conferences from '~components/organisms/cardSlider/section/conferences'; +import FeaturedTeachings from '~components/organisms/cardSlider/section/featuredTeachings'; +import RecentTeachings from '~components/organisms/cardSlider/section/recentTeachings'; +import StorySeasons from '~components/organisms/cardSlider/section/storySeasons'; +import Topics from '~components/organisms/cardSlider/section/topics'; +import TrendingMusic from '~components/organisms/cardSlider/section/trendingMusic'; +import TrendingTeachings from '~components/organisms/cardSlider/section/trendingTeachings'; export default function Discover(): JSX.Element { return ( @@ -19,6 +19,7 @@ export default function Discover(): JSX.Element { + ); } diff --git a/src/pages/[language]/discover/index.ts b/src/pages/[language]/discover/index.ts index 0201ef5e6..5bea47b75 100644 --- a/src/pages/[language]/discover/index.ts +++ b/src/pages/[language]/discover/index.ts @@ -36,6 +36,7 @@ export async function getStaticProps({ getSectionConferences: { language }, getSectionBlogPosts: { language }, getSectionTopics: { language }, + getSectionTrendingMusic: { language }, }); return {