🐛 Fix ui bugs etc
Changes
2 files changed, +66 -50
MODIFY
app/project/[id].tsx
+64 -49
@@ -1,7 +1,7 @@
1
1
import React, { useEffect, useState } from 'react';
2
-import { StyleSheet, Alert, ScrollView, TouchableOpacity, TextInput } from 'react-native';
2
+import { StyleSheet, Alert, ScrollView, TouchableOpacity, TextInput, View } from 'react-native';
3
3
import { SafeAreaView } from 'react-native-safe-area-context';
4
-import { router, useLocalSearchParams } from 'expo-router';
4
+import { router, useLocalSearchParams, useFocusEffect } from 'expo-router';
5
5
import { ThemedView } from '@/components/themed-view';
6
6
import { ThemedText } from '@/components/themed-text';
7
7
import { TaskList } from '@/components/task-list';
@@ -24,9 +24,11 @@
24
24
const [isEditing, setIsEditing] = useState(isNew);
25
25
const [loading, setLoading] = useState(!isNew);
26
26
27
- useEffect(() => {
28
- loadData();
29
- }, [id]);
27
+ useFocusEffect(
28
+ React.useCallback(() => {
29
+ loadData();
30
+ }, [id])
31
+ );
30
32
31
33
const loadData = async () => {
32
34
try {
@@ -138,26 +140,27 @@
138
140
const colors = ['#0a7ea4', '#ef4444', '#f59e0b', '#10b981', '#8b5cf6', '#ec4899', '#64748b'];
139
141
140
142
return (
141
- <SafeAreaView style={styles.container}>
142
- <ThemedView style={styles.header}>
143
- <TouchableOpacity onPress={() => router.back()}>
144
- <ThemedText style={styles.backButton}>Back</ThemedText>
145
- </TouchableOpacity>
146
- {isEditing ? (
147
- <TouchableOpacity onPress={handleSave}>
148
- <ThemedText style={styles.saveButton}>Save</ThemedText>
143
+ <ThemedView style={styles.container}>
144
+ <SafeAreaView style={styles.safeArea}>
145
+ <View style={styles.header}>
146
+ <TouchableOpacity onPress={() => router.back()}>
147
+ <ThemedText style={styles.backButton}>Back</ThemedText>
149
148
</TouchableOpacity>
150
- ) : (
151
- <TouchableOpacity onPress={() => setIsEditing(true)}>
152
- <ThemedText style={styles.editButton}>Edit</ThemedText>
153
- </TouchableOpacity>
154
- )}
155
- </ThemedView>
149
+ {isEditing ? (
150
+ <TouchableOpacity onPress={handleSave}>
151
+ <ThemedText style={styles.saveButton}>Save</ThemedText>
152
+ </TouchableOpacity>
153
+ ) : (
154
+ <TouchableOpacity onPress={() => setIsEditing(true)}>
155
+ <ThemedText style={styles.editButton}>Edit</ThemedText>
156
+ </TouchableOpacity>
157
+ )}
158
+ </View>
156
159
157
- <ScrollView style={styles.scrollView}>
160
+ <ScrollView style={styles.scrollView}>
158
161
{isEditing ? (
159
162
<>
160
- <ThemedView style={styles.section}>
163
+ <View style={styles.section}>
161
164
<ThemedText style={styles.label}>Project Name *</ThemedText>
162
165
<TextInput
163
166
style={styles.input}
@@ -167,9 +170,9 @@
167
170
placeholderTextColor="#94a3b8"
168
171
autoFocus={isNew}
169
172
/>
170
- </ThemedView>
173
+ </View>
171
174
172
- <ThemedView style={styles.section}>
175
+ <View style={styles.section}>
173
176
<ThemedText style={styles.label}>Description</ThemedText>
174
177
<TextInput
175
178
style={[styles.input, styles.textArea]}
@@ -181,9 +184,9 @@
181
184
numberOfLines={3}
182
185
textAlignVertical="top"
183
186
/>
184
- </ThemedView>
187
+ </View>
185
188
186
- <ThemedView style={styles.section}>
189
+ <View style={styles.section}>
187
190
<ThemedText style={styles.label}>Goal</ThemedText>
188
191
<TextInput
189
192
style={[styles.input, styles.textArea]}
@@ -195,11 +198,11 @@
195
198
numberOfLines={3}
196
199
textAlignVertical="top"
197
200
/>
198
- </ThemedView>
201
+ </View>
199
202
200
- <ThemedView style={styles.section}>
203
+ <View style={styles.section}>
201
204
<ThemedText style={styles.label}>Color</ThemedText>
202
- <ThemedView style={styles.colorContainer}>
205
+ <View style={styles.colorContainer}>
203
206
{colors.map((color) => (
204
207
<TouchableOpacity
205
208
key={color}
@@ -211,11 +214,11 @@
211
214
onPress={() => setProject({ ...project, color })}
212
215
/>
213
216
))}
214
- </ThemedView>
215
- </ThemedView>
217
+ </View>
218
+ </View>
216
219
217
220
{!isNew && (
218
- <ThemedView style={styles.section}>
221
+ <View style={styles.section}>
219
222
<TouchableOpacity style={styles.archiveButton} onPress={handleArchive}>
220
223
<ThemedText style={styles.archiveButtonText}>
221
224
{project.archived ? 'Unarchive Project' : 'Archive Project'}
@@ -225,46 +228,46 @@
225
228
<TouchableOpacity style={styles.deleteButton} onPress={handleDelete}>
226
229
<ThemedText style={styles.deleteButtonText}>Delete Project</ThemedText>
227
230
</TouchableOpacity>
228
- </ThemedView>
231
+ </View>
229
232
)}
230
233
</>
231
234
) : (
232
235
<>
233
- <ThemedView style={styles.projectHeader}>
234
- <ThemedView style={styles.projectTitleContainer}>
236
+ <View style={styles.projectHeader}>
237
+ <View style={styles.projectTitleContainer}>
235
238
{project.color && (
236
- <ThemedView style={[styles.colorIndicator, { backgroundColor: project.color }]} />
239
+ <View style={[styles.colorIndicator, { backgroundColor: project.color }]} />
237
240
)}
238
241
<ThemedText type="title">{project.name}</ThemedText>
239
- </ThemedView>
242
+ </View>
240
243
{project.archived && (
241
- <ThemedView style={styles.archivedBadge}>
244
+ <View style={styles.archivedBadge}>
242
245
<ThemedText style={styles.archivedText}>Archived</ThemedText>
243
- </ThemedView>
246
+ </View>
244
247
)}
245
- </ThemedView>
248
+ </View>
246
249
247
250
{project.description && (
248
- <ThemedView style={styles.infoSection}>
251
+ <View style={styles.infoSection}>
249
252
<ThemedText style={styles.infoLabel}>Description</ThemedText>
250
253
<ThemedText style={styles.infoText}>{project.description}</ThemedText>
251
- </ThemedView>
254
+ </View>
252
255
)}
253
256
254
257
{project.goal && (
255
- <ThemedView style={styles.infoSection}>
258
+ <View style={styles.infoSection}>
256
259
<ThemedText style={styles.infoLabel}>Goal</ThemedText>
257
260
<ThemedText style={styles.infoText}>{project.goal}</ThemedText>
258
- </ThemedView>
261
+ </View>
259
262
)}
260
263
261
- <ThemedView style={styles.tasksSection}>
262
- <ThemedView style={styles.tasksSectionHeader}>
264
+ <View style={styles.tasksSection}>
265
+ <View style={styles.tasksSectionHeader}>
263
266
<ThemedText type="subtitle">Tasks</ThemedText>
264
267
<TouchableOpacity onPress={handleAddTask}>
265
268
<ThemedText style={styles.addTaskButton}>+ Add Task</ThemedText>
266
269
</TouchableOpacity>
267
- </ThemedView>
270
+ </View>
268
271
269
272
<TaskList
270
273
tasks={tasks}
@@ -273,13 +276,14 @@
273
276
emptyMessage="No tasks in this project yet"
274
277
scrollable={false}
275
278
/>
276
- </ThemedView>
279
+ </View>
277
280
</>
278
281
)}
279
282
280
- <ThemedView style={styles.bottomPadding} />
283
+ <View style={styles.bottomPadding} />
281
284
</ScrollView>
282
- </SafeAreaView>
285
+ </SafeAreaView>
286
+ </ThemedView>
283
287
);
284
288
}
285
289
@@ -287,6 +291,9 @@
287
291
container: {
288
292
flex: 1,
289
293
},
294
+ safeArea: {
295
+ flex: 1,
296
+ },
290
297
header: {
291
298
flexDirection: 'row',
292
299
justifyContent: 'space-between',
@@ -315,6 +322,7 @@
315
322
paddingVertical: 16,
316
323
borderBottomWidth: StyleSheet.hairlineWidth,
317
324
borderBottomColor: '#e2e8f0',
325
+ backgroundColor: 'transparent',
318
326
},
319
327
label: {
320
328
fontSize: 14,
@@ -339,6 +347,7 @@
339
347
flexDirection: 'row',
340
348
gap: 12,
341
349
flexWrap: 'wrap',
350
+ backgroundColor: 'transparent',
342
351
},
343
352
colorButton: {
344
353
width: 40,
@@ -381,11 +390,13 @@
381
390
paddingHorizontal: 16,
382
391
paddingTop: 24,
383
392
paddingBottom: 16,
393
+ backgroundColor: 'transparent',
384
394
},
385
395
projectTitleContainer: {
386
396
flexDirection: 'row',
387
397
alignItems: 'center',
388
398
gap: 12,
399
+ backgroundColor: 'transparent',
389
400
},
390
401
colorIndicator: {
391
402
width: 6,
@@ -408,6 +419,7 @@
408
419
infoSection: {
409
420
paddingHorizontal: 16,
410
421
paddingVertical: 12,
422
+ backgroundColor: 'transparent',
411
423
},
412
424
infoLabel: {
413
425
fontSize: 12,
@@ -422,6 +434,7 @@
422
434
},
423
435
tasksSection: {
424
436
marginTop: 24,
437
+ backgroundColor: 'transparent',
425
438
},
426
439
tasksSectionHeader: {
427
440
flexDirection: 'row',
@@ -429,6 +442,7 @@
429
442
alignItems: 'center',
430
443
paddingHorizontal: 16,
431
444
paddingBottom: 8,
445
+ backgroundColor: 'transparent',
432
446
},
433
447
addTaskButton: {
434
448
color: '#0a7ea4',
@@ -436,5 +450,6 @@
436
450
},
437
451
bottomPadding: {
438
452
height: 40,
453
+ backgroundColor: 'transparent',
439
454
},
440
455
});
MODIFY
services/task.service.ts
+2 -1
@@ -31,7 +31,8 @@
31
31
const tasks = await this.getAllTasks();
32
32
return tasks.filter(task =>
33
33
!task.completed &&
34
- !task.dueDate
34
+ !task.dueDate &&
35
+ task.status !== 'someday'
35
36
);
36
37
}
37
38