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

Commit b5b2b4b

Browse files
hardingadonishardingadonis
committed
feat: implement gift management screens with add, edit, and detail functionalities
1 parent d845d25 commit b5b2b4b

File tree

9 files changed

+925
-20
lines changed

9 files changed

+925
-20
lines changed

‎src/app/(gifts)/add-gift.tsx‎

Lines changed: 171 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,179 @@
1-
import { Text, View } from 'react-native';
1+
import { Ionicons } from '@expo/vector-icons';
2+
import { useNavigation } from 'expo-router';
3+
import { useState } from 'react';
4+
import {
5+
Pressable,
6+
ScrollView,
7+
StyleSheet,
8+
Text,
9+
TextInput,
10+
View,
11+
} from 'react-native';
212

313
const AddGiftScreen = () => {
14+
const navigation = useNavigation();
15+
const [title, setTitle] = useState('');
16+
const [description, setDescription] = useState('');
17+
const [recipient, setRecipient] = useState('');
18+
const [selectedDate, setSelectedDate] = useState(new Date());
19+
20+
const handleAddGift = () => {
21+
console.log({ title, description, recipient, selectedDate });
22+
navigation.goBack();
23+
};
24+
425
return (
5-
<View>
6-
<Text>Add Recipient Screen</Text>
26+
<View style={styles.container}>
27+
<ScrollView style={styles.scrollView}>
28+
<View style={styles.inputGroup}>
29+
<Text style={styles.label}>Title</Text>
30+
<TextInput
31+
style={styles.input}
32+
placeholder="Enter title"
33+
value={title}
34+
onChangeText={setTitle}
35+
/>
36+
</View>
37+
38+
<View style={styles.inputGroup}>
39+
<Text style={styles.label}>Description</Text>
40+
<TextInput
41+
style={[styles.input, styles.textArea]}
42+
placeholder="Enter description"
43+
value={description}
44+
onChangeText={setDescription}
45+
multiline
46+
numberOfLines={4}
47+
/>
48+
</View>
49+
50+
<View style={styles.inputGroup}>
51+
<Text style={styles.label}>Image</Text>
52+
<Pressable style={styles.uploadButton}>
53+
<Ionicons name="cloud-upload-outline" size={24} color="#666" />
54+
<Text style={styles.uploadText}>Upload Image</Text>
55+
</Pressable>
56+
</View>
57+
58+
<View style={styles.inputGroup}>
59+
<Text style={styles.label}>Choose Recipient</Text>
60+
<Pressable style={styles.select}>
61+
<Text style={styles.selectText}>Choose Recipient</Text>
62+
<Ionicons name="chevron-down" size={24} color="#666" />
63+
</Pressable>
64+
</View>
65+
66+
<View style={styles.inputGroup}>
67+
<Text style={styles.label}>Choose Time Event</Text>
68+
<Pressable style={styles.select}>
69+
<Text style={styles.selectText}>Choose time</Text>
70+
<Ionicons name="chevron-down" size={24} color="#666" />
71+
</Pressable>
72+
</View>
73+
74+
<Pressable style={styles.addButton} onPress={handleAddGift}>
75+
<Text style={styles.addButtonText}>Add Gift Idea</Text>
76+
</Pressable>
77+
78+
<Pressable
79+
style={styles.cancelButton}
80+
onPress={() => navigation.goBack()}
81+
>
82+
<Text style={styles.cancelButtonText}>Cancel</Text>
83+
</Pressable>
84+
</ScrollView>
785
</View>
886
);
987
};
1088

89+
const styles = StyleSheet.create({
90+
container: {
91+
flex: 1,
92+
backgroundColor: '#F8F9FA',
93+
paddingVertical: 16,
94+
},
95+
scrollView: {
96+
flex: 1,
97+
padding: 16,
98+
},
99+
header: {
100+
fontSize: 24,
101+
fontWeight: '600',
102+
marginBottom: 24,
103+
color: '#333333',
104+
},
105+
inputGroup: {
106+
marginBottom: 20,
107+
},
108+
label: {
109+
fontSize: 16,
110+
color: '#666666',
111+
marginBottom: 8,
112+
},
113+
input: {
114+
backgroundColor: 'white',
115+
borderRadius: 8,
116+
padding: 12,
117+
fontSize: 16,
118+
borderWidth: 1,
119+
borderColor: '#DDDDDD',
120+
},
121+
textArea: {
122+
height: 100,
123+
textAlignVertical: 'top',
124+
},
125+
uploadButton: {
126+
backgroundColor: 'white',
127+
borderRadius: 8,
128+
padding: 12,
129+
flexDirection: 'row',
130+
alignItems: 'center',
131+
justifyContent: 'center',
132+
borderWidth: 1,
133+
borderColor: '#DDDDDD',
134+
},
135+
uploadText: {
136+
marginLeft: 8,
137+
fontSize: 16,
138+
color: '#666666',
139+
},
140+
select: {
141+
backgroundColor: 'white',
142+
borderRadius: 8,
143+
padding: 12,
144+
flexDirection: 'row',
145+
alignItems: 'center',
146+
justifyContent: 'space-between',
147+
borderWidth: 1,
148+
borderColor: '#DDDDDD',
149+
},
150+
selectText: {
151+
fontSize: 16,
152+
color: '#666666',
153+
},
154+
addButton: {
155+
backgroundColor: '#4B6BFB',
156+
borderRadius: 8,
157+
padding: 16,
158+
alignItems: 'center',
159+
marginTop: 24,
160+
},
161+
addButtonText: {
162+
color: 'white',
163+
fontSize: 16,
164+
fontWeight: '600',
165+
},
166+
cancelButton: {
167+
backgroundColor: '#F8F9FA',
168+
borderRadius: 8,
169+
padding: 16,
170+
alignItems: 'center',
171+
marginTop: 12,
172+
},
173+
cancelButtonText: {
174+
color: '#666666',
175+
fontSize: 16,
176+
},
177+
});
178+
11179
export default AddGiftScreen;

‎src/app/(gifts)/detail-gift.tsx‎

Lines changed: 121 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,129 @@
1-
import { Text, View } from 'react-native';
1+
import { useLocalSearchParams, useRouter } from 'expo-router';
2+
import { Alert, Image, Pressable, StyleSheet, Text, View } from 'react-native';
3+
4+
import { GiftIdea } from '@/models/GiftIdea';
25

36
const DetailGiftScreen = () => {
7+
const router = useRouter();
8+
const { id, image, title, description, recipient, selectedDate } =
9+
useLocalSearchParams() as unknown as GiftIdea;
10+
11+
const handleEdit = () => {
12+
router.push({
13+
pathname: '/edit-gift',
14+
params: {
15+
id,
16+
image,
17+
title,
18+
description,
19+
recipient,
20+
selectedDate,
21+
},
22+
});
23+
};
24+
25+
const handleDelete = () => {
26+
Alert.alert(
27+
'Confirm Delete',
28+
`Are you sure you want to delete the gift idea "${title}"?`,
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+
440
return (
5-
<View>
6-
<Text>Edit Recipient Screen</Text>
41+
<View style={styles.container}>
42+
<Image source={{ uri: image }} style={styles.image} />
43+
<Text style={styles.title}>{title}</Text>
44+
<Text style={styles.description}>{description}</Text>
45+
<Text style={styles.recipient}>For: {recipient}</Text>
46+
<Text style={styles.date}>
47+
Event Date: {new Date(selectedDate).toLocaleDateString()}
48+
</Text>
49+
<View style={styles.actions}>
50+
<Pressable style={styles.editButton} onPress={handleEdit}>
51+
<Text style={styles.buttonText}>Edit</Text>
52+
</Pressable>
53+
<Pressable style={styles.deleteButton} onPress={handleDelete}>
54+
<Text style={styles.buttonText}>Delete</Text>
55+
</Pressable>
56+
</View>
757
</View>
858
);
959
};
1060

61+
const styles = StyleSheet.create({
62+
container: {
63+
flex: 1,
64+
backgroundColor: '#FFFFFF',
65+
padding: 16,
66+
},
67+
header: {
68+
fontSize: 20,
69+
fontWeight: 'bold',
70+
color: '#333333',
71+
marginBottom: 16,
72+
textAlign: 'center',
73+
},
74+
image: {
75+
width: '100%',
76+
height: 200,
77+
borderRadius: 12,
78+
marginBottom: 16,
79+
},
80+
title: {
81+
fontSize: 24,
82+
fontWeight: 'bold',
83+
color: '#333333',
84+
marginBottom: 8,
85+
},
86+
description: {
87+
fontSize: 16,
88+
color: '#666666',
89+
marginBottom: 8,
90+
},
91+
recipient: {
92+
fontSize: 16,
93+
color: '#666666',
94+
marginBottom: 8,
95+
},
96+
date: {
97+
fontSize: 16,
98+
color: '#666666',
99+
marginBottom: 16,
100+
},
101+
actions: {
102+
flexDirection: 'row',
103+
justifyContent: 'space-between',
104+
marginTop: 24,
105+
},
106+
editButton: {
107+
flex: 1,
108+
backgroundColor: '#007BFF',
109+
padding: 12,
110+
borderRadius: 8,
111+
alignItems: 'center',
112+
marginRight: 8,
113+
},
114+
deleteButton: {
115+
flex: 1,
116+
backgroundColor: '#FF4D4F',
117+
padding: 12,
118+
borderRadius: 8,
119+
alignItems: 'center',
120+
marginLeft: 8,
121+
},
122+
buttonText: {
123+
color: '#FFFFFF',
124+
fontSize: 16,
125+
fontWeight: 'bold',
126+
},
127+
});
128+
11129
export default DetailGiftScreen;

0 commit comments

Comments
 (0)