ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 16:34:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

tablet view fixes, grocery item fix

Browse Source
This commit is contained in:
ivic00
2024-11-27 20:17:48 +01:00
parent 4b5900c652
commit 01b4fc2e33
6 changed files with 171 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
components/pages/grocery/GroceryItem.tsx
View File

@ -6,9 +6,9 @@ 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";
import { useGetUserById } from "@/hooks/firebase/useGetUserById";
const GroceryItem = ({
item,
@ -21,6 +21,7 @@ const GroceryItem = ({
}) => {
const { updateGroceryItem } = useGroceryContext();
const { profileData } = useAuthContext();
const { data: creator } = useGetUserById(item.creatorId);
const isParent = profileData?.userType === ProfileType.PARENT;
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
@ -29,37 +30,8 @@ const GroceryItem = ({
const [category, setCategory] = useState<GroceryCategory>(
item.category ?? GroceryCategory.None
);
const [itemCreator, setItemCreator] = useState<UserProfile>(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 closeEdit = () => setIsEditingTitle(false);
const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
@ -71,23 +43,27 @@ const GroceryItem = ({
style={{
borderRadius: 17,
marginVertical: 5,
paddingHorizontal: isEditingTitle ? 0 : 13,
paddingVertical: isEditingTitle ? 0 : 10,
height: 44.64,
backgroundColor: item.bought ? "#cbcbcb" : "white",
overflow: "hidden",
}}
backgroundColor="white"
centerV
>
<View row spread>
<View
row
spread
centerV
style={{
paddingHorizontal: isEditingTitle ? 0 : 13,
paddingVertical: isEditingTitle ? 0 : 10,
minHeight: 44.64,
}}
>
<EditGroceryFrequency
visible={openFreqEdit}
key={item.id}
item={item}
onClose={() => {
setOpenFreqEdit(false);
}}
onClose={() => setOpenFreqEdit(false)}
/>
{isEditingTitle ? (
<EditGroceryItem
editGrocery={{
@ -102,12 +78,11 @@ const GroceryItem = ({
onInputFocus={onInputFocus}
/>
) : (
<View>
<View flex>
{isParent ? (
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text
text70T
black
style={[
styles.title,
{
@ -121,7 +96,6 @@ const GroceryItem = ({
) : (
<Text
text70T
black
style={[styles.title, { color: item.bought ? "red" : "black" }]}
>
{item.title}
@ -129,31 +103,25 @@ const GroceryItem = ({
)}
</View>
)}
{!item.approved ? (
<View row centerV marginB-10>
<View row centerV>
{isParent && (
<>
<AntDesign
name="check"
size={24}
style={{
color: "green",
marginRight: 15,
}}
onPress={
isParent
? () => handleItemApproved(item.id, { approved: true })
: null
style={{ color: "green", marginRight: 15 }}
onPress={() =>
handleItemApproved(item.id, { approved: true })
}
/>
<AntDesign
name="close"
size={24}
style={{ color: "red" }}
onPress={
isParent
? () => handleItemApproved(item.id, { approved: false })
: null
onPress={() =>
handleItemApproved(item.id, { approved: false })
}
/>
</>
@ -176,69 +144,69 @@ const GroceryItem = ({
)
)}
</View>
{!item.approved && (
<View>
<View centerH>
<View height={0.7} backgroundColor="#e7e7e7" width={"98%"} />
<>
<View paddingH-20>
<View height={0.7} backgroundColor="#e7e7e7" width="100%" />
</View>
<View paddingL-0 paddingT-12 flexS row centerV>
{profileData?.pfp ? (
<View
row
centerV
style={{
paddingHorizontal: 13,
paddingVertical: 10,
}}
>
{creator?.pfp ? (
<ImageBackground
source={require("../../../assets/images/child-picture.png")}
source={{ uri: creator.pfp }}
style={{
height: 24.64,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
borderWidth: 2,
borderColor: profileData.eventColor
borderColor: creator.eventColor || undefined,
marginRight: 8,
}}
/>
) : (
<View
style={{
position: "relative",
width: 24.64,
aspectRatio: 1,
marginRight: 4,
marginRight: 8,
backgroundColor: "#ccc",
borderRadius: 100,
justifyContent: "center",
alignItems: "center",
}}
>
<View
style={{
backgroundColor: "#ccc",
justifyContent: "center",
alignItems: "center",
borderRadius: 100, // Circular shape
width: "100%",
height: "100%",
}}
<Text
style={{ color: "#fff", fontSize: 12, fontWeight: "bold" }}
>
<Text
style={{
color: "#fff",
fontSize: 12,
fontWeight: "bold",
}}
>
{itemCreator
? getInitials(itemCreator.firstName, itemCreator.lastName)
: ""}
</Text>
</View>
{creator
? getInitials(creator.firstName, creator.lastName)
: ""}
</Text>
</View>
)}
<Text color="#858585" style={styles.authorTxt}>
Requested by {itemCreator?.firstName}
Requested by {creator?.firstName}
</Text>
</View>
</View>
</>
)}
</View>
);
};
const styles = StyleSheet.create({
authorTxt: { fontFamily: "Manrope_500Medium", fontSize: 12 },
authorTxt: {
fontFamily: "Manrope_500Medium",
fontSize: 12,
},
checkbox: {
borderRadius: 50,
borderWidth: 0.7,