Properly update the selected chapter in the chapter grid

audioverse-org · Dec 19, 2024 · e04ae5c · e04ae5c
1 parent 0f69c39
commit e04ae5c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -216,6 +216,7 @@ export default function PassageNavigation({
 							books={books}
 							selectedBook={selectedBookId}
 							selectBook={setSelectedBookId}
+							chapterId={selectedChapterId}
 						/>
 					) : (
 						<>
@@ -225,13 +226,15 @@ export default function PassageNavigation({
 								)}
 								selectedBook={selectedBookId}
 								selectBook={setSelectedBookId}
+								chapterId={selectedChapterId}
 							/>
 							<BookGrid
 								books={books.filter(
 									(book) => !OT.includes(book.title.toLocaleLowerCase()),
 								)}
 								selectedBook={selectedBookId}
 								selectBook={setSelectedBookId}
+								chapterId={selectedChapterId}
 							/>
 						</>
 					)}