Merge pull request #466 from audioverse-org/av-70

add trending music section

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,

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"
   },

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
+		}
+	}
+}

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 (
+		<Section
+			infiniteQuery={useInfiniteGetSectionTrendingMusicQuery}
+			heading={intl.formatMessage({
+				id: 'discover_trendingMusicHeading',
+				defaultMessage: 'Trending Scripture Songs',
+			})}
+			previous={intl.formatMessage({
+				id: 'discover__trendingMusicPrevious',
+				defaultMessage: 'Previous trending scripture songs',
+			})}
+			next={intl.formatMessage({
+				id: 'discover__trendingMusicNext',
+				defaultMessage: 'Next trending scripture songs',
+			})}
+			seeAllUrl={root.lang(route).songs.albums.get()}
+			selectNodes={(p) => p?.trendingMusic.nodes?.map((n) => n.recording)}
+			Card={(p: { node: CardRecordingFragment }) => (
+				<CardRecording recording={p.node} />
+			)}
+		/>
+	);
+}

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 {
 			<BlogPosts />
 			<StorySeasons />
 			<Conferences />
+			<TrendingMusic />
 		</div>
 	);
 }

src/pages/[language]/discover/index.ts

@@ -36,6 +36,7 @@ export async function getStaticProps({
 		getSectionConferences: { language },
 		getSectionBlogPosts: { language },
 		getSectionTopics: { language },
+		getSectionTrendingMusic: { language },
 	});
 
 	return {