eletrotupi / tcc/ commit / b9cd59b

frontend: introduce quick mood register

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago b9cd59b0b0d8199437d8019117871b2a5e7930f6 Browse files
Parents 6f7c341
Changed files
2
Additions
+105
Deletions
-6
frontend/app/(tabs)/insights/index.tsx modified+22 -3
frontend/app/(tabs)/insights/index.tsx
1 1 
import { ThemedText } from '@/components/misc/themed-text';
2 2 
import { ThemedView } from '@/components/misc/themed-view';
3 3 
import { ScreenLayout } from '@/components/ui/ScreenLayout';
4 4 
import { useAuth } from '@/context/AuthContext';
5 + 
import { Card, CardHeader } from '@/components/ui/Cards'
6 + 
import { Section, SectionHeader } from '@/components/ui/Sections'
7 + 
import { useThemeColor } from '@/hooks/use-theme-color'
8 + 
import { Spacing, BorderRadius } from '@/constants/theme'
9 + 
import { Grid } from '@/components/ui/LayoutHelpers'
5 10
6 11 
export default function Insights() {
7 12 
  const { user } = useAuth();
13 + 
  const backgroundColor = useThemeColor({}, 'background')
14 + 
  const accentPurple = useThemeColor({}, 'accentPurple')
8 15
9 16 
  return (
10 17 
    <ScreenLayout userName={user.firstName}
11 18 
      onNotificationPress={() => console.log('Notifications')}
12 19 
      showNotificationBadge={true}>
13 20 
      <ThemedView>
14 - 
        <ThemedText>
15 - 
          Insights
16 - 
        </ThemedText>
21 + 
        <Section>
22 + 
          <SectionHeader
23 + 
            title="Tendências da Semana"
24 + 
            info="Últimos 7 dias"
25 + 
          />
26 + 
          <Card variant="default" style={{ height: 200 }} />
27 + 
        </Section>
28 +
29 + 
        <Section>
30 + 
          <SectionHeader title="Insights de Saúde" />
31 + 
          <Grid gap={8}>
32 + 
            <Card style={{ height: 150, backgroundColor: accentPurple }} />
33 + 
            <Card style={{ height: 150, backgroundColor: 'powderblue' }} />
34 + 
          </Grid>
35 + 
        </Section>
17 36 
      </ThemedView>
18 37 
    </ScreenLayout>
19 38 
  )
20 39 
}
frontend/app/(tabs)/new/index.tsx modified+83 -3
frontend/app/(tabs)/new/index.tsx
1 + 
import { useEffect, useState } from 'react';
2 + 
import {
3 + 
  StyleSheet
4 + 
} from 'react-native';
5 +
1 6 
import { ThemedText } from '@/components/misc/themed-text';
2 7 
import { ThemedView } from '@/components/misc/themed-view';
3 8 
import { ScreenLayout } from '@/components/ui/ScreenLayout';
4 9 
import { useAuth } from '@/context/AuthContext';
10 + 
import { Grid, Col, Row, Between } from '@/components/ui/LayoutHelpers';
11 + 
import { Card } from '@/components/ui/Cards';
12 + 
import { Button } from '@/components/ui/Button';
13 + 
import { Section, SectionHeader } from '@/components/ui/Sections';
14 + 
import { MoodSelector } from '@/components/ui/EmojiSelectors';
15 + 
import { Typography, Spacing, Shadows } from '@/constants/theme';
16 + 
import { useThemeColor } from '@/hooks/use-theme-color';
5 17
6 18 
export default function New() {
7 19 
  const { user } = useAuth();
20 + 
  const [mood, setMood] = useState<string>('bem');
21 + 
  const [isLoading, setIsLoading] = useState<boolean>(false);
22 +
23 + 
  const moodOptions = [
24 + 
    { id: 'sad', icon: '😢', label: 'Triste' },
25 + 
    { id: 'neutral', icon: '😐', label: 'Neutro' },
26 + 
    { id: 'good', icon: '😊', label: 'Bem' },
27 + 
    { id: 'great', icon: '🤩', label: 'Ótimo' },
28 + 
    { id: 'angry', icon: '😠', label: 'Irritado' },
29 + 
  ];
30 +
31 + 
  const initQuickRegister = () => {
32 + 
    console.log("Register: ", mood);
33 + 
  };
8 34
9 35 
  return (
10 36 
    <ScreenLayout userName={user.firstName}
11 37 
      onNotificationPress={() => console.log('Notifications')}
12 38 
      showNotificationBadge={true}>
13 39 
      <ThemedView>
14 - 
        <ThemedText>
15 - 
          Novo
16 - 
        </ThemedText>
40 + 
        <Section>
41 + 
          <SectionHeader
42 + 
            title="Como você está hoje?"
43 + 
            subtitle="Sua jornada começa agora"
44 + 
            >
45 + 
          </SectionHeader>
46 +
47 + 
          <Card style={{ minHeight: 200 }}>
48 + 
            <Col gap={16}>
49 + 
              <Between style={styles.quickRegisterHeader}>
50 + 
                <ThemedText style={styles.quickRegisterTitle}>
51 + 
                  Registro rápido
52 + 
                </ThemedText>
53 +
54 + 
                <ThemedText style={styles.quickRegisterBadge}>
55 + 
                  HOJE
56 + 
                </ThemedText>
57 + 
              </Between>
58 +
59 + 
              <MoodSelector
60 + 
                style={{paddingLeft: 8, paddingRight: 8, paddingTop: 16 }}
61 + 
                items={moodOptions}
62 + 
                value={mood}
63 + 
                onSelect={setMood}
64 + 
              />
65 +
66 + 
              <Button
67 + 
                title="Salvar Humor"
68 + 
                onPress={initQuickRegister}
69 + 
                loading={isLoading}
70 + 
                style={styles.quickRegisterButton}
71 + 
              />
72 + 
            </Col>
73 + 
          </Card>
74 + 
        </Section>
17 75 
      </ThemedView>
18 76 
    </ScreenLayout>
19 77 
  )
20 78 
}
79 +
80 + 
const styles = StyleSheet.create({
81 + 
  quickRegisterHeader: {
82 + 
    marginTop: 16,
83 + 
    paddingLeft: 16,
84 + 
    paddingRight: 16
85 + 
  },
86 + 
  quickRegisterTitle: {
87 + 
    ...Typography.bodyLg
88 + 
  },
89 + 
  // TODO: Replace when we have badges
90 + 
  quickRegisterBadge: {
91 + 
    fontSize: 12,
92 + 
    lineHeight: 16
93 + 
  },
94 + 
  quickRegisterButton: {
95 + 
    marginLeft: 16,
96 + 
    marginRight: 16,
97 + 
    marginBottom: 16,
98 + 
    ...Shadows.lg
99 + 
  }
100 + 
});