frontend: introduce quick mood register

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

Parents: 6f7c341

2 file(s) changed

frontend/app/(tabs)/insights/index.tsx +22 -3
frontend/app/(tabs)/new/index.tsx +83 -3

frontend/app/(tabs)/insights/index.tsx

@@ -2,18 +2,37 @@ import { ThemedText } from '@/components/misc/themed-text';
    import { ThemedView } from '@/components/misc/themed-view';
    import { ScreenLayout } from '@/components/ui/ScreenLayout';
    import { useAuth } from '@/context/AuthContext';
  + import { Card, CardHeader } from '@/components/ui/Cards'
  + import { Section, SectionHeader } from '@/components/ui/Sections'
  + import { useThemeColor } from '@/hooks/use-theme-color'
  + import { Spacing, BorderRadius } from '@/constants/theme'
  + import { Grid } from '@/components/ui/LayoutHelpers'
    
    export default function Insights() {
      const { user } = useAuth();
  +   const backgroundColor = useThemeColor({}, 'background')
  +   const accentPurple = useThemeColor({}, 'accentPurple')
    
      return (
        <ScreenLayout userName={user.firstName}
          onNotificationPress={() => console.log('Notifications')}
          showNotificationBadge={true}>
          <ThemedView>
  -         <ThemedText>
  -           Insights
  -         </ThemedText>
  +         <Section>
  +           <SectionHeader
  +             title="Tendências da Semana"
  +             info="Últimos 7 dias"
  +           />
  +           <Card variant="default" style={{ height: 200 }} />
  +         </Section>
  + 
  +         <Section>
  +           <SectionHeader title="Insights de Saúde" />
  +           <Grid gap={8}>
  +             <Card style={{ height: 150, backgroundColor: accentPurple }} />
  +             <Card style={{ height: 150, backgroundColor: 'powderblue' }} />
  +           </Grid>
  +         </Section>
          </ThemedView>
        </ScreenLayout>
      )

frontend/app/(tabs)/new/index.tsx

@@ -1,20 +1,100 @@
  + import { useEffect, useState } from 'react';
  + import { 
  +   StyleSheet
  + } from 'react-native';
  + 
    import { ThemedText } from '@/components/misc/themed-text';
    import { ThemedView } from '@/components/misc/themed-view';
    import { ScreenLayout } from '@/components/ui/ScreenLayout';
    import { useAuth } from '@/context/AuthContext';
  + import { Grid, Col, Row, Between } from '@/components/ui/LayoutHelpers';
  + import { Card } from '@/components/ui/Cards';
  + import { Button } from '@/components/ui/Button';
  + import { Section, SectionHeader } from '@/components/ui/Sections';
  + import { MoodSelector } from '@/components/ui/EmojiSelectors';
  + import { Typography, Spacing, Shadows } from '@/constants/theme';
  + import { useThemeColor } from '@/hooks/use-theme-color';
    
    export default function New() {
      const { user } = useAuth();
  +   const [mood, setMood] = useState<string>('bem');
  +   const [isLoading, setIsLoading] = useState<boolean>(false);
  + 
  +   const moodOptions = [
  +     { id: 'sad', icon: '😢', label: 'Triste' },
  +     { id: 'neutral', icon: '😐', label: 'Neutro' },
  +     { id: 'good', icon: '😊', label: 'Bem' },
  +     { id: 'great', icon: '🤩', label: 'Ótimo' },
  +     { id: 'angry', icon: '😠', label: 'Irritado' },
  +   ];
  + 
  +   const initQuickRegister = () => {
  +     console.log("Register: ", mood);
  +   };
    
      return (
        <ScreenLayout userName={user.firstName}
          onNotificationPress={() => console.log('Notifications')}
          showNotificationBadge={true}>
          <ThemedView>
  -         <ThemedText>
  -           Novo
  -         </ThemedText>
  +         <Section>
  +           <SectionHeader
  +             title="Como você está hoje?"
  +             subtitle="Sua jornada começa agora"
  +             >
  +           </SectionHeader>
  + 
  +           <Card style={{ minHeight: 200 }}>
  +             <Col gap={16}>
  +               <Between style={styles.quickRegisterHeader}>
  +                 <ThemedText style={styles.quickRegisterTitle}>
  +                   Registro rápido
  +                 </ThemedText>
  + 
  +                 <ThemedText style={styles.quickRegisterBadge}>
  +                   HOJE
  +                 </ThemedText>
  +               </Between>
  + 
  +               <MoodSelector
  +                 style={{paddingLeft: 8, paddingRight: 8, paddingTop: 16 }}
  +                 items={moodOptions}
  +                 value={mood}
  +                 onSelect={setMood}
  +               />
  + 
  +               <Button
  +                 title="Salvar Humor"
  +                 onPress={initQuickRegister}
  +                 loading={isLoading}
  +                 style={styles.quickRegisterButton}
  +               />
  +             </Col>
  +           </Card>
  +         </Section>
          </ThemedView>
        </ScreenLayout>
      )
    }
  + 
  + const styles = StyleSheet.create({
  +   quickRegisterHeader: {
  +     marginTop: 16,
  +     paddingLeft: 16,
  +     paddingRight: 16
  +   },
  +   quickRegisterTitle: {
  +     ...Typography.bodyLg
  +   },
  +   // TODO: Replace when we have badges
  +   quickRegisterBadge: {
  +     fontSize: 12,
  +     lineHeight: 16
  +   },
  +   quickRegisterButton: {
  +     marginLeft: 16,
  +     marginRight: 16,
  +     marginBottom: 16,
  +     ...Shadows.lg
  +   }
  + });