From 759fb210a41fc63134a694f89409ebb84e8e6189 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Tue, 26 Nov 2024 15:00:29 -0500
Subject: [PATCH] work on passageNavigation

---
 .eslintignore                                 |  3 +-
 .../organisms/passageNavigation.graphql       | 14 ++++++++
 .../organisms/passageNavigation.module.scss   | 34 +++++++++----------
 .../organisms/passageNavigation.tsx           | 29 +++++++---------
 src/containers/bible/index.graphql            |  0
 tsconfig.json                                 |  2 +-
 6 files changed, 47 insertions(+), 35 deletions(-)
 create mode 100644 src/components/organisms/passageNavigation.graphql
 create mode 100644 src/containers/bible/index.graphql

diff --git a/.eslintignore b/.eslintignore
index 2ede846d1..966d5340b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,4 +3,5 @@
 **/*.js
 /graphql-codegen/dist
 /node_modules
-schema.graphql
\ No newline at end of file
+schema.graphql
+**/*.graphql
\ No newline at end of file
diff --git a/src/components/organisms/passageNavigation.graphql b/src/components/organisms/passageNavigation.graphql
new file mode 100644
index 000000000..1ef0e9100
--- /dev/null
+++ b/src/components/organisms/passageNavigation.graphql
@@ -0,0 +1,14 @@
+fragment passageNavigation on BibleConnection {
+	nodes {
+		title
+		books {
+			title
+			chapters {
+				title
+			}
+		}
+	}
+	aggregate {
+		count
+	}
+}
diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
index 686640f47..333b0cf71 100644
--- a/src/components/organisms/passageNavigation.module.scss
+++ b/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;
-}
\ No newline at end of file
+	color: $ts-salmon;
+}
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
index d84ec31a9..9fd4ded9e 100644
--- a/src/components/organisms/passageNavigation.tsx
+++ b/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>
 	);
diff --git a/src/containers/bible/index.graphql b/src/containers/bible/index.graphql
new file mode 100644
index 000000000..e69de29bb
diff --git a/tsconfig.json b/tsconfig.json
index ef11cf5c2..1a01c5d67 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,6 @@
 		},
 		"incremental": true
 	},
-	"exclude": ["./*.js"],
+	"exclude": ["./*.js", "**/*.graphql"],
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }