eletrotupi / tcc/ commit / 39476e3

frontend: rig history tab with useHistoryFeed hooks and specific components

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago 39476e3f598d71e595f9f8381f932500977d98f5 Browse files
Parents 6b5692b
Changed files
1
Additions
+38
Deletions
-8
frontend/app/(tabs)/history.tsx modified+38 -8
frontend/app/(tabs)/history.tsx
1 - 
import { ThemedText } from '@/components/misc/themed-text';
2 - 
import { ThemedView } from '@/components/misc/themed-view';
1 + 
import { useState } from 'react';
2 + 
import { ScrollView, View, Text } from 'react-native'
3 3 
import { ScreenLayout } from '@/components/ui/ScreenLayout';
4 + 
import { Section, SectionHeader } from '@/components/ui/Sections';
5 + 
import { FilterPills } from '@/components/ui/FilterPills';
4 6 
import { useAuth } from '@/context/AuthContext';
7 + 
import { useHistoryFeed } from '@/hooks/useHistoryFeed';
8 + 
import type { HistoryCategory } from '@/lib/history/types';
9 + 
import { MoodHistoryCard } from '@/components/history/MoodHistoryCard'
10 + 
import { SleepRecordCard } from '@/components/history/SleepRecordCard'
11 +
12 + 
const FILTERS: { label: string; value: HistoryCategory | 'all' }[] = [
13 + 
  { label: 'Tudo',          value: 'all'          },
14 + 
  { label: 'Humor',         value: 'mood'         },
15 + 
  { label: 'Sono',          value: 'sleep'        }
16 + 
];
17 +
18 + 
function HistoryCardRenderer({ card }: { card: HistoryCard }) {
19 + 
  switch (card.category) {
20 + 
    case 'mood':  return <MoodHistoryCard card={card as any} />
21 + 
    case 'sleep': return <SleepRecordCard card={card as any} />
22 + 
  }
23 + 
}
5 24
6 25 
export default function History() {
7 26 
  const { user } = useAuth();
27 + 
  const [activeFilter, setActiveFilter] = useState<HistoryCategory | 'all'>('all');
28 + 
  const grouped = useHistoryFeed(activeFilter);
8 29
9 30 
  return (
10 31 
    <ScreenLayout userName={user.firstName} userAvatar={user.avatarURL}
11 32 
      onNotificationPress={() => console.log('Notifications')}
12 33 
      showNotificationBadge={true}>
13 - 
      <ThemedView>
14 - 
        <ThemedText>
15 - 
          History
16 - 
        </ThemedText>
17 - 
      </ThemedView>
34 + 
      <ScrollView>
35 + 
      <FilterPills active={activeFilter} onChange={setActiveFilter} />
36 +
37 + 
        {Object.entries(grouped).map(([date, cards]) => (
38 + 
          <Section key={date}>
39 + 
            <SectionHeader title={date} />
40 + 
            <View>
41 + 
              {cards.map(card => (
42 + 
                <HistoryCardRenderer key={card.id} card={card} />)
43 + 
              )}
44 + 
            </View>
45 + 
          </Section>
46 + 
        ))}
47 + 
      </ScrollView>
18 48 
    </ScreenLayout>
19 - 
  )
49 + 
  );
20 50 
}