Merge pull request #605 from audioverse-org/bible-book-grid

Add missing components

src/components/organisms/bookGrid.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
+import ChapterGrid from './chapterGrid';
+import styles from './passageNavigation.module.scss';
+
+type Props = {
+	books: Array<PassageNavigationFragment>;
+	selectedBook: string | number | null;
+	selectBook: (id: string | number | null) => void;
+};
+
+export default function BookGrid({ books, selectedBook, selectBook }: Props) {
+	return (
+		<ul className={clsx(styles.books, 'grid')}>
+			{books.map((book) => {
+				const chapters = book.recordings.nodes;
+
+				return (
+					<>
+						<li
+							key={book.id}
+							className={clsx(styles.book, {
+								active: book.id === selectedBook,
+							})}
+						>
+							<button onClick={() => selectBook(book.id)}>
+								{book.title.replace(' ', '').substring(0, 3)}
+							</button>
+						</li>
+						{book.id === selectedBook && chapters && (
+							<ChapterGrid chapters={chapters} />
+						)}
+					</>
+				);
+			})}
+		</ul>
+	);
+}

src/components/organisms/bookList.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
+import ChapterGrid from './chapterGrid';
+import styles from './passageNavigation.module.scss';
+
+type Props = {
+	books: Array<PassageNavigationFragment>;
+	selectedBook: string | number | null;
+	selectBook: (id: string | number | null) => void;
+};
+
+export default function BookList({ books, selectedBook, selectBook }: Props) {
+	return (
+		<ul className={clsx(styles.books)}>
+			{books.map((book) => {
+				const chapters = book.recordings.nodes;
+
+				return (
+					<>
+						<li
+							key={book.id}
+							className={clsx(styles.book, {
+								active: book.id === selectedBook,
+							})}
+						>
+							<button onClick={() => selectBook(book.id)}>{book.title}</button>
+						</li>
+						{book.id === selectedBook && chapters && (
+							<ChapterGrid chapters={chapters} />
+						)}
+					</>
+				);
+			})}
+		</ul>
+	);
+}

src/components/organisms/bookSelector.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
+
+type Props = {
+	books: Array<PassageNavigationFragment>;
+};
+
+export default function BookSelector({ books }: Props) {}

src/components/organisms/chapterGrid.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Link from '~components/atoms/linkWithoutPrefetch';
+
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
+import styles from './passageNavigation.module.scss';
+
+type Chapter = NonNullable<PassageNavigationFragment['recordings']['nodes']>[0];
+
+type Props = {
+	chapters: Array<Chapter>;
+};
+
+export default function ChapterGrid({ chapters }: Props) {
+	return (
+		<li className={styles.chaptersWrapper}>
+			<ul className={styles.chapters}>
+				{chapters?.map((chapter) => {
+					const n = Number(chapter.title.split(' ').pop());
+					return (
+						<li key={n} className={styles.chapter}>
+							<Link href={chapter.canonicalPath}>{n}</Link>
+						</li>
+					);
+				})}
+			</ul>
+		</li>
+	);
+}