From e04ae5c2a5a79b27bb7760d99b3e9b72d12bf243 Mon Sep 17 00:00:00 2001
From: Jake Coble <j@kecoble.com>
Date: Thu, 19 Dec 2024 10:32:16 -0500
Subject: [PATCH] Properly update the selected chapter in the chapter grid

---
 .../organisms/passageNavigation/bookGrid.tsx      | 12 +++++++++---
 .../organisms/passageNavigation/bookList.tsx      | 12 +++++++++---
 .../organisms/passageNavigation/chapterGrid.tsx   | 15 ++++-----------
 .../organisms/passageNavigation/index.tsx         |  3 +++
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/organisms/passageNavigation/bookGrid.tsx b/src/components/organisms/passageNavigation/bookGrid.tsx
index 3eb2c100b..01421d054 100644
--- a/src/components/organisms/passageNavigation/bookGrid.tsx
+++ b/src/components/organisms/passageNavigation/bookGrid.tsx
@@ -2,16 +2,22 @@ import clsx from 'clsx';
 import React from 'react';
 
 import { PassageNavigationFragment } from './__generated__/index';
-import ChapterGrid from './chapterGrid';
+import ChapterGrid, { ChapterId } from './chapterGrid';
 import styles from './index.module.scss';
 
 type Props = {
 	books: Array<PassageNavigationFragment>;
 	selectedBook: string | number | null;
 	selectBook: (id: string | number | null) => void;
+	chapterId: ChapterId;
 };
 
-export default function BookGrid({ books, selectedBook, selectBook }: Props) {
+export default function BookGrid({
+	books,
+	selectedBook,
+	selectBook,
+	chapterId,
+}: Props) {
 	return (
 		<ul className={clsx(styles.books, styles.grid)}>
 			{books.map((book) => {
@@ -30,7 +36,7 @@ export default function BookGrid({ books, selectedBook, selectBook }: Props) {
 							</button>
 						</li>
 						{book.id === selectedBook && chapters && (
-							<ChapterGrid chapters={chapters} />
+							<ChapterGrid chapters={chapters} chapterId={chapterId} />
 						)}
 					</>
 				);
diff --git a/src/components/organisms/passageNavigation/bookList.tsx b/src/components/organisms/passageNavigation/bookList.tsx
index 82acdfca8..017e1ff43 100644
--- a/src/components/organisms/passageNavigation/bookList.tsx
+++ b/src/components/organisms/passageNavigation/bookList.tsx
@@ -2,16 +2,22 @@ import clsx from 'clsx';
 import React from 'react';
 
 import { PassageNavigationFragment } from './__generated__/index';
-import ChapterGrid from './chapterGrid';
+import ChapterGrid, { ChapterId } from './chapterGrid';
 import styles from './index.module.scss';
 
 type Props = {
 	books: Array<PassageNavigationFragment>;
 	selectedBook: string | number | null;
 	selectBook: (id: string | number | null) => void;
+	chapterId: ChapterId;
 };
 
-export default function BookList({ books, selectedBook, selectBook }: Props) {
+export default function BookList({
+	books,
+	selectedBook,
+	selectBook,
+	chapterId,
+}: Props) {
 	return (
 		<ul className={clsx(styles.books)}>
 			{books.map((book) => {
@@ -28,7 +34,7 @@ export default function BookList({ books, selectedBook, selectBook }: Props) {
 							<button onClick={() => selectBook(book.id)}>{book.title}</button>
 						</li>
 						{book.id === selectedBook && chapters && (
-							<ChapterGrid chapters={chapters} />
+							<ChapterGrid chapters={chapters} chapterId={chapterId} />
 						)}
 					</>
 				);
diff --git a/src/components/organisms/passageNavigation/chapterGrid.tsx b/src/components/organisms/passageNavigation/chapterGrid.tsx
index 131848953..a87266d42 100644
--- a/src/components/organisms/passageNavigation/chapterGrid.tsx
+++ b/src/components/organisms/passageNavigation/chapterGrid.tsx
@@ -1,24 +1,19 @@
 import React from 'react';
 
 import Link from '~components/atoms/linkWithoutPrefetch';
-import { useLocalStorage } from '~src/lib/hooks/useLocalStorage';
 
 import { PassageNavigationFragment } from './__generated__/index';
 import styles from './index.module.scss';
 
 type Chapter = NonNullable<PassageNavigationFragment['recordings']['nodes']>[0];
-type ChapterId = Chapter['id'];
+export type ChapterId = Chapter['id'] | null;
 
 type Props = {
 	chapters: Array<Chapter>;
+	chapterId: ChapterId;
 };
 
-export default function ChapterGrid({ chapters }: Props) {
-	const [selectedChapterId] = useLocalStorage<ChapterId | null>(
-		'selectedChapterId',
-		null,
-	);
-
+export default function ChapterGrid({ chapters, chapterId }: Props) {
 	return (
 		<li className={styles.chaptersWrapper}>
 			<ul className={styles.chapters}>
@@ -27,9 +22,7 @@ export default function ChapterGrid({ chapters }: Props) {
 					return (
 						<li key={n} className={styles.chapter}>
 							<Link
-								className={
-									chapter.id === selectedChapterId ? styles.active : ''
-								}
+								className={chapter.id === chapterId ? styles.active : ''}
 								href={chapter.canonicalPath}
 							>
 								{n}
diff --git a/src/components/organisms/passageNavigation/index.tsx b/src/components/organisms/passageNavigation/index.tsx
index af3e488c4..53d40d8f6 100644
--- a/src/components/organisms/passageNavigation/index.tsx
+++ b/src/components/organisms/passageNavigation/index.tsx
@@ -216,6 +216,7 @@ export default function PassageNavigation({
 							books={books}
 							selectedBook={selectedBookId}
 							selectBook={setSelectedBookId}
+							chapterId={selectedChapterId}
 						/>
 					) : (
 						<>
@@ -225,6 +226,7 @@ export default function PassageNavigation({
 								)}
 								selectedBook={selectedBookId}
 								selectBook={setSelectedBookId}
+								chapterId={selectedChapterId}
 							/>
 							<BookGrid
 								books={books.filter(
@@ -232,6 +234,7 @@ export default function PassageNavigation({
 								)}
 								selectedBook={selectedBookId}
 								selectBook={setSelectedBookId}
+								chapterId={selectedChapterId}
 							/>
 						</>
 					)}