CatsitterSetting.js

import React, { useEffect, useState, useLayoutEffect } from "react";
import { View, TouchableOpacity, Text, TextInput, StyleSheet } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { FontAwesome } from "@expo/vector-icons";
import colors from "../../colors";
import { signOut } from "firebase/auth";
import { AntDesign } from "@expo/vector-icons";
import { collection, query, onSnapshot, where, and, updateDoc, doc } from "firebase/firestore";
import { auth, database } from "../../config/firebase";
import { DIMENSION_WIDTH } from "../../assets/styles";


//When user has role cat sitter
//TODO: get profile of cat sitter => If not then has to create
//Cat sitter has 2 screens => Profile Setting and Chat List
//Check for some needed info => If not go direct to setting screen
//Include Chatbox like in cat owner home => OK
const CatsitterSetting = () => {
    const navigation = useNavigation();
    const [displayName, setDisplayName] = useState("");
    const [profileId, setProfileId] = useState();

    const onSignOut = () => {
        signOut(auth).catch((error) => console.log("Error logging out: ", error));
    };

    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => <FontAwesome name="home" size={24} color={colors.gray} style={{ marginLeft: 15 }} />,
            headerRight: () => (
                <TouchableOpacity
                    style={{
                        marginRight: 10
                    }}
                    onPress={onSignOut}>
                    <AntDesign name="logout" size={24} color={colors.gray} style={{ marginRight: 10 }} />
                </TouchableOpacity>
            )
        });
    }, [navigation]);

    useLayoutEffect(() => {
        const id = auth?.currentUser?.uid;

        if (!id) {
            navigate("/")
            return
        };
        const collectionRef = collection(database, "profiles");
        const q = query(collectionRef, and(where("userId", "==", id)),);

        const unsubscribe = onSnapshot(q, (querySnapshot) => {
            if (querySnapshot.docs.length > 0) {
                setProfileId(querySnapshot.docs[0].id)
                setDisplayName(querySnapshot.docs[0].data().displayName || "")
            }
        });
        return unsubscribe;
    }, []);

    const onUpdateProfileClick = async () => {
        if (!profileId) return;
        alert(profileId)
        const profileRef = doc(database, "profiles", profileId);
        const updateProfile = await updateDoc(profileRef, {
            displayName: displayName,
            updatedAt: new Date()
        });

        alert(updateProfile)
    }

    return (
        <View source={require("../../assets/images/10.jpg")} style={styles.containerHomePage}>
            <TouchableOpacity style={{ width: "100%" }}>
                <Text style={styles.heading1}>Setup your profile</Text>
            </TouchableOpacity>

            <View>
                <TextInput
                    style={styles.input}
                    placeholder="Display Name"
                    autoCapitalize="none"
                    textContentType="name"
                    value={displayName}
                    onChangeText={(text) => setDisplayName(text)}
                />

                <TouchableOpacity style={styles.button} onPress={onUpdateProfileClick}>
                    <Text style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}>Update your profile</Text>
                </TouchableOpacity>
            </View>


        </View>


    );
};

export default CatsitterSetting;


const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#fff",
        position: "relative"
    },
    chatButton: {
        position: "absolute",
        bottom: 0,
        right: 0,
        backgroundColor: colors.primary,
        height: 50,
        width: 50,
        borderRadius: 25,
        alignItems: "center",
        justifyContent: "center",
        shadowColor: colors.primary,
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.9,
        shadowRadius: 8,
        marginRight: 20,
        marginBottom: 50
    },
    input: {
        backgroundColor: "#F6F7FB",
        height: 58,
        marginBottom: 20,
        fontSize: 16,
        borderRadius: 10,
        padding: 12
    },
    cchat: {
        display: "flex",
        flexDirection: "row",
        width: DIMENSION_WIDTH - 40,
        marginHorizontal: 20,
        padding: 16,
        marginVertical: 4,
        backgroundColor: "#FAFAFA",
        shadowColor: colors.primary,
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.9,
        shadowRadius: 8,
        borderRadius: 12,
        borderColor: "#EDE6DD"
    },
});