diff --git a/index.html b/index.html index cbc1f5a..2b82da0 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,10 @@ - + - Vite + Preact + Open Bible App (NKJV)
diff --git a/package-lock.json b/package-lock.json index cfe2eb3..7cda3e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "@preact/signals": "^1.3.0", "preact": "^10.22.1", "preact-iso": "^2.8.1" }, @@ -1069,6 +1070,32 @@ "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": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/@prefresh/babel-plugin/-/babel-plugin-0.5.1.tgz", diff --git a/package.json b/package.json index 357fbaf..bf27e81 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "preview": "vite preview" }, "dependencies": { + "@preact/signals": "^1.3.0", "preact": "^10.22.1", "preact-iso": "^2.8.1" }, diff --git a/public/vite.svg b/public/bible.svg similarity index 100% rename from public/vite.svg rename to public/bible.svg diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 2cdd69a..41319e2 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,22 +1,35 @@ import { useLocation } from 'preact-iso'; import bible from '../nkjvbible' import { Dispatch, StateUpdater } from 'preact/hooks'; -export function Header({ book, setBook }: { book: string, setBook: Dispatch> }) { + +// 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 => ( +// +// )) +// ) +// } +export function Header({ storedBook, chapter, setChapter }: { storedBook: { + get: () => any; + set: (book: any) => void; +}, chapter: number, setChapter: Dispatch> }) { const { url } = useLocation(); return ( -
+
- {/* */} - storedBook.set(e.target.value)}> {bible.map(a => ( ))} + {/* */}
); } diff --git a/src/index.tsx b/src/index.tsx index 43d1952..887b931 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,16 +5,37 @@ import { Header } from './components/Header.jsx'; import { Home } from './pages/Home/index.jsx'; import { NotFound } from './pages/_404.jsx'; 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() { - 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 ( -
+
- +
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index f2ccb43..def0a60 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,13 +1,14 @@ import './style.css'; import bible from '../../nkjvbible'; 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>}) { - const [chapter, setChapter] = useState(0) +export function Home({storedBook, chapter, setChapter}: {storedBook: { + get: () => any; + set: (book: any) => void; +}, chapter: number, setChapter: Dispatch>}) { + console.log('chapter', chapter, 'book', storedBook.get()) return (
@@ -15,10 +16,10 @@ export function Home({book, setBook}: {book: string, setBook: Dispatch -

{book}

+

{storedBook.get()}

- {bible.find(a => a.name == book).chapters[chapter].verses.map(verse => ( -

+ {bible.find(a => a.name == storedBook.get()).chapters[chapter].verses.map(verse => ( +

{verse.num}: {verse.text}

))} diff --git a/src/style.css b/src/style.css index aed4d94..6dffd2c 100644 --- a/src/style.css +++ b/src/style.css @@ -71,7 +71,7 @@ main { select { background-color: #A2D2DF; - color: white; + color: #1a1a1a; font-weight: 500; font-size: x-large; width: 100%;