Skip to content
This repository was archived by the owner on May 5, 2025. It is now read-only.

Commit 216d86a

Browse files
bakaqcbakaqc
committed
feat: enhance DetailRecipientScreen with edit and delete functionality; update recipient data structure in AllRecipientsScreen
1 parent edfcfaa commit 216d86a

File tree

3 files changed

+140
-14
lines changed

3 files changed

+140
-14
lines changed

‎src/app/recipients/detail-recipient.tsx‎

Lines changed: 133 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,138 @@
1-
import { Text, View } from 'react-native';
1+
import { useLocalSearchParams, useRouter } from 'expo-router';
2+
import { Alert, Pressable, StyleSheet, Text, View, Image } from 'react-native';
3+
import { Recipient } from '@/models/Recipient';
24

35
const DetailRecipientScreen = () => {
4-
return (
5-
<View>
6-
<Text>Detail Recipient Screen</Text>
7-
</View>
8-
);
6+
const router = useRouter();
7+
const { id, image, name, budget, spent, description } = useLocalSearchParams() as unknown as Recipient;
8+
9+
// Handle edit action
10+
const handleEdit = () => {
11+
router.push({
12+
pathname: './recipients/edit-recipient',
13+
params: {
14+
id,
15+
image,
16+
name,
17+
budget,
18+
spent,
19+
description,
20+
},
21+
});
22+
};
23+
24+
// Handle delete action
25+
const handleDelete = () => {
26+
Alert.alert(
27+
'Confirm Delete',
28+
`Are you sure you want to delete the recipient "${name}"?`,
29+
[
30+
{ text: 'Cancel', style: 'cancel' },
31+
{
32+
text: 'Delete',
33+
style: 'destructive',
34+
onPress: () => console.log(`Delete action triggered for ID: ${id}`),
35+
},
36+
]
37+
);
38+
};
39+
40+
return (
41+
<View style={styles.container}>
42+
<Image source={{ uri: image }} style={styles.image} />
43+
44+
<Text style={styles.title}>{name}</Text>
45+
<Text style={styles.budget}>Budget: ${budget}</Text>
46+
<Text style={styles.spent}>Spent: ${spent}</Text>
47+
48+
{description && (
49+
<Text style={styles.description}>{description}</Text>
50+
)}
51+
52+
{/* Action Buttons: Edit and Delete */}
53+
<View style={styles.actions}>
54+
<Pressable style={styles.deleteButton} onPress={handleDelete}>
55+
<Text style={styles.buttonText}>Delete</Text>
56+
</Pressable>
57+
<Pressable style={styles.editButton} onPress={handleEdit}>
58+
<Text style={styles.buttonText}>Edit</Text>
59+
</Pressable>
60+
</View>
61+
</View>
62+
);
963
};
1064

65+
const styles = StyleSheet.create({
66+
container: {
67+
flex: 1,
68+
padding: 16,
69+
backgroundColor: '#F8F9FA',
70+
alignItems: 'center',
71+
},
72+
image: {
73+
width: 120,
74+
height: 120,
75+
borderRadius: 60,
76+
marginBottom: 16,
77+
},
78+
title: {
79+
fontSize: 24,
80+
fontWeight: '600',
81+
color: '#333333',
82+
},
83+
budget: {
84+
fontSize: 18,
85+
color: '#666666',
86+
marginTop: 8,
87+
},
88+
spent: {
89+
fontSize: 18,
90+
color: '#666666',
91+
marginTop: 4,
92+
},
93+
description: {
94+
fontSize: 16,
95+
color: '#666666',
96+
marginTop: 12,
97+
textAlign: 'center',
98+
},
99+
actions: {
100+
flexDirection: 'row',
101+
justifyContent: 'space-between',
102+
width: '100%',
103+
marginTop: 24,
104+
},
105+
editButton: {
106+
flex: 1,
107+
backgroundColor: '#ffa200',
108+
paddingVertical: 14,
109+
borderRadius: 8,
110+
alignItems: 'center',
111+
marginLeft: 8,
112+
shadowColor: '#000',
113+
shadowOffset: { width: 0, height: 4 },
114+
shadowOpacity: 0.2,
115+
shadowRadius: 6,
116+
elevation: 5,
117+
},
118+
deleteButton: {
119+
flex: 1,
120+
backgroundColor: '#FF4D4F',
121+
paddingVertical: 14,
122+
borderRadius: 8,
123+
alignItems: 'center',
124+
marginRight: 8,
125+
shadowColor: '#000',
126+
shadowOffset: { width: 0, height: 4 },
127+
shadowOpacity: 0.2,
128+
shadowRadius: 6,
129+
elevation: 5,
130+
},
131+
buttonText: {
132+
color: '#FFFFFF',
133+
fontSize: 16,
134+
fontWeight: 'bold',
135+
},
136+
});
137+
11138
export default DetailRecipientScreen;

‎src/app/recipients/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import RecipientCard from '@/components/utils/RecipientCard';
88
const AllRecipientsScreen = () => {
99
const router = useRouter();
1010

11-
const recipients: Recipient[] = [
12-
{ id: '1', image: 'https://img.freepik.com/premium-vector/cute-boy-smiling-cartoon-kawaii-boy-illustration-boy-avatar-happy-kid_1001605-3445.jpg', name: 'Alex', budget: 2000, spent: 1500 },
13-
{ id: '2', image: 'https://static.vecteezy.com/system/resources/previews/004/899/833/non_2x/beautiful-girl-with-blue-hair-avatar-of-woman-for-social-network-vector.jpg', name: 'Emily', budget: 2200, spent: 1600 },
14-
{ id: '3', image: 'https://img.freepik.com/premium-vector/boy-with-blue-hoodie-blue-hoodie-with-hoodie-it_1230457-42660.jpg', name: 'Michael', budget: 3000, spent: 1500 },
15-
{ id: '4', image: 'https://img.freepik.com/premium-vector/boy-with-hoodie-that-says-hes-boy_1230457-43316.jpg', name: 'Malow', budget: 1800, spent: 1200 },
16-
];
11+
const recipients: Recipient[] = [
12+
{ id: '1', image: 'https://img.freepik.com/premium-vector/cute-boy-smiling-cartoon-kawaii-boy-illustration-boy-avatar-happy-kid_1001605-3445.jpg', name: 'Alex', description: 'Loves outdoor activities and sports.', budget: 2000, spent: 1500 },
13+
{ id: '2', image: 'https://static.vecteezy.com/system/resources/previews/004/899/833/non_2x/beautiful-girl-with-blue-hair-avatar-of-woman-for-social-network-vector.jpg', name: 'Emily', description: 'Enjoys painting and creative arts.', budget: 2200, spent: 1600 },
14+
{ id: '3', image: 'https://img.freepik.com/premium-vector/boy-with-blue-hoodie-blue-hoodie-with-hoodie-it_1230457-42660.jpg', name: 'Michael', description: 'A tech enthusiast and gamer.', budget: 3000, spent: 1500 },
15+
{ id: '4', image: 'https://img.freepik.com/premium-vector/boy-with-hoodie-that-says-hes-boy_1230457-43316.jpg', name: 'Malow', description: 'Passionate about music and instruments.', budget: 1800, spent: 1200 },
16+
];
1717

1818
const handleAddRecipient = () => {
1919
router.push('/recipients/add-recipient');

‎src/components/utils/RecipientCard.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export default function RecipientCard({
2424
<Image source={{ uri: image }} style={styles.image} />
2525
<View style={styles.content}>
2626
<Text style={styles.name}>{name}</Text>
27-
{description && <Text style={styles.description}>{description}</Text>}
2827
<Text style={styles.budget}>Budget: ${budget}</Text>
2928
<Text style={styles.spent}>Spent: ${spent}</Text>
3029
</View>
@@ -50,7 +49,7 @@ const styles = StyleSheet.create({
5049
image: {
5150
width: 60,
5251
height: 60,
53-
borderRadius: 8,
52+
borderRadius: 30,
5453
},
5554
content: {
5655
marginLeft: 12,

0 commit comments

Comments
 (0)