Add Discover Presenters and Bible Books sections

package.json

@@ -110,7 +110,7 @@
         "babel-jest": "^27.5.1",
         "babel-loader": "^8.2.3",
         "babel-plugin-react-intl": "^8.2.4",
-        "concurrently": "^8.2.0",
+        "concurrently": "^8.2.1",
         "eslint": "^8.43.0",
         "eslint-config-next": "^13.0.3",
         "eslint-plugin-formatjs": "^3.0.0",

public/compiled-lang/en.json

@@ -1467,6 +1467,12 @@
       "value": "Previous trending teachings"
     }
   ],
+  "discover_bibleBooksHeading": [
+    {
+      "type": 0,
+      "value": "Discover Bible Books"
+    }
+  ],
   "discover_conferencesHeading": [
     {
       "type": 0,
@@ -1479,6 +1485,12 @@
       "value": "Featured Teachings"
     }
   ],
+  "discover_presentersHeading": [
+    {
+      "type": 0,
+      "value": "Discover Presenters"
+    }
+  ],
   "discover_recentBlogHeading": [
     {
       "type": 0,
@@ -3803,6 +3815,24 @@
       "value": "Previous audiobooks"
     }
   ],
+  "organismSection__bibleBooksHeading": [
+    {
+      "type": 0,
+      "value": "Bible Books"
+    }
+  ],
+  "organismSection__bibleBooksNext": [
+    {
+      "type": 0,
+      "value": "Next Bible books"
+    }
+  ],
+  "organismSection__bibleBooksPrevious": [
+    {
+      "type": 0,
+      "value": "Previous Bible books"
+    }
+  ],
   "organismSection_presentersHeading": [
     {
       "type": 0,

public/lang/en.json

@@ -693,12 +693,18 @@
   "discover__trendingTeachingsPrevious": {
     "string": "Previous trending teachings"
   },
+  "discover_bibleBooksHeading": {
+    "string": "Discover Bible Books"
+  },
   "discover_conferencesHeading": {
     "string": "Recent Conferences"
   },
   "discover_featuredTeachingsHeading": {
     "string": "Featured Teachings"
   },
+  "discover_presentersHeading": {
+    "string": "Discover Presenters"
+  },
   "discover_recentBlogHeading": {
     "string": "Recent Blog Posts"
   },
@@ -1797,6 +1803,15 @@
   "organismSection__audiobooksPrevious": {
     "string": "Previous audiobooks"
   },
+  "organismSection__bibleBooksHeading": {
+    "string": "Bible Books"
+  },
+  "organismSection__bibleBooksNext": {
+    "string": "Next Bible books"
+  },
+  "organismSection__bibleBooksPrevious": {
+    "string": "Previous Bible books"
+  },
   "organismSection_presentersHeading": {
     "string": "Presenters"
   },

src/components/organisms/cardSlider/section/bibleBooks.graphql

@@ -0,0 +1,20 @@
+query getSectionBibleBooks(
+	$language: Language!
+	$first: Int! = 3
+	$after: String = null
+) {
+	bibleBooks: featuredSequences(
+		contentType: BIBLE_BOOK
+		language: $language
+		first: $first
+		after: $after
+	) {
+		nodes {
+			...cardSequence
+		}
+		pageInfo {
+			hasNextPage
+			endCursor
+		}
+	}
+}

src/components/organisms/cardSlider/section/bibleBooks.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { CardSequenceFragment } from '~src/components/molecules/card/__generated__/sequence';
+import CardSequence from '~src/components/molecules/card/sequence';
+import root from '~src/lib/routes';
+import { useLanguageId } from '~src/lib/useLanguageId';
+
+import Section from '.';
+import { useInfiniteGetSectionBibleBooksQuery } from './__generated__/bibleBooks';
+
+export default function BibleBooks(props: {
+	heading?: string | JSX.Element;
+}): JSX.Element {
+	const intl = useIntl();
+	const lang = useLanguageId();
+
+	const {
+		heading = intl.formatMessage({
+			id: 'organismSection__bibleBooksHeading',
+			defaultMessage: 'Bible Books',
+		}),
+	} = props;
+
+	return (
+		<Section
+			infiniteQuery={useInfiniteGetSectionBibleBooksQuery}
+			heading={heading}
+			previous={intl.formatMessage({
+				id: 'organismSection__bibleBooksPrevious',
+				defaultMessage: 'Previous Bible books',
+			})}
+			next={intl.formatMessage({
+				id: 'organismSection__bibleBooksNext',
+				defaultMessage: 'Next Bible books',
+			})}
+			seeAllUrl={root.lang(lang).books.get()}
+			Card={(p: { node: CardSequenceFragment }) => (
+				<CardSequence sequence={p.node} />
+			)}
+		/>
+	);
+}

src/components/organisms/cardSlider/section/presenters.tsx

@@ -9,19 +9,25 @@ import { useLanguageId } from '~src/lib/useLanguageId';
 import Section from '.';
 import { useInfiniteGetSectionPresentersQuery } from './__generated__/presenters';
 
-export default function Presenters(): JSX.Element {
+export default function Presenters(props: {
+	heading?: string | JSX.Element;
+}): JSX.Element {
 	const intl = useIntl();
 	const lang = useLanguageId();
 
+	const {
+		heading = intl.formatMessage({
+			id: 'organismSection_presentersHeading',
+			defaultMessage: 'Presenters',
+		}),
+	} = props;
+
 	return (
 		<Section
 			rows={2}
 			minCardWidth={170}
 			infiniteQuery={useInfiniteGetSectionPresentersQuery}
-			heading={intl.formatMessage({
-				id: 'organismSection_presentersHeading',
-				defaultMessage: 'Presenters',
-			})}
+			heading={heading}
 			previous={intl.formatMessage({
 				id: 'organismSection_presentersPrevious',
 				defaultMessage: 'Previous presenters',

src/containers/discover/collections.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 import LineHeading from '~components/atoms/lineHeading';
 import CardFavoriteEntity from '~components/molecules/card/favoriteEntity';
-import Audiobooks from '~src/components/organisms/cardSlider/section/Audiobooks';
+import Audiobooks from '~src/components/organisms/cardSlider/section/audiobooks';
 import Conferences from '~src/components/organisms/cardSlider/section/conferences';
 import Presenters from '~src/components/organisms/cardSlider/section/presenters';
 import ScriptureSongs from '~src/components/organisms/cardSlider/section/scriptureSongs';

src/containers/discover/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import BlogPosts from '~components/organisms/cardSlider/section/blogPosts';
 import Conferences from '~components/organisms/cardSlider/section/conferences';
@@ -8,15 +9,33 @@ 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';
+import BibleBooks from '~src/components/organisms/cardSlider/section/bibleBooks';
+import Presenters from '~src/components/organisms/cardSlider/section/presenters';
 
 export default function Discover(): JSX.Element {
 	return (
 		<div>
 			<RecentTeachings />
 			<Topics />
+			<Presenters
+				heading={
+					<FormattedMessage
+						id="discover_presentersHeading"
+						defaultMessage="Discover Presenters"
+					/>
+				}
+			/>
 			<TrendingTeachings />
 			<FeaturedTeachings />
 			<BlogPosts />
+			<BibleBooks
+				heading={
+					<FormattedMessage
+						id="discover_bibleBooksHeading"
+						defaultMessage="Discover Bible Books"
+					/>
+				}
+			/>
 			<StorySeasons />
 			<Conferences />
 			<TrendingMusic />

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

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