Add Bible picker flow and chapter navigation UI
This commit is contained in:
Adolfo Reyna
252
Views/BiblePicker.js
Normal file
252
Views/BiblePicker.js
Normal file
@@ -0,0 +1,252 @@
|
||||
import React from "react";
|
||||
import { FlatList, Pressable, View } from "react-native";
|
||||
import { ActivityIndicator, Button, Chip, Divider, Text, TextInput } from "react-native-paper";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { useSnapshot } from "valtio";
|
||||
import GlobalState from "../contexts/GlobalState.js";
|
||||
import { BIBLE_BOOKS, createBibleToken, fetchBiblePassage, getBookChapterCount } from "../utils/bibleReferences.js";
|
||||
|
||||
const BiblePicker = ({ route }) => {
|
||||
const navigation = useNavigation();
|
||||
const gState = useSnapshot(GlobalState);
|
||||
const target = route?.params?.target || "post";
|
||||
const [query, setQuery] = React.useState(route?.params?.initialReference || "");
|
||||
const [chapter, setChapter] = React.useState("1");
|
||||
const [verse, setVerse] = React.useState("1");
|
||||
const [selectedBook, setSelectedBook] = React.useState("");
|
||||
const [activeStep, setActiveStep] = React.useState("book");
|
||||
const [preview, setPreview] = React.useState(null);
|
||||
const [loadingPreview, setLoadingPreview] = React.useState(false);
|
||||
const [loadingVerses, setLoadingVerses] = React.useState(false);
|
||||
const [error, setError] = React.useState("");
|
||||
const [verseOptions, setVerseOptions] = React.useState(["1"]);
|
||||
const chapterSelectionTs = gState?.bibleChapterSelection?.ts;
|
||||
|
||||
const computedReference = React.useMemo(() => {
|
||||
if (query.trim()) return query.trim();
|
||||
if (!selectedBook) return "";
|
||||
return `${selectedBook} ${chapter || "1"}:${verse || "1"}`;
|
||||
}, [chapter, query, selectedBook, verse]);
|
||||
|
||||
const filteredBooks = React.useMemo(() => {
|
||||
const q = query.toLowerCase().trim();
|
||||
if (!q) return BIBLE_BOOKS;
|
||||
return BIBLE_BOOKS.filter((book) => book.toLowerCase().includes(q));
|
||||
}, [query]);
|
||||
|
||||
const selectedBookChapterCount = React.useMemo(() => getBookChapterCount(selectedBook), [selectedBook]);
|
||||
const chapterOptions = React.useMemo(
|
||||
() => Array.from({ length: selectedBookChapterCount }, (_v, i) => String(i + 1)),
|
||||
[selectedBookChapterCount]
|
||||
);
|
||||
|
||||
const addReferenceToCaller = (reference) => {
|
||||
const cleanReference = String(reference || "").trim();
|
||||
if (!cleanReference) return;
|
||||
GlobalState.biblePickerSelection = {
|
||||
token: createBibleToken(cleanReference),
|
||||
reference: cleanReference,
|
||||
target,
|
||||
ts: Date.now(),
|
||||
};
|
||||
navigation.goBack();
|
||||
};
|
||||
|
||||
const loadPreviewForReference = async (reference) => {
|
||||
if (!reference) return;
|
||||
setError("");
|
||||
setLoadingPreview(true);
|
||||
try {
|
||||
const passage = await fetchBiblePassage(reference);
|
||||
setPreview(passage);
|
||||
} catch (_err) {
|
||||
setPreview(null);
|
||||
setError("Unable to load this Bible passage.");
|
||||
} finally {
|
||||
setLoadingPreview(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadVerseOptions = async (book, chapterNumber) => {
|
||||
if (!book || !chapterNumber) {
|
||||
setVerseOptions(["1"]);
|
||||
return;
|
||||
}
|
||||
setLoadingVerses(true);
|
||||
try {
|
||||
const response = await fetch(`https://bible-api.com/${encodeURIComponent(`${book} ${chapterNumber}`)}`);
|
||||
if (!response.ok) throw new Error("Failed chapter fetch");
|
||||
const payload = await response.json();
|
||||
const options = Array.isArray(payload?.verses)
|
||||
? payload.verses.map((v) => String(v?.verse || "")).filter(Boolean)
|
||||
: [];
|
||||
setVerseOptions(options.length ? options : ["1"]);
|
||||
} catch (_error) {
|
||||
setVerseOptions(["1"]);
|
||||
} finally {
|
||||
setLoadingVerses(false);
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
const picked = gState?.bibleChapterSelection;
|
||||
if (!picked || !picked.book) return;
|
||||
setSelectedBook(picked.book);
|
||||
setChapter(String(picked.chapter || 1));
|
||||
setVerse(String(picked.verse || 1));
|
||||
setQuery("");
|
||||
setActiveStep("verse");
|
||||
loadVerseOptions(picked.book, String(picked.chapter || 1));
|
||||
loadPreviewForReference(picked.reference || `${picked.book} ${picked.chapter || 1}:${picked.verse || 1}`);
|
||||
GlobalState.bibleChapterSelection = null;
|
||||
}, [chapterSelectionTs]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, paddingHorizontal: 12, paddingTop: 12 }}>
|
||||
<Text style={{ fontSize: 22, fontWeight: "700", marginBottom: 6 }}>Bible Reference</Text>
|
||||
<Text style={{ color: "#6b7280", marginBottom: 10 }}>
|
||||
Pick a reference to insert into your {target === "chat" ? "chat message" : "post"}.
|
||||
</Text>
|
||||
|
||||
<TextInput
|
||||
mode="outlined"
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
placeholder="John 3:16"
|
||||
dense
|
||||
/>
|
||||
<View style={{ flexDirection: "row", marginTop: 8, justifyContent: "space-between" }}>
|
||||
<Button mode="outlined" onPress={() => loadPreviewForReference(computedReference)} loading={loadingPreview}>
|
||||
Preview
|
||||
</Button>
|
||||
<Button mode="contained" disabled={!computedReference} onPress={() => addReferenceToCaller(computedReference)}>
|
||||
Use Reference
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{computedReference ? <Text style={{ marginTop: 8, color: "#374151" }}>Selected: {computedReference}</Text> : null}
|
||||
{preview?.text ? (
|
||||
<Pressable
|
||||
onPress={() => navigation.navigate("BibleChapter", { reference: computedReference, selectable: true })}
|
||||
style={{ marginTop: 10, padding: 10, backgroundColor: "#f8fafc", borderRadius: 10 }}
|
||||
>
|
||||
<Text style={{ color: "#111827" }}>{preview.text.slice(0, 420)}</Text>
|
||||
<Text style={{ marginTop: 4, color: "#4b5563", fontSize: 12 }}>
|
||||
{preview.reference} ({preview.translation})
|
||||
</Text>
|
||||
<Text style={{ marginTop: 4, color: "#6b7280", fontSize: 12 }}>Tap preview to pick verse from chapter</Text>
|
||||
</Pressable>
|
||||
) : null}
|
||||
{error ? <Text style={{ marginTop: 8, color: "#b91c1c" }}>{error}</Text> : null}
|
||||
|
||||
<Divider style={{ marginVertical: 12 }} />
|
||||
|
||||
<View style={{ flexDirection: "row", marginBottom: 10 }}>
|
||||
<Button mode={activeStep === "book" ? "contained-tonal" : "text"} onPress={() => setActiveStep("book")}>
|
||||
Book
|
||||
</Button>
|
||||
<Button
|
||||
mode={activeStep === "chapter" ? "contained-tonal" : "text"}
|
||||
disabled={!selectedBook}
|
||||
onPress={() => setActiveStep("chapter")}
|
||||
>
|
||||
Chapter
|
||||
</Button>
|
||||
<Button
|
||||
mode={activeStep === "verse" ? "contained-tonal" : "text"}
|
||||
disabled={!selectedBook || !chapter}
|
||||
onPress={() => setActiveStep("verse")}
|
||||
>
|
||||
Verse
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{activeStep === "book" ? (
|
||||
<>
|
||||
<Text style={{ fontSize: 14, fontWeight: "600", marginBottom: 8 }}>Books</Text>
|
||||
<FlatList
|
||||
data={filteredBooks}
|
||||
numColumns={2}
|
||||
keyExtractor={(item) => item}
|
||||
renderItem={({ item }) => (
|
||||
<Chip
|
||||
selected={selectedBook === item}
|
||||
style={{ marginRight: 6, marginBottom: 6, width: "48%" }}
|
||||
onPress={async () => {
|
||||
setSelectedBook(item);
|
||||
setQuery("");
|
||||
setChapter("1");
|
||||
setVerse("1");
|
||||
setActiveStep("chapter");
|
||||
await loadVerseOptions(item, "1");
|
||||
await loadPreviewForReference(`${item} 1:1`);
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Chip>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{activeStep === "chapter" ? (
|
||||
<>
|
||||
<Text style={{ fontSize: 14, fontWeight: "600", marginBottom: 8 }}>
|
||||
Chapters {selectedBook ? `(${selectedBook})` : ""}
|
||||
</Text>
|
||||
<FlatList
|
||||
data={chapterOptions}
|
||||
numColumns={6}
|
||||
keyExtractor={(item) => item}
|
||||
renderItem={({ item }) => (
|
||||
<Chip
|
||||
selected={chapter === item}
|
||||
style={{ marginRight: 6, marginBottom: 6, minWidth: 44 }}
|
||||
onPress={async () => {
|
||||
setChapter(item);
|
||||
setVerse("1");
|
||||
setActiveStep("verse");
|
||||
await loadVerseOptions(selectedBook, item);
|
||||
await loadPreviewForReference(`${selectedBook} ${item}:1`);
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Chip>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{activeStep === "verse" ? (
|
||||
<>
|
||||
<Text style={{ fontSize: 14, fontWeight: "600", marginBottom: 8 }}>
|
||||
Verses {selectedBook && chapter ? `(${selectedBook} ${chapter})` : ""}
|
||||
</Text>
|
||||
{loadingVerses ? (
|
||||
<ActivityIndicator style={{ marginTop: 8 }} />
|
||||
) : (
|
||||
<FlatList
|
||||
data={verseOptions}
|
||||
numColumns={8}
|
||||
keyExtractor={(item) => item}
|
||||
renderItem={({ item }) => (
|
||||
<Chip
|
||||
selected={verse === item}
|
||||
style={{ marginRight: 6, marginBottom: 6, minWidth: 40 }}
|
||||
onPress={async () => {
|
||||
setVerse(item);
|
||||
await loadPreviewForReference(`${selectedBook} ${chapter || "1"}:${item}`);
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Chip>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default BiblePicker;
|
||||
Reference in New Issue
Block a user