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

Make book selection persistent with signals

Browse Source
This commit is contained in:
Mike Conrad
2024-10-21 11:21:40 -04:00
parent 16804b8cfd
commit 622fc039bc
8 changed files with 86 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -2,10 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/bible.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<title>Vite + Preact</title> <title>Open Bible App (NKJV)</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

27
package-lock.json generated
View File

@ -5,6 +5,7 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"@preact/signals": "^1.3.0",
"preact": "^10.22.1", "preact": "^10.22.1",
"preact-iso": "^2.8.1" "preact-iso": "^2.8.1"
}, },
@ -1069,6 +1070,32 @@
"vite": "2.x || 3.x || 4.x || 5.x" "vite": "2.x || 3.x || 4.x || 5.x"
} }
}, },
"node_modules/@preact/signals": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.3.0.tgz",
"integrity": "sha512-EOMeg42SlLS72dhoq6Vjq08havnLseWmPQ8A0YsgIAqMgWgx7V1a39+Pxo6i7SY5NwJtH4849JogFq3M67AzWg==",
"license": "MIT",
"dependencies": {
"@preact/signals-core": "^1.7.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
},
"peerDependencies": {
"preact": "10.x"
}
},
"node_modules/@preact/signals-core": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz",
"integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
}
},
"node_modules/@prefresh/babel-plugin": { "node_modules/@prefresh/babel-plugin": {
"version": "0.5.1", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/@prefresh/babel-plugin/-/babel-plugin-0.5.1.tgz", "resolved": "https://registry.npmjs.org/@prefresh/babel-plugin/-/babel-plugin-0.5.1.tgz",

1
package.json
View File

@ -7,6 +7,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@preact/signals": "^1.3.0",
"preact": "^10.22.1", "preact": "^10.22.1",
"preact-iso": "^2.8.1" "preact-iso": "^2.8.1"
}, },

0
public/vite.svg → public/bible.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 479 B

After

Width:  |  Height:  |  Size: 479 B

27
src/components/Header.tsx
View File

@ -1,22 +1,35 @@
import { useLocation } from 'preact-iso'; import { useLocation } from 'preact-iso';
import bible from '../nkjvbible' import bible from '../nkjvbible'
import { Dispatch, StateUpdater } from 'preact/hooks'; import { Dispatch, StateUpdater } from 'preact/hooks';
export function Header({ book, setBook }: { book: string, setBook: Dispatch<StateUpdater<string>> }) {
// 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: {
get: () => any;
set: (book: any) => void;
}, chapter: number, setChapter: Dispatch<StateUpdater<number>> }) {
const { url } = useLocation(); const { url } = useLocation();
return ( return (
<header style={{ justifyContent: "space-between", minHeight: "50px" }}> <header style={{ justifyContent: "space-between", minHeight: "50px" }}>
{/* <nav> <select value={storedBook.get()} onChange={(e) => storedBook.set(e.target.value)}>
<a href="/" class={url == '/' && 'active'}>
Home
</a>
</nav> */}
<select value={book} onChange={(e) => setBook(e.target.value)}>
{bible.map(a => ( {bible.map(a => (
<option key={a.name} value={a.name}>{a.name}</option> <option key={a.name} value={a.name}>{a.name}</option>
))} ))}
</select> </select>
{/* <select value={chapter} onChange={(e) => setChapter(e.target.value)}>
{SelectChapters(storedBook)}
</select> */}
</header> </header>
); );
} }

29
src/index.tsx
View File

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

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

@ -1,13 +1,14 @@
import './style.css'; import './style.css';
import bible from '../../nkjvbible'; import bible from '../../nkjvbible';
import { Dispatch, StateUpdater, useState } from 'preact/hooks'; import { Dispatch, StateUpdater, useState } from 'preact/hooks';
import { useRoute } from 'preact-iso';
export function Verses(chapter) {
}
export function Home({book, setBook}: {book: string, setBook: Dispatch<StateUpdater<string>>}) {
const [chapter, setChapter] = useState(0)
export function Home({storedBook, chapter, setChapter}: {storedBook: {
get: () => any;
set: (book: any) => void;
}, chapter: number, setChapter: Dispatch<StateUpdater<number>>}) {
console.log('chapter', chapter, 'book', storedBook.get())
return ( return (
<div class="home"> <div class="home">
<a href="https://preactjs.com" target="_blank"> <a href="https://preactjs.com" target="_blank">
@ -15,10 +16,10 @@ export function Home({book, setBook}: {book: string, setBook: Dispatch<StateUpda
<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' /> <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> </svg>
</a> </a>
<h1 style={{ color: "#A2D2DF"}}>{book}</h1> <h1 style={{ color: "#A2D2DF"}}>{storedBook.get()}</h1>
<section> <section>
{bible.find(a => a.name == book).chapters[chapter].verses.map(verse => ( {bible.find(a => a.name == storedBook.get()).chapters[chapter].verses.map(verse => (
<p style={{ textAlign: 'left', margin: '0px 0px' }} id={`${book}-${chapter}-${verse.num}`} key={`${book}-${chapter}-${verse.num}`}> <p style={{ textAlign: 'left', margin: '0px 0px' }} id={`${storedBook.get()}-${chapter + 1}-${verse.num}`} key={`${storedBook.get()}-${chapter}-${verse.num}`}>
<strong>{verse.num}</strong>: {verse.text} <strong>{verse.num}</strong>: {verse.text}
</p> </p>
))} ))}

2
src/style.css
View File

@ -71,7 +71,7 @@ main {
select { select {
background-color: #A2D2DF; background-color: #A2D2DF;
color: white; color: #1a1a1a;
font-weight: 500; font-weight: 500;
font-size: x-large; font-size: x-large;
width: 100%; width: 100%;