Cleaned up functions and chapter/book heading

src/components/Header.tsx

@@ -2,34 +2,37 @@ import { useLocation } from 'preact-iso';
 import bible from '../nkjvbible'
 import { Dispatch, StateUpdater } from 'preact/hooks';
 
-// function SelectChapters(book){
+function SelectChapters(book){
-// 	let chapters = []
+	let chapters = []
-// 	for (let i = 0; i < bible.find(a => a.name == book).chapters.length; i++) {
+	for (let i = 0; i < bible.find(a => a.name == book).chapters.length; i++) {
-// 		chapters.push(i)
+		chapters.push(i)
-// 	}
+	}
-// 	return (
+	return (
-// 		chapters.map(a => (
+		chapters.map(a => (
-// 			<option key={a} value={a}>{a + 1}</option>
+			<option key={a} value={a}>{a + 1}</option>
-// 		))
+		))
-// 	)
+	)
-// }
+}
-export function Header({ storedBook, chapter, setChapter }: { storedBook: {
+export function Header({ book, chapter }: { book: {
     get: () => any;
     set: (book: any) => void;
-}, chapter: number, setChapter: Dispatch<StateUpdater<number>> }) {
+}, chapter: {
+    get: () => number;
+    set: (chapter: any) => void;
+} }) {
 	const { url } = useLocation();
 
 	return (
 		<header style={{ justifyContent: "space-between", minHeight: "50px" }}>
 
-			<select value={storedBook.get()} onChange={(e) => storedBook.set(e.target.value)}>
+			<select value={book.get()} onChange={(e) => book.set(e.target.value)}>
 				{bible.map(a => (
 					<option key={a.name} value={a.name}>{a.name}</option>
 				))}
 			</select>
-			{/* <select value={chapter} onChange={(e) => setChapter(e.target.value)}>
+			<select value={chapter.get()} onChange={(e) => chapter.set(e.target.value)}>
-					{SelectChapters(storedBook)}
+					{SelectChapters(book.get())}
-			</select> */}
+			</select>
 		</header>
 	);
 }

src/index.tsx

@@ -5,16 +5,12 @@ import { Header } from './components/Header.jsx';
 import { Home } from './pages/Home/index.jsx';
 import { NotFound } from './pages/_404.jsx';
 import './style.css';
-import  bible from './nkjvbible.js'
+
-import { useEffect, useState } from 'preact/hooks';
 import { signal } from "@preact/signals";
 
 
 export function App() {
-	const [book, setBook] = useState()
+	let book = (function() {
-	const [chapter, setChapter] = useState(0)
-	const [savedBook, setSavedBook] = useState("")
-	let storedBook = (function() {
 	// The reactive data
 		let state = signal(localStorage.getItem('book') || 'Genesis');
 
@@ -29,13 +25,27 @@ export function App() {
 
 		return {get, set}
 	}())
-
+	let chapter = (function() {
+		// The reactive data
+			let state = signal(localStorage.getItem('chapter') || 0);
+	
+			function get () {
+				return +state.value;
+			}
+	
+			function set (chapter) {
+				state.value = chapter;
+				localStorage.setItem("chapter", chapter)
+			}
+	
+			return {get, set}
+		}())
 	return (
 		<LocationProvider>
-			<Header storedBook={storedBook} chapter={chapter} setChapter={setChapter} />
+			<Header book={book} chapter={chapter} />
 			<main>
 				<Router>
-					<Route path="/" component={Home} storedBook={storedBook} chapter={chapter} setChapter={setChapter} />
+					<Route path="/" component={Home} book={book} chapter={chapter} />
 					<Route default component={NotFound} />
 				</Router>
 			</main>

src/pages/Home/index.tsx

@@ -1,14 +1,14 @@
 import './style.css';
 import bible from '../../nkjvbible';
-import { Dispatch, StateUpdater, useState } from 'preact/hooks';
-import { useRoute } from 'preact-iso';
 
-
+export function Home({book, chapter}: {book: {
-export function Home({storedBook, chapter, setChapter}: {storedBook: {
     get: () => any;
     set: (book: any) => void;
-}, chapter: number, setChapter: Dispatch<StateUpdater<number>>}) {
+}, chapter: {
-	console.log('chapter', chapter, 'book', storedBook.get())
+    get: () => number;
+    set: (chapter: any) => void;
+}}) {
+
 	return (
 		<div class="home">
 			<a href="https://preactjs.com" target="_blank">
@@ -16,10 +16,10 @@ export function Home({storedBook, chapter, setChapter}: {storedBook: {
 					<path d='M5 20.25c0 .414.336.75.75.75h10.652C17.565 21 18 20.635 18 19.4v-1.445M5 20.25A2.25 2.25 0 0 1 7.25 18h10.152c.226 0 .425-.014.598-.045M5 20.25V6.2c0-1.136-.072-2.389 1.092-2.982C6.52 3 7.08 3 8.2 3h9.2c1.236 0 1.6.437 1.6 1.6v11.8c0 .995-.282 1.425-1 1.555M9.5 10h5M12 7.5v5' />
 				</svg>
 			</a>
-			<h1 style={{ color: "#A2D2DF"}}>{storedBook.get()}</h1>
+			<h1 style={{ color: "#A2D2DF"}}>{`${book.get()} ${+chapter.get() + 1}: 1-${bible.find(a => a.name == book.get()).chapters.length}`}</h1>
 			<section>
-				{bible.find(a => a.name == storedBook.get()).chapters[chapter].verses.map(verse => (
+				{bible.find(a => a.name == book.get()).chapters[chapter.get()].verses.map(verse => (
-					<p style={{ textAlign: 'left', margin: '0px 0px' }} id={`${storedBook.get()}-${chapter + 1}-${verse.num}`} key={`${storedBook.get()}-${chapter}-${verse.num}`}>
+					<p style={{ textAlign: 'left', margin: '0px 0px' }} id={`${book.get()}-${chapter.get() + 1}-${verse.num}`} key={`${book.get()}-${chapter.get()}-${verse.num}`}>
 						<strong>{verse.num}</strong>: {verse.text}
 					</p>
 				))}
@@ -28,11 +28,3 @@ export function Home({storedBook, chapter, setChapter}: {storedBook: {
 	);
 }
 
-function Resource(props) {
-	return (
-		<a href={props.href} target="_blank" class="resource">
-			<h2>{props.title}</h2>
-			<p>{props.description}</p>
-		</a>
-	);
-}