Merge pull request #597 from audioverse-org/list-books

List books

src/components/organisms/passageNavigation.graphql

@@ -2,9 +2,11 @@ fragment passageNavigation on BibleConnection {
 	nodes {
 		title
 		books {
+			id
 			title
 			chapters {
 				title
+				url
 			}
 		}
 	}

src/components/organisms/passageNavigation.logic.ts

@@ -9,3 +9,13 @@ export function getChapters(
 
 	return chapters;
 }
+
+export function getBookId(
+	title: string,
+	audiobibles: PassageNavigationFragment,
+) {
+	const books = audiobibles.nodes?.[0].books;
+	const book = books?.find((book) => book?.title === title);
+
+	return book?.id;
+}

src/components/organisms/passageNavigation.module.scss

@@ -16,16 +16,17 @@
 	padding: 10px 24px;
 }
 
-.wrapper li:first-child button {
+.wrapper .books > li:first-child button {
 	padding-top: 16px;
 }
 
-.wrapper li:last-child button {
+.wrapper .books > li:last-child button {
 	padding-bottom: 16px;
 }
 
 .wrapper li,
-.wrapper li button {
+.wrapper li button,
+.wrapper li a {
 	color: $ts-lightTone;
 	font-weight: 700;
 	size: 16px;
@@ -34,11 +35,37 @@
 	list-style-type: none;
 }
 
-.wrapper :global(.active),
-.wrapper :global(.active) button {
+.wrapper :global(.active) > button {
 	color: $ts-salmon;
 }
 
-.chapter button {
-	font-variant-numeric: tabular-nums;
+.wrapper,
+.wrapper .books,
+.wrapper .chapters {
+	width: 100%;
+}
+
+.chapters {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+	background-color: $ts-darkened-bibleH;
+	border-top: 1px solid $ts-salmon;
+	border-bottom: 1px solid $ts-salmon;
+}
+
+.chapter a {
+	width: 100%;
+	height: 100%;
+	padding: 24px 0;
+	display: block;
+	text-align: center;
+}
+
+.chapter a:hover {
+	text-decoration: none;
+	color: $ts-salmon;
+}
+
+.books button:hover {
+	color: $ts-salmon;
 }

src/components/organisms/passageNavigation.tsx

@@ -1,9 +1,13 @@
 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 { BIBLE_BOOKS } from '../../lib/constants';
 import { PassageNavigationFragment } from './__generated__/passageNavigation';
-import { getChapters } from './passageNavigation.logic';
+import { getBookId, getChapters } from './passageNavigation.logic';
 import styles from './passageNavigation.module.scss';
 
 type Props = {
@@ -14,29 +18,56 @@ export default function PassageNavigation(props: Props): JSX.Element {
 	const [selectedBook, setSelectedBook] = useState<string | null>(
 		BIBLE_BOOKS[0],
 	);
-	const chapters = getChapters(props.audiobibles, selectedBook);
+
+	const languageRoute = useLanguageRoute();
 
 	return (
 		<div className={styles.wrapper}>
-			<ul>
-				{BIBLE_BOOKS.map((book) => (
-					<li key={book} className={clsx({ active: book === selectedBook })}>
-						<button
-							onClick={() => {
-								setSelectedBook(book);
-							}}
-						>
-							{book}
-						</button>
-					</li>
-				))}
-			</ul>
-			<ul>
-				{chapters?.map(({ title }) => {
-					const n = title.split(' ').pop()?.padStart(2, '0') ?? '';
+			<ul className={styles.books}>
+				{BIBLE_BOOKS.map((book) => {
+					const chapters = getChapters(props.audiobibles, book);
 					return (
-						<li key={title} className={styles.chapter}>
-							<button>{n}</button>
+						<li
+							key={book}
+							className={clsx(styles.book, { active: book === selectedBook })}
+						>
+							<button
+								onClick={() => {
+									setSelectedBook(book);
+								}}
+							>
+								{book}
+							</button>
+							{book === selectedBook ? (
+								<ul className={styles.chapters}>
+									{chapters?.map(({ title }) => {
+										console.log('title', title);
+										const n = title.split(' ').pop()?.padStart(2, '0') ?? '';
+										return (
+											<li key={title} className={styles.chapter}>
+												<Link
+													href={root
+														.lang(languageRoute)
+														.bibles.bookId(
+															getBookId('Exodus', props.audiobibles) ?? '',
+														)
+														.chapterNumber(n)
+														.get()}
+												>
+													{n}
+												</Link>
+
+												{/*
+												example good link: /en/bibles/chapters/27015/exodus-1 
+												Current Linking: /en/bibles/20
+												*/}
+											</li>
+										);
+									})}
+								</ul>
+							) : (
+								''
+							)}
 						</li>
 					);
 				})}