frontend: fix messy deletion timer hooks at the mood details page
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
f630302504f471e2dab4f9c7d4a05c0a759f79d8 Browse filesParents
1228979Changed files
1
Additions
+25
Deletions
-26
frontend/app/entry/[id].tsx
1 1
import { useState, useEffect } from 'react';
2 2
import { StyleSheet, Text, View, ScrollView, Pressable, ActivityIndicator } from 'react-native';
3 3
import { useLocalSearchParams, router, Stack } from 'expo-router';
4 4
import { format } from 'date-fns';
5 5
import { ptBR } from 'date-fns/locale';
21 21
const { data: entry, isLoading, isError } = useMoodEntry(id);
22 22
const deleteMoodEntry = useDeleteMoodEntry();
23 23
const [minutesLeft, setMinutesLeft] = useState(0);
24 24
const [canDelete, setCanDelete] = useState(false);
25 25
26 +
useEffect(() => {
27 +
const updateTimer = () => {
28 +
const moment = new Date(entry?.moment);
29 +
const createdAt = new Date(entry?.moment);
30 +
const msSinceCreation = Date.now() - createdAt.getTime();
31 +
const deletionWindowMs = 5 * 60 * 1000;
32 +
33 +
const newCanDelete = msSinceCreation < deletionWindowMs;
34 +
const newMinutesLeft = Math.max(0, Math.ceil((deletionWindowMs - msSinceCreation) / 60000));
35 +
36 +
setCanDelete(newCanDelete);
37 +
setMinutesLeft(newMinutesLeft);
38 +
};
39 +
40 +
updateTimer(); // Set initial values
41 +
42 +
const interval = setInterval(updateTimer, 1000);
43 +
44 +
return () => clearInterval(interval);
45 +
}, [entry?.moment]);
46 +
26 47
if (isLoading) {
27 48
return (
28 49
<View style={styles.centered}>
29 50
<ActivityIndicator size="large" color={Theme.colors.tint} />
30 51
</View>
44 65
45 66
const moment = new Date(entry.moment);
46 67
const moodDef = getMood(entry.selectedMood.toLowerCase());
47 68
const badge = getTimeBadge(moment);
48 69
49 -
useEffect(() => {
50 -
const updateTimer = () => {
51 -
const moment = new Date(entry.moment);
52 -
const createdAt = new Date(entry.moment);
53 -
const msSinceCreation = Date.now() - createdAt.getTime();
54 -
const deletionWindowMs = 5 * 60 * 1000;
55 -
56 -
const newCanDelete = msSinceCreation < deletionWindowMs;
57 -
const newMinutesLeft = Math.max(0, Math.ceil((deletionWindowMs - msSinceCreation) / 60000));
58 -
59 -
setCanDelete(newCanDelete);
60 -
setMinutesLeft(newMinutesLeft);
61 -
};
62 -
63 -
updateTimer(); // Set initial values
64 -
65 -
const interval = setInterval(updateTimer, 1000);
66 -
67 -
return () => clearInterval(interval);
68 -
}, [entry.moment]);
69 -
70 -
71 70
const handleDelete = async () => {
72 71
await deleteMoodEntry.mutateAsync(String(entry.id));
73 72
74 73
router.back();
75 74
};
111 110
112 111
{/* Core levels */}
113 112
<Section>
114 113
<SectionHeader title="Níveis" variant="subtle" />
115 114
{[
116 -
{ label: 'Energia', value: entry.energyLevel },
117 -
{ label: 'Estresse', value: entry.stressLevel },
118 -
{ label: 'Ansiedade', value: entry.anxietyLevel },
115 +
{ id: 'energy', label: 'Energia', value: entry.energyLevel },
116 +
{ id: 'stress', label: 'Estresse', value: entry.stressLevel },
117 +
{ id: 'anxiety', label: 'Ansiedade', value: entry.anxietyLevel },
119 118
].map((item, index, arr) => (
120 -
<Card style={{ padding: Spacing.cardGap }}>
119 +
<Card key={item.id} style={{ padding: Spacing.cardGap }}>
121 120
<View key={item.label}>
122 121
<View style={styles.componentRow}>
123 122
<Text style={styles.componentLabel}>{item.label}</Text>
124 123
<Text style={styles.componentIntensityGreen}>{item.value}/10</Text>
125 124
</View>
281 280
color: Colors.light.textSecondary,
282 281
fontStyle: 'italic',
283 282
padding: 4,
284 283
},
285 284
});