frontend: add latest mood entries added
Parents:
7d3aeaf1 file(s) changed
- frontend/app/(tabs)/new/index.tsx +82 -14
frontend/app/(tabs)/new/index.tsx
@@ -1,6 +1,8 @@
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';
@@ -9,27 +11,81 @@ 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}`)
@@ -39,7 +95,6 @@ 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?"
@@ -61,7 +116,7 @@ </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 />
@@ -86,7 +141,20 @@ <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 }