work on passageNavigation

.eslintignore

@@ -3,4 +3,5 @@
 **/*.js
 /graphql-codegen/dist
 /node_modules
-schema.graphql
+schema.graphql
+**/*.graphql

src/components/organisms/passageNavigation.graphql

@@ -0,0 +1,14 @@
+fragment passageNavigation on BibleConnection {
+	nodes {
+		title
+		books {
+			title
+			chapters {
+				title
+			}
+		}
+	}
+	aggregate {
+		count
+	}
+}

src/components/organisms/passageNavigation.module.scss

@@ -1,40 +1,40 @@
 @import '../../styles/common.scss';
 
 .wrapper {
-    display: flex;
-    background-color: $ts-bibleVersionH;
+	display: flex;
+	background-color: $ts-bibleVersionH;
 }
 
 .wrapper ul {
-    margin: 0;
-    padding: 0;
+	margin: 0;
+	padding: 0;
 }
 
 .wrapper button {
-    background: none;
-    border: none;
-    padding: 10px 24px;
+	background: none;
+	border: none;
+	padding: 10px 24px;
 }
 
 .wrapper li:first-child button {
-    padding-top: 16px;
+	padding-top: 16px;
 }
 
 .wrapper li:last-child button {
-    padding-bottom: 16px;
+	padding-bottom: 16px;
 }
 
 .wrapper li,
 .wrapper li button {
-    color: $ts-lightTone;
-    font-weight: 700;
-    size: 16px;
-    line-height: 19.2px;
-    text-transform: uppercase;
-    list-style-type: none;
+	color: $ts-lightTone;
+	font-weight: 700;
+	size: 16px;
+	line-height: 19.2px;
+	text-transform: uppercase;
+	list-style-type: none;
 }
 
 .wrapper :global(.active),
 .wrapper :global(.active) button {
-    color: $ts-salmon;
-}
+	color: $ts-salmon;
+}

src/components/organisms/passageNavigation.tsx

@@ -1,25 +1,23 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
+import { BIBLE_BOOKS } from '../../lib/constants';
+import { PassageNavigationFragment } from './__generated__/passageNavigation';
 import styles from './passageNavigation.module.scss';
 
-// TODO: Fetch from FCBH API probably
-const books: Record<string, Array<number>> = {
-	Genesis: [1, 2],
-	Exodus: [1, 2, 3],
-	Leviticus: [1, 2, 3],
-	Numbers: [1, 2, 3],
-	Deuteronomy: [1, 2, 3, 5],
-	Joshua: [1, 2, 3],
+type Props = {
+	data: PassageNavigationFragment;
 };
 
-export default function PassageNavigation(): JSX.Element {
+export default function PassageNavigation(props: Props): JSX.Element {
 	const [selectedBook, setSelectedBook] = useState<string | null>(null);
 
+	const chapters = props.data.nodes[0];
+
 	return (
 		<div className={styles.wrapper}>
 			<ul>
-				{Object.keys(books).map((book) => (
+				{BIBLE_BOOKS.map((book) => (
 					<li key={book} className={clsx({ active: book === selectedBook })}>
 						<button
 							onClick={() => {
@@ -32,12 +30,11 @@ export default function PassageNavigation(): JSX.Element {
 				))}
 			</ul>
 			<ul>
-				{selectedBook &&
-					books[selectedBook].map((chapter) => (
-						<li key={chapter}>
-							<button>{chapter}</button>
-						</li>
-					))}
+				{chapters?.chapters.map((chapter) => (
+					<li key={chapter}>
+						<button>{chapter}</button>
+					</li>
+				))}
 			</ul>
 		</div>
 	);

tsconfig.json

@@ -32,6 +32,6 @@
 		},
 		"incremental": true
 	},
-	"exclude": ["./*.js"],
+	"exclude": ["./*.js", "**/*.graphql"],
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }