Add Bible picker flow and chapter navigation UI

Views/NewPost.js

@@ -1,31 +1,36 @@
 import React, { useEffect, useState } from 'react';
 import { View, TextInput, Image, ScrollView } from "react-native";
-import { Text, Button, Divider } from "react-native-paper";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Text, Button, Divider, Chip } from "react-native-paper";
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
 import * as ImagePicker from 'expo-image-picker';
 import i18n from "../i18nMessages";
 import Media from '../components/Media';
 import { Platform } from 'react-native';
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
+import { createBibleToken, extractBibleReferences, stripBibleTokens } from '../utils/bibleReferences.js';
 
 const BATCH_SIZE = 1; // Constant for batch size
 
 let NewPostView = (props) => {
+    const gState = useSnapshot(GlobalState);
     let [postContent, setPostContent] = useState('');
-    let initialContent = props.route.params.intialContent;
-    let [extraContent, setExtraContent] = useState([initialContent]);
+    let initialContent = props.route?.params?.intialContent;
+    let [extraContent, setExtraContent] = useState(initialContent ? [initialContent] : []);
     let [toProfile, setToProfile] = useState([]);
     const [photo, setPhoto] = useState(null);
     const [uploadProgress, setUploadProgress] = useState(0);
     const [isUploading, setIsUploading] = useState(false); // Variable to prevent posting during upload
     const [cancelUpload, setCancelUpload] = useState(false); // Variable to handle upload cancellation
+    const [bibleReferences, setBibleReferences] = useState([]);
     const navigation = useNavigation();
+    const biblePickerSelectionTs = gState?.biblePickerSelection?.ts;
 
     useEffect(() => {
         let subscribed = true;
         const getProfileData = async () => {
-            if (!props.route.params?.toProfile) return;
+            if (!props.route?.params?.toProfile) return;
             try {
                 // Fetch profile data and update state if component is still subscribed
                 const profileObj = await API.getUserProfile(props.route.params.toProfile);
@@ -44,7 +49,31 @@ let NewPostView = (props) => {
             // Cleanup subscription flag
             subscribed = false;
         }
-    }, [props.route.params?.sendNow]);
+    }, [props.route?.params?.sendNow]);
+
+    useEffect(() => {
+        const selection = gState?.biblePickerSelection;
+        if (!selection || selection.target !== "post" || !selection.token) return;
+        if (selection.reference) {
+            setBibleReferences((prev) => {
+                if (prev.includes(selection.reference)) return prev;
+                return prev.concat(selection.reference);
+            });
+        }
+        GlobalState.biblePickerSelection = null;
+    }, [biblePickerSelectionTs]);
+
+    const handlePostContentChange = (nextValue = "") => {
+        const detectedReferences = extractBibleReferences(nextValue);
+        if (detectedReferences.length) {
+            setBibleReferences((prev) => {
+                const seen = new Set(prev);
+                detectedReferences.forEach((reference) => seen.add(reference));
+                return Array.from(seen);
+            });
+        }
+        setPostContent(stripBibleTokens(nextValue));
+    };
 
     const pickImage = async () => {
         try {
@@ -142,10 +171,15 @@ let NewPostView = (props) => {
             return;
         }
         try {
+            const bibleTokens = bibleReferences.map((reference) => createBibleToken(reference)).filter(Boolean);
             // Create a new post with the combined content
-            await API.newPost(postContent + " " + extraContent.join(" "), props.route.params?.toProfile);
+            await API.newPost(
+                [postContent, extraContent.join(" "), bibleTokens.join(" ")].join(" ").trim(),
+                props.route?.params?.toProfile
+            );
             setPostContent(''); // Clear post content after submission
             setExtraContent([]); // Clear extra content after submission
+            setBibleReferences([]);
             navigation.navigate('Feed', { reRender: Math.random() }); // Navigate back to the Feed and trigger re-render
         } catch (error) {
             console.error("Error creating new post", error);
@@ -177,7 +211,7 @@ let NewPostView = (props) => {
                 {/* Text input for post content */}
                 <TextInput
                     value={postContent}
-                    onChangeText={setPostContent}
+                    onChangeText={handlePostContentChange}
                     placeholder={i18n.t("message.whatIsOnYourMindToday")}
                     multiline={true}
                     numberOfLines={8}
@@ -190,9 +224,32 @@ let NewPostView = (props) => {
                     }}
                     autoFocus={true}
                 />
+                {bibleReferences.length ? (
+                    <View style={{ flexDirection: "row", flexWrap: "wrap", marginTop: 8, marginHorizontal: 8 }}>
+                        {bibleReferences.map((reference) => (
+                            <Chip
+                                key={reference}
+                                style={{ marginRight: 6, marginBottom: 6 }}
+                                onPress={() => navigation.navigate("BibleChapter", { reference })}
+                                onClose={() => {
+                                    setBibleReferences((prev) => prev.filter((item) => item !== reference));
+                                }}
+                            >
+                                {reference}
+                            </Chip>
+                        ))}
+                    </View>
+                ) : null}
                 <Divider bold={true} />
                 {/* Button to pick images from the gallery */}
                 <View style={{ flexDirection: "row", marginTop: 10, justifyContent: "space-around" }}>
+                    <Button
+                        icon="menu-book"
+                        mode="outlined"
+                        onPress={() => navigation.navigate("BiblePicker", { target: "post" })}
+                    >
+                        Bible
+                    </Button>
                     <Button icon="add-a-photo" mode="outlined" onPress={pickImage}>
                         {i18n.t("message.addPhotos")}
                     </Button>