Add Bible picker flow and chapter navigation UI
This commit is contained in:
@@ -8,6 +8,8 @@ import { useSnapshot } from "valtio";
|
||||
import API from "../API.js";
|
||||
import GlobalState from "../contexts/GlobalState.js";
|
||||
import i18n from "../i18nMessages.js";
|
||||
import BibleEmbeddedView from "../components/BibleEmbeddedView.js";
|
||||
import { stripBibleTokens } from "../utils/bibleReferences.js";
|
||||
|
||||
const PANEL_WIDTH = 260;
|
||||
|
||||
@@ -59,7 +61,8 @@ const CircleIconAction = ({ icon, onPress, color = "#6b7280", disabled = false }
|
||||
const ChatMessage = ({ item, myProfileId, showOriginal, onPressIn, onPressOut }) => {
|
||||
const isMine = item?.senderProfileId === myProfileId;
|
||||
const isTranslated = !!(item?.textOriginal && item?.text && item.textOriginal !== item.text);
|
||||
const messageText = isTranslated && showOriginal ? item?.textOriginal : item?.text;
|
||||
const messageTextRaw = isTranslated && showOriginal ? item?.textOriginal : item?.text;
|
||||
const messageText = stripBibleTokens(messageTextRaw || "");
|
||||
const youtubeVideoId = getYouTubeVideoIdFromText(item?.textOriginal || "") || getYouTubeVideoIdFromText(item?.text || "");
|
||||
const createdAt = item?.createdAt ? new Date(item.createdAt) : null;
|
||||
return (
|
||||
@@ -90,6 +93,9 @@ const ChatMessage = ({ item, myProfileId, showOriginal, onPressIn, onPressOut })
|
||||
{createdAt && !Number.isNaN(createdAt.getTime()) ? createdAt.toLocaleTimeString() : ""}
|
||||
</Text>
|
||||
</Pressable>
|
||||
<View style={{ maxWidth: "85%", paddingTop: 4 }}>
|
||||
<BibleEmbeddedView content={item?.textOriginal || item?.text || ""} compact />
|
||||
</View>
|
||||
{youtubeVideoId ? (
|
||||
<View
|
||||
style={{
|
||||
@@ -118,7 +124,7 @@ const ChatMessage = ({ item, myProfileId, showOriginal, onPressIn, onPressOut })
|
||||
);
|
||||
};
|
||||
|
||||
let GlobalChat = () => {
|
||||
let GlobalChat = ({ navigation }) => {
|
||||
const gState = useSnapshot(GlobalState);
|
||||
const myProfileId = gState?.me?._id || "";
|
||||
const [messages, setMessages] = React.useState([]);
|
||||
@@ -133,6 +139,7 @@ let GlobalChat = () => {
|
||||
const panelOpacity = React.useRef(new Animated.Value(0)).current;
|
||||
const listRef = React.useRef(null);
|
||||
const hasDoneInitialScrollRef = React.useRef(false);
|
||||
const biblePickerSelectionTs = gState?.biblePickerSelection?.ts;
|
||||
|
||||
const scrollToBottom = React.useCallback((animated = true) => {
|
||||
if (!listRef.current) return;
|
||||
@@ -188,6 +195,16 @@ let GlobalChat = () => {
|
||||
};
|
||||
}, [loadMessages, refreshPresence]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const selection = gState?.biblePickerSelection;
|
||||
if (!selection || selection.target !== "chat" || !selection.token) return;
|
||||
setText((prev) => {
|
||||
if ((prev || "").includes(selection.token)) return prev;
|
||||
return `${(prev || "").trim()} ${selection.token}`.trim();
|
||||
});
|
||||
GlobalState.biblePickerSelection = null;
|
||||
}, [biblePickerSelectionTs, gState?.biblePickerSelection]);
|
||||
|
||||
const sendMessage = async () => {
|
||||
const trimmedText = (text || "").trim();
|
||||
if (!trimmedText || sending) return;
|
||||
@@ -343,7 +360,7 @@ let GlobalChat = () => {
|
||||
elevation: 2,
|
||||
}}
|
||||
>
|
||||
<CircleIconAction icon="add" onPress={() => { }} />
|
||||
<CircleIconAction icon="add" onPress={() => navigation.navigate("BiblePicker", { target: "chat" })} />
|
||||
<View style={{ flex: 1, paddingRight: 2 }}>
|
||||
<TextInput
|
||||
mode="flat"
|
||||
|
||||
Reference in New Issue
Block a user