frontend: fix messy deletion timer hooks at the mood details page

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago f630302504f471e2dab4f9c7d4a05c0a759f79d8

Parents: 1228979

1 file(s) changed

frontend/app/entry/[id].tsx +25 -26

frontend/app/entry/[id].tsx

@@ -23,6 +23,27 @@ const deleteMoodEntry = useDeleteMoodEntry();
      const [minutesLeft, setMinutesLeft] = useState(0);
      const [canDelete, setCanDelete] = useState(false);
    
  +   useEffect(() => {
  +     const updateTimer = () => {
  +       const moment = new Date(entry?.moment);
  +       const createdAt = new Date(entry?.moment);
  +       const msSinceCreation = Date.now() - createdAt.getTime();
  +       const deletionWindowMs = 5 * 60 * 1000;
  + 
  +       const newCanDelete = msSinceCreation < deletionWindowMs;
  +       const newMinutesLeft = Math.max(0, Math.ceil((deletionWindowMs - msSinceCreation) / 60000));
  + 
  +       setCanDelete(newCanDelete);
  +       setMinutesLeft(newMinutesLeft);
  +     };
  + 
  +     updateTimer(); // Set initial values
  + 
  +     const interval = setInterval(updateTimer, 1000);
  + 
  +     return () => clearInterval(interval);
  +   }, [entry?.moment]);
  + 
      if (isLoading) {
        return (
          <View style={styles.centered}>

@@ -46,28 +67,6 @@ const moment = new Date(entry.moment);
      const moodDef = getMood(entry.selectedMood.toLowerCase());
      const badge = getTimeBadge(moment);
    
  -   useEffect(() => {
  -     const updateTimer = () => {
  -       const moment = new Date(entry.moment);
  -       const createdAt = new Date(entry.moment);
  -       const msSinceCreation = Date.now() - createdAt.getTime();
  -       const deletionWindowMs = 5 * 60 * 1000;
  - 
  -       const newCanDelete = msSinceCreation < deletionWindowMs;
  -       const newMinutesLeft = Math.max(0, Math.ceil((deletionWindowMs - msSinceCreation) / 60000));
  - 
  -       setCanDelete(newCanDelete);
  -       setMinutesLeft(newMinutesLeft);
  -     };
  - 
  -     updateTimer(); // Set initial values
  - 
  -     const interval = setInterval(updateTimer, 1000);
  - 
  -     return () => clearInterval(interval);
  -   }, [entry.moment]);
  - 
  - 
      const handleDelete = async () => {
        await deleteMoodEntry.mutateAsync(String(entry.id));
    

@@ -113,11 +112,11 @@ {/* Core levels */}
            <Section>
              <SectionHeader title="Níveis" variant="subtle" />
                {[
  -               { label: 'Energia',  value: entry.energyLevel  },
  -               { label: 'Estresse', value: entry.stressLevel  },
  -               { label: 'Ansiedade', value: entry.anxietyLevel },
  +               { id: 'energy', label: 'Energia',  value: entry.energyLevel  },
  +               { id: 'stress', label: 'Estresse', value: entry.stressLevel  },
  +               { id: 'anxiety', label: 'Ansiedade', value: entry.anxietyLevel },
                ].map((item, index, arr) => (
  -               <Card style={{ padding: Spacing.cardGap }}>
  +               <Card key={item.id} style={{ padding: Spacing.cardGap }}>
                    <View key={item.label}>
                      <View style={styles.componentRow}>
                        <Text style={styles.componentLabel}>{item.label}</Text>