import { Checkbox, Text, TouchableOpacity, View } from "react-native-ui-lib"; import React, { useEffect, useState } from "react"; import { AntDesign } from "@expo/vector-icons"; import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext"; import EditGroceryFrequency from "./EditGroceryFrequency"; import EditGroceryItem from "./EditGroceryItem"; import { ImageBackground, StyleSheet } from "react-native"; import { IGrocery } from "@/hooks/firebase/types/groceryData"; import firestore from "@react-native-firebase/firestore"; import { UserProfile } from "@/hooks/firebase/types/profileTypes"; import { ProfileType, useAuthContext } from "@/contexts/AuthContext"; const GroceryItem = ({ item, handleItemApproved, onInputFocus, }: { item: IGrocery; handleItemApproved: (id: string, changes: Partial) => void; onInputFocus: (y: number) => void; }) => { const { updateGroceryItem } = useGroceryContext(); const { profileData } = useAuthContext(); const isParent = profileData?.userType === ProfileType.PARENT; const [openFreqEdit, setOpenFreqEdit] = useState(false); const [isEditingTitle, setIsEditingTitle] = useState(false); const [newTitle, setNewTitle] = useState(item.title ?? ""); const [category, setCategory] = useState( item.category ?? GroceryCategory.None ); const [itemCreator, setItemCreator] = useState(null); const closeEdit = () => { setIsEditingTitle(false); }; const handleTitleChange = (newTitle: string) => { updateGroceryItem({ id: item?.id, title: newTitle }); }; const handleCategoryChange = (newCategory: GroceryCategory) => { updateGroceryItem({ id: item?.id, category: newCategory }); }; useEffect(() => { console.log(item); getItemCreator(item?.creatorId); }, []); const getItemCreator = async (uid: string | undefined) => { if (uid) { const documentSnapshot = await firestore() .collection("Profiles") .doc(uid) .get(); if (documentSnapshot.exists) { setItemCreator(documentSnapshot.data() as UserProfile); } } }; const getInitials = (firstName: string, lastName: string) => { return `${firstName.charAt(0)}${lastName.charAt(0)}`; }; return ( { setOpenFreqEdit(false); }} /> {isEditingTitle ? ( ) : ( {isParent ? ( setIsEditingTitle(true)}> {item.title} ) : ( {item.title} )} )} {!item.approved ? ( {isParent && ( <> handleItemApproved(item.id, { approved: true }) : null } /> handleItemApproved(item.id, { approved: false }) : null } /> )} ) : ( !isEditingTitle && isParent && ( updateGroceryItem({ id: item.id, bought: !item.bought }) } /> ) )} {!item.approved && ( {profileData?.pfp ? ( ) : ( {itemCreator ? getInitials(itemCreator.firstName, itemCreator.lastName) : ""} )} Requested by {itemCreator?.firstName} )} ); }; const styles = StyleSheet.create({ authorTxt: { fontFamily: "Manrope_500Medium", fontSize: 12 }, checkbox: { borderRadius: 50, borderWidth: 0.7, color: "#bfbfbf", borderColor: "#bfbfbf", width: 24.64, aspectRatio: 1, }, title: { fontFamily: "Manrope_500Medium", fontSize: 15, }, checked: { borderRadius: 50, }, }); export default GroceryItem;