eletrotupi / tcc/ commit / bdfa463

frontend: add latest mood entries added

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago bdfa4639e3d0a73df53bf9a49c1e2e72499b57ab Browse files
Parents 7d3aeaf
Changed files
1
Additions
+82
Deletions
-14
frontend/app/(tabs)/new/index.tsx modified+82 -14
frontend/app/(tabs)/new/index.tsx
1 1 
import { useEffect, useState } from 'react';
2 2 
import {
3 - 
  StyleSheet
3 + 
  StyleSheet,
4 + 
  View,
5 + 
  Text
4 6 
} from 'react-native';
5 7
6 8 
import { ThemedText } from '@/components/misc/themed-text';
7 9 
import { ThemedView } from '@/components/misc/themed-view';
8 10 
import { ScreenLayout } from '@/components/ui/ScreenLayout';
9 11 
import { useAuth } from '@/context/AuthContext';
10 12 
import { Grid, Col, Row, Between } from '@/components/ui/LayoutHelpers';
11 13 
import { Card } from '@/components/ui/Cards';
14 + 
import { Badge } from '@/components/ui/Badge';
12 15 
import { Button } from '@/components/ui/Button';
13 16 
import { Section, SectionHeader } from '@/components/ui/Sections';
14 17 
import { MoodSelector } from '@/components/ui/EmojiSelectors';
15 - 
import { Typography, Spacing, Shadows } from '@/constants/theme';
18 + 
import { Typography, Spacing, Shadows, Colors } from '@/constants/theme';
16 19 
import { useThemeColor } from '@/hooks/use-theme-color';
17 20 
import { router } from 'expo-router';
21 + 
import {
22 + 
  MoodDefinition, MOODS
23 + 
} from '@/constants/moods'
24 +
25 + 
const MoodEntryLog = ({ mood: MoodDefinition, moment: Date }) => {
26 + 
  const styles = StyleSheet.create({
27 + 
    card: {
28 + 
      flexDirection: "row",
29 + 
      alignItems: "center",
30 + 
      gap: 14,
31 + 
      overflow: "hidden",
32 + 
      padding: Spacing.cardGap
33 + 
    },
34 + 
    moodIcon: {
35 + 
      width: 48,
36 + 
      height: 48,
37 + 
      alignItems: "center",
38 + 
      justifyContent: "center",
39 + 
      flexShrink: 0,
40 + 
    },
41 + 
    moodIconEmoji: {
42 + 
      fontSize: 26,
43 + 
    },
44 + 
    // Text
45 + 
    moodBlock: {
46 + 
      flex: 1,
47 + 
      minWidth: 0,
48 + 
    },
49 + 
    title: {
50 + 
      fontSize: 15,
51 + 
      fontWeight: "700",
52 + 
      color: Colors.light.text,
53 + 
      letterSpacing: -0.2,
54 + 
      marginBottom: 3,
55 + 
    },
56 + 
    subtitle: {
57 + 
      fontSize: 12.5,
58 + 
      fontWeight: "500",
59 + 
      color: Colors.light.textSecondary,
60 + 
      letterSpacing: 0.1,
61 + 
    },
62 + 
  });
63 +
64 + 
  return (
65 + 
    <Card style={styles.card}>
66 + 
      <View style={styles.moodIcon}>
67 + 
        <Text style={styles.moodIconEmoji}>😀</Text>
68 + 
      </View>
69 +
70 + 
      <View style={styles.moodBlock}>
71 + 
        <Text style={styles.title} numberOfLines={1}>
72 + 
          Neutro
73 + 
        </Text>
74 + 
        <ThemedText style={styles.subtitle} numberOfLines={1}>
75 + 
          Ontem às 10h
76 + 
        </ThemedText>
77 + 
      </View>
78 +
79 + 
      <Badge label="Manhã" />
80 + 
    </Card>
81 + 
  );
82 + 
}
18 83
19 84 
export default function New() {
20 85 
  const { user } = useAuth();
21 86 
  const [mood, setMood] = useState<string>('good');
22 87 
  const [isLoading, setIsLoading] = useState<boolean>(false);
23 88
24 - 
  // TODO: Move these elsewhere
25 - 
  const moodOptions = [
26 - 
    { id: 'sad', icon: '😢', label: 'Triste' },
27 - 
    { id: 'neutral', icon: '😐', label: 'Neutro' },
28 - 
    { id: 'good', icon: '😊', label: 'Bem' },
29 - 
    { id: 'great', icon: '🤩', label: 'Ótimo' },
30 - 
    { id: 'angry', icon: '😠', label: 'Irritado' },
31 - 
  ];
32 -
33 89 
  const initQuickRegister = () => {
34 90 
    // TODO: Set down on camelCase vs kebab case
35 91 
    router.navigate(`/new/entry?initialMood=${mood}`)
36 92 
  };
37 93
38 94 
  return (
39 95 
    <ScreenLayout userName={user.firstName} userAvatar={user.avatarURL}
40 96 
      onNotificationPress={() => console.log('Notifications')}
41 97 
      showNotificationBadge={true}>
42 - 
      <ThemedView>
43 98 
        <Section>
44 99 
          <SectionHeader
45 100 
            title="Como você está hoje?"
46 101 
            subtitle="Sua jornada começa agora"
47 102 
            >
59 114 
                </ThemedText>
60 115 
              </Between>
61 116
62 117 
              <MoodSelector
63 118 
                style={{paddingLeft: 8, paddingRight: 8, paddingTop: 16 }}
64 - 
                items={moodOptions}
119 + 
                items={MOODS}
65 120 
                value={mood}
66 121 
                onSelect={setMood}
67 122 
              />
68 123
69 124 
              <Button
84 139
85 140 
            <Card style={{minHeight: 150, backgroundColor: 'tomato'}}>
86 141 
            </Card>
87 142 
          </Grid>
88 143 
        </Section>
89 - 
      </ThemedView>
144 +
145 + 
        <Section>
146 + 
          <SectionHeader title="Registros recentes" />
147 +
148 + 
          <MoodEntryLog
149 + 
            mood="sad"
150 + 
            moment={new Date()}
151 + 
          />
152 +
153 + 
          <MoodEntryLog
154 + 
            mood="good"
155 + 
            moment={new Date()}
156 + 
          />
157 + 
        </Section>
90 158 
    </ScreenLayout>
91 159 
  )
92 160 
}
93 161
94 162 
const styles = StyleSheet.create({
110 178 
    marginRight: 16,
111 179 
    marginBottom: 16,
112 180 
    ...Shadows.lg
113 181 
  }
114 182 
});