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

Commit b24659f

Browse files
htnghia1423htnghia1423
committed
update: recipient's screens
1 parent 43a3bee commit b24659f

File tree

3 files changed

+92
-45
lines changed

3 files changed

+92
-45
lines changed

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

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ const AddRecipientScreen = () => {
2020
const [name, setName] = useState('');
2121
const [description, setDescription] = useState('');
2222
const [budget, setBudget] = useState('');
23-
const [spent, setSpent] = useState('');
2423
const [errors, setErrors] = useState<{ name: string; budget: string }>({
2524
name: '',
2625
budget: '',
@@ -103,9 +102,9 @@ const AddRecipientScreen = () => {
103102
{/* Upload Image */}
104103
<View style={styles.inputGroup}>
105104
<Text style={styles.label}>Profile Image</Text>
106-
<TouchableOpacity style={styles.imagePicker} onPress={pickImage}>
105+
<TouchableOpacity style={styles.imagePickerCircle} onPress={pickImage}>
107106
{image ? (
108-
<Image source={{ uri: image }} style={styles.previewImage} />
107+
<Image source={{ uri: image }} style={styles.previewImageCircle} />
109108
) : (
110109
<Text style={styles.pickImageText}>Pick an Image</Text>
111110
)}
@@ -114,13 +113,17 @@ const AddRecipientScreen = () => {
114113

115114
{/* Name */}
116115
<View style={styles.inputGroup}>
117-
<Text style={styles.label}>Name</Text>
116+
<Text style={styles.label}>
117+
Name <Text style={styles.required}>*</Text>
118+
</Text>
118119
<TextInput
119-
style={styles.input}
120+
style={[styles.input, errors.name && styles.inputError]}
120121
placeholder="Enter recipient's name"
121122
value={name}
122-
onChangeText={setName}
123-
onBlur={() => validateFields()}
123+
onChangeText={(text) => {
124+
setName(text);
125+
if (errors.name) setErrors({ ...errors, name: '' });
126+
}}
124127
/>
125128
{errors.name ? (
126129
<Text style={styles.errorText}>{errors.name}</Text>
@@ -141,32 +144,24 @@ const AddRecipientScreen = () => {
141144

142145
{/* Budget */}
143146
<View style={styles.inputGroup}>
144-
<Text style={styles.label}>Budget</Text>
147+
<Text style={styles.label}>
148+
Budget <Text style={styles.required}>*</Text>
149+
</Text>
145150
<TextInput
146-
style={styles.input}
151+
style={[styles.input, errors.budget && styles.inputError]}
147152
placeholder="Enter budget"
148153
value={budget}
149-
onChangeText={setBudget}
154+
onChangeText={(text) => {
155+
setBudget(text);
156+
if (errors.budget) setErrors({ ...errors, budget: '' });
157+
}}
150158
keyboardType="numeric"
151-
onBlur={() => validateFields()}
152159
/>
153160
{errors.budget ? (
154161
<Text style={styles.errorText}>{errors.budget}</Text>
155162
) : null}
156163
</View>
157164

158-
{/* Spent */}
159-
<View style={styles.inputGroup}>
160-
<Text style={styles.label}>Spent</Text>
161-
<TextInput
162-
style={styles.input}
163-
placeholder="Enter spent amount"
164-
value={spent}
165-
onChangeText={setSpent}
166-
keyboardType="numeric"
167-
/>
168-
</View>
169-
170165
{/* Save Button */}
171166
<TouchableOpacity
172167
style={[styles.saveButton, isSaving && styles.saveButtonDisabled]}
@@ -214,6 +209,17 @@ const styles = StyleSheet.create({
214209
justifyContent: 'center',
215210
backgroundColor: 'white',
216211
},
212+
imagePickerCircle: {
213+
borderWidth: 1,
214+
borderColor: '#E0E0E0',
215+
borderRadius: 90,
216+
height: 180,
217+
width: 180,
218+
alignItems: 'center',
219+
justifyContent: 'center',
220+
backgroundColor: 'white',
221+
alignSelf: 'center',
222+
},
217223
pickImageText: {
218224
color: '#666',
219225
fontSize: 16,
@@ -223,6 +229,11 @@ const styles = StyleSheet.create({
223229
height: '100%',
224230
borderRadius: 8,
225231
},
232+
previewImageCircle: {
233+
width: '100%',
234+
height: '100%',
235+
borderRadius: 90,
236+
},
226237
saveButton: {
227238
backgroundColor: '#007AFF',
228239
padding: 16,
@@ -243,6 +254,12 @@ const styles = StyleSheet.create({
243254
fontSize: 12,
244255
marginTop: 4,
245256
},
257+
required: {
258+
color: 'red',
259+
},
260+
inputError: {
261+
borderColor: 'red',
262+
},
246263
});
247264

248265
export default AddRecipientScreen;

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

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,6 @@ const EditRecipientScreen = () => {
119119
name,
120120
description,
121121
budget: parseFloat(budget),
122-
spent: parseFloat(spent),
123122
};
124123

125124
await updateRecipient(recipient.id, updatedRecipient);
@@ -142,9 +141,9 @@ const EditRecipientScreen = () => {
142141
{/* Upload Image */}
143142
<View style={styles.inputGroup}>
144143
<Text style={styles.label}>Profile Image</Text>
145-
<TouchableOpacity style={styles.imagePicker} onPress={pickImage}>
144+
<TouchableOpacity style={styles.imagePickerCircle} onPress={pickImage}>
146145
{image ? (
147-
<Image source={{ uri: image }} style={styles.previewImage} />
146+
<Image source={{ uri: image }} style={styles.previewImageCircle} />
148147
) : (
149148
<Text style={styles.pickImageText}>Pick an Image</Text>
150149
)}
@@ -153,12 +152,17 @@ const EditRecipientScreen = () => {
153152

154153
{/* Name */}
155154
<View style={styles.inputGroup}>
156-
<Text style={styles.label}>Name</Text>
155+
<Text style={styles.label}>
156+
Name <Text style={styles.required}>*</Text>
157+
</Text>
157158
<TextInput
158-
style={styles.input}
159+
style={[styles.input, errors.name && styles.inputError]}
159160
placeholder="Enter recipient's name"
160161
value={name}
161-
onChangeText={setName}
162+
onChangeText={(text) => {
163+
setName(text);
164+
if (errors.name) setErrors({ ...errors, name: '' });
165+
}}
162166
/>
163167
{errors.name ? (
164168
<Text style={styles.errorText}>{errors.name}</Text>
@@ -179,31 +183,24 @@ const EditRecipientScreen = () => {
179183

180184
{/* Budget */}
181185
<View style={styles.inputGroup}>
182-
<Text style={styles.label}>Budget</Text>
186+
<Text style={styles.label}>
187+
Budget <Text style={styles.required}>*</Text>
188+
</Text>
183189
<TextInput
184-
style={styles.input}
190+
style={[styles.input, errors.budget && styles.inputError]}
185191
placeholder="Enter budget"
186192
value={budget}
187-
onChangeText={setBudget}
193+
onChangeText={(text) => {
194+
setBudget(text);
195+
if (errors.budget) setErrors({ ...errors, budget: '' });
196+
}}
188197
keyboardType="numeric"
189198
/>
190199
{errors.budget ? (
191200
<Text style={styles.errorText}>{errors.budget}</Text>
192201
) : null}
193202
</View>
194203

195-
{/* Spent */}
196-
<View style={styles.inputGroup}>
197-
<Text style={styles.label}>Spent</Text>
198-
<TextInput
199-
style={styles.input}
200-
placeholder="Enter spent amount"
201-
value={spent}
202-
onChangeText={setSpent}
203-
keyboardType="numeric"
204-
/>
205-
</View>
206-
207204
{/* Save Button */}
208205
<TouchableOpacity
209206
style={[styles.saveButton, isSaving && styles.saveButtonDisabled]}
@@ -251,6 +248,17 @@ const styles = StyleSheet.create({
251248
justifyContent: 'center',
252249
backgroundColor: 'white',
253250
},
251+
imagePickerCircle: {
252+
borderWidth: 1,
253+
borderColor: '#E0E0E0',
254+
borderRadius: 90,
255+
height: 180,
256+
width: 180,
257+
alignItems: 'center',
258+
justifyContent: 'center',
259+
backgroundColor: 'white',
260+
alignSelf: 'center',
261+
},
254262
pickImageText: {
255263
color: '#666',
256264
fontSize: 16,
@@ -260,6 +268,11 @@ const styles = StyleSheet.create({
260268
height: '100%',
261269
borderRadius: 8,
262270
},
271+
previewImageCircle: {
272+
width: '100%',
273+
height: '100%',
274+
borderRadius: 90,
275+
},
263276
saveButton: {
264277
backgroundColor: '#007AFF',
265278
padding: 16,
@@ -280,6 +293,12 @@ const styles = StyleSheet.create({
280293
fontSize: 12,
281294
marginTop: 4,
282295
},
296+
required: {
297+
color: 'red',
298+
},
299+
inputError: {
300+
borderColor: 'red',
301+
},
283302
});
284303

285304
export default EditRecipientScreen;

‎src/app/recipients/index.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ const AllRecipientsScreen = () => {
2020
const [recipients, setRecipients] = useState<Recipient[]>([]);
2121
const [sortField, setSortField] = useState<string | null>(null);
2222
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
23+
const [searchQuery, setSearchQuery] = useState('');
24+
25+
const filteredRecipients = recipients.filter((recipient) =>
26+
recipient.name.toLowerCase().includes(searchQuery.toLowerCase()),
27+
);
2328

2429
useEffect(() => {
2530
const loadRecipients = async () => {
@@ -55,6 +60,10 @@ const AllRecipientsScreen = () => {
5560
setRecipients(sortedRecipients);
5661
};
5762

63+
const handleSearch = (query: string) => {
64+
setSearchQuery(query);
65+
};
66+
5867
return (
5968
<SafeAreaView style={styles.container}>
6069
<View style={styles.header}>
@@ -69,6 +78,8 @@ const AllRecipientsScreen = () => {
6978
style={styles.searchInput}
7079
placeholder="Search"
7180
placeholderTextColor="#666"
81+
value={searchQuery}
82+
onChangeText={handleSearch}
7283
/>
7384
</View>
7485
<Pressable style={styles.addButton} onPress={handleAddRecipient}>
@@ -105,7 +116,7 @@ const AllRecipientsScreen = () => {
105116
</View>
106117

107118
<ScrollView style={styles.scrollView}>
108-
{recipients.map((recipient) => (
119+
{filteredRecipients.map((recipient) => (
109120
<RecipientCard
110121
key={recipient.id}
111122
id={recipient.id}

0 commit comments

Comments
 (0)