mikeconrad/openbibleapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaned up functions and chapter/book heading

Browse Source
This commit is contained in:
Mike Conrad
2024-10-21 11:42:25 -04:00
parent 622fc039bc
commit 0c44afc3b3
3 changed files with 48 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Header.tsx
View File

@ -2,34 +2,37 @@ import { useLocation } from 'preact-iso';
import bible from '../nkjvbible'
import { Dispatch, StateUpdater } from 'preact/hooks';
// function SelectChapters(book){
// let chapters = []
// for (let i = 0; i < bible.find(a => a.name == book).chapters.length; i++) {
// chapters.push(i)
// }
// return (
// chapters.map(a => (
// <option key={a} value={a}>{a + 1}</option>
// ))
// )
// }
export function Header({ storedBook, chapter, setChapter }: { storedBook: {
function SelectChapters(book){
let chapters = []
for (let i = 0; i < bible.find(a => a.name == book).chapters.length; i++) {
chapters.push(i)
}
return (
chapters.map(a => (
<option key={a} value={a}>{a + 1}</option>
))
)
}
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)}>
{SelectChapters(storedBook)}
</select> */}
<select value={chapter.get()} onChange={(e) => chapter.set(e.target.value)}>
{SelectChapters(book.get())}
</select>
</header>
);
}

26
src/index.tsx
View File

@ -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()
const [chapter, setChapter] = useState(0)
const [savedBook, setSavedBook] = useState("")
let storedBook = (function() {
let book = (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>

26
src/pages/Home/index.tsx
View File

@ -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({storedBook, chapter, setChapter}: {storedBook: {
export function Home({book, chapter}: {book: {
get: () => any;
set: (book: any) => void;
}, chapter: number, setChapter: Dispatch<StateUpdater<number>>}) {
console.log('chapter', chapter, 'book', storedBook.get())
}, chapter: {
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 => (
<p style={{ textAlign: 'left', margin: '0px 0px' }} id={`${storedBook.get()}-${chapter + 1}-${verse.num}`} key={`${storedBook.get()}-${chapter}-${verse.num}`}>
{bible.find(a => a.name == book.get()).chapters[chapter.get()].verses.map(verse => (
<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>
);
}