fix bible chapter links

src/components/organisms/passageNavigation.graphql

@@ -1,16 +1,11 @@
-fragment passageNavigation on BibleConnection {
-	nodes {
-		title
-		books {
+fragment passageNavigation on Sequence {
+	id
+	title
+	recordings(first: 150) {
+		nodes {
 			id
 			title
-			chapters {
-				title
-				url
-			}
+			canonicalPath
 		}
 	}
-	aggregate {
-		count
-	}
 }

src/components/organisms/passageNavigation.tsx

@@ -2,56 +2,45 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 
 import Link from '~components/atoms/linkWithoutPrefetch';
-import root from '~src/lib/routes';
-import useLanguageRoute from '~src/lib/useLanguageRoute';
-import { IBibleBook } from '~src/services/fcbh/types';
 
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
 import styles from './passageNavigation.module.scss';
 
 type Props = {
-	books: IBibleBook[];
+	books: Array<PassageNavigationFragment>;
 };
 
 export default function PassageNavigation({ books }: Props): JSX.Element {
-	const [selectedBook, setSelectedBook] = useState<string | null>(
-		books[0]?.name,
+	const [selectedBook, setSelectedBook] = useState<string | number | null>(
+		null,
 	);
 
-	const languageRoute = useLanguageRoute();
-
 	return (
 		<div className={styles.wrapper}>
 			<ul className={styles.books}>
 				{books.map((book) => {
-					const chapters = book.chapters;
+					const chapters = book.recordings.nodes;
 					return (
 						<li
-							key={book.name}
+							key={book.id}
 							className={clsx(styles.book, {
-								active: book.name === selectedBook,
+								active: book.id === selectedBook,
 							})}
 						>
 							<button
 								onClick={() => {
-									setSelectedBook(book.name);
+									setSelectedBook(book.id);
 								}}
 							>
-								{book.name}
+								{book.title}
 							</button>
-							{book.name === selectedBook ? (
+							{book.id === selectedBook ? (
 								<ul className={styles.chapters}>
-									{chapters?.map((n) => {
+									{chapters?.map((chapter) => {
+										const n = Number(chapter.title.split(' ').pop());
 										return (
 											<li key={n} className={styles.chapter}>
-												<Link
-													href={root
-														.lang(languageRoute)
-														.bibles.bookId(book.book_id)
-														.chapterNumber(n)
-														.get()}
-												>
-													{n}
-												</Link>
+												<Link href={chapter.canonicalPath}>{n}</Link>
 											</li>
 										);
 									})}

src/containers/bible/index.graphql

@@ -1,5 +1,18 @@
-query getAudiobibleIndexData {
-	audiobibles {
-		...passageNavigation
+query getAudiobibleIndexData($language: Language!) {
+	collections(
+		language: $language
+		contentType: BIBLE_VERSION
+		first: 10
+		orderBy: [{ field: TITLE, direction: ASC }]
+	) {
+		nodes {
+			id
+			title
+			sequences(first: 66, orderBy: [{ field: ID, direction: ASC }]) {
+				nodes {
+					...passageNavigation
+				}
+			}
+		}
 	}
 }

src/containers/bible/index.tsx

@@ -12,16 +12,17 @@ import Dropdown from '~src/components/molecules/dropdown';
 import IconButton from '~src/components/molecules/iconButton';
 import Tease from '~src/components/molecules/tease';
 import PassageNavigation from '~src/components/organisms/passageNavigation';
-import { IBibleVersion } from '~src/services/fcbh/types';
 
+import { GetAudiobibleIndexDataQuery } from './__generated__';
 import styles from './index.module.scss';
 
 // export type BibleIndexProps = GetAudiobibleIndexDataQuery;
 export type BibleIndexProps = {
-	audiobibles: IBibleVersion[];
+	data: GetAudiobibleIndexDataQuery;
 };
 function Bible(props: BibleIndexProps): JSX.Element {
 	console.log({ props });
+	const versions = props.data.collections.nodes || [];
 	return (
 		<Tease className={styles.base}>
 			<div className={styles.hat}>
@@ -69,7 +70,7 @@ function Bible(props: BibleIndexProps): JSX.Element {
 									/>
 								</a>
 							</p> */}
-							{props.audiobibles.map((audiobible) => (
+							{versions.map((audiobible) => (
 								<p key={audiobible.id}>
 									<a
 										href={`https://www.example.com/${audiobible.id}`}
@@ -93,12 +94,12 @@ function Bible(props: BibleIndexProps): JSX.Element {
 			</div>
 
 			<div className={styles.content}>
-				<PassageNavigation books={props.audiobibles[0].books} />
+				<PassageNavigation books={versions[0].sequences.nodes || []} />
 			</div>
 		</Tease>
 	);
 }
 
 export default withFailStates(Bible, {
-	useShould404: ({ audiobibles }) => !audiobibles.length,
+	useShould404: ({ data }) => !data.collections.nodes?.length,
 });

src/pages/[language]/bibles/index.tsx

@@ -10,7 +10,7 @@ import { LANGUAGES, REVALIDATE, REVALIDATE_FAILURE } from '~lib/constants';
 import getIntl from '~lib/getIntl';
 import { getLanguageIdByRoute } from '~lib/getLanguageIdByRoute';
 import root from '~lib/routes';
-import { getBibles } from '~src/services/fcbh/getBibles';
+import { getAudiobibleIndexData } from '~src/containers/bible/__generated__';
 
 export default Bible;
 
@@ -19,36 +19,35 @@ export async function getStaticProps({
 }: GetStaticPropsContext<{ language: string }>): Promise<
 	GetStaticPropsResult<BibleIndexProps & IBaseProps>
 > {
-	const response = await getBibles().catch((e) => {
-		console.log(e);
-		return null;
-	});
-	// const apiBibles = await getAudiobibleVersionsData({
-	// 	language: getLanguageIdByRoute(params?.language),
-	// }).catch(() => ({ collections: { nodes: [] } }));
+	// const response = await getBibles().catch((e) => {
+	// 	console.log(e);
+	// 	return null;
+	// });
+	const apiBibles = await getAudiobibleIndexData({
+		language: getLanguageIdByRoute(params?.language),
+	}).catch(() => ({ collections: { nodes: [] } }));
 
-	// if (!apiBibles?.collections.nodes) {
-	// 	return {
-	// 		notFound: true,
-	// 		revalidate: REVALIDATE_FAILURE,
-	// 	};
-	// }
+	if (!apiBibles?.collections.nodes) {
+		return {
+			notFound: true,
+			revalidate: REVALIDATE_FAILURE,
+		};
+	}
 
 	const intl = await getIntl(getLanguageIdByRoute(params?.language));
 	return {
 		props: {
-			audiobibles: response || [],
 			// versions: [...(response || []), ...apiBibles.collections.nodes].sort(
 			// 	(a, b) => a.title.localeCompare(b.title),
 			// ),
-			// ...(await getAudiobibleIndexData({})),
+			data: apiBibles,
 			title: intl.formatMessage({
 				id: 'bible__title',
 				defaultMessage: 'Bible',
 			}),
 		},
-		revalidate: response ? REVALIDATE : REVALIDATE_FAILURE,
-		// revalidate: REVALIDATE,
+		// revalidate: response ? REVALIDATE : REVALIDATE_FAILURE,
+		revalidate: REVALIDATE,
 	};
 }