frontend: rig mood component cards & reset new mood entry page when going back
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
168d22498bb1eb151e34366b5620c81f53768e83 Browse filesParents
6b55ce5Changed files
3
Additions
+98
Deletions
-11
frontend/app/(tabs)/new/entry.tsx
1 1
import { useState, useEffect } from 'react';
2 2
import {
3 3
Link, router, useLocalSearchParams
4 4
} from 'expo-router';
5 5
20 20
import { Button } from '@/components/ui/Button';
21 21
import { Input, TextArea } from '@/components/ui/Input';
22 22
import { Section, SectionHeader } from '@/components/ui/Sections';
23 23
import { Spacing, Typography, Colors } from '@/constants/theme';
24 24
import { ScaleSlider } from '@/components/ui/ScaleSlider';
25 +
import { MoodComponentCard } from '@/components/ui/MoodComponentCard';
25 26
import { Ionicons } from '@expo/vector-icons';
26 27
import { useThemeColor } from '@/hooks/use-theme-color';
27 28
import {
28 29
useMoodEntryStore,
29 30
} from '@/stores/moodEntry';
44 45
45 46
const {
46 47
selectedMood,
47 48
setSelectedMood,
48 49
components,
50 +
reset
49 51
} = useMoodEntryStore();
50 52
51 53
useEffect(() => {
52 54
setSelectedMood(getMood(initialMood));
53 55
}, [initialMood]);
54 56
57 +
useEffect(() => {
58 +
return () => reset();
59 +
}, []);
60 +
55 61
const editComponents = () => {
56 -
console.log("Wants to open the components");
57 -
58 62
router.push("/entry/mood-components")
59 63
}
60 64
61 65
return (
62 66
<View>
67 71
<ThemedText style={styles.statusPrefix}>
68 72
Como você está se sentindo agora?
69 73
</ThemedText>
70 74
71 75
<ThemedText style={styles.statusText}>
72 -
{selectedMood.label || "Neutro"}
76 +
{selectedMood?.label || "Neutro"}
73 77
</ThemedText>
74 78
</Center>
75 79
76 80
<Card style={styles.resumeCard}>
77 81
<Col gap={24}>
119 123
/>
120 124
</Card>
121 125
122 126
<Section>
123 127
<SectionHeader title="Componentes do Humor" info="Editar" />
124 -
<Grid gap={4}>
125 -
<Card style={{height: 38}} />
126 -
<Card style={{height: 38}} />
127 -
</Grid>
128 +
{components.length > 0 ? (
129 +
<Grid gap={2} style={{ marginTop: 8 }}>
130 +
{components.map((comp) => (
131 +
<MoodComponentCard
132 +
key={comp.id}
133 +
id={comp.id}
134 +
intensity={comp.intensity}
135 +
/>
136 +
))}
137 +
</Grid>
138 +
) : null}
128 139
129 140
<Button title="Adicionar Componentes"
130 -
onPress={editComponents}
131 -
textStyle={{ fontWeight: 500 }}
132 -
variant="dashed"
133 -
/>
141 +
onPress={editComponents}
142 +
textStyle={{ fontWeight: 500 }}
143 +
variant="dashed"
144 +
/>
134 145
</Section>
135 146
</View>
136 147
</ScrollView>
137 148
</View>
138 149
);
155 166
},
156 167
resumeCard: {
157 168
padding: Spacing.cardGap,
158 169
}
159 170
});
/dev/null → frontend/components/ui/MoodComponentCard.tsx
1 +
import React from 'react';
2 +
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
3 +
import { Row } from '@/components/ui/LayoutHelpers';
4 +
import { Card } from '@/components/ui/Cards';
5 +
import { getMoodComponent, intensityLabel } from '@/constants/mood-components';
6 +
import { Theme } from '@/constants/theme';
7 +
8 +
interface MoodComponentCardProps {
9 +
id: string;
10 +
intensity: number;
11 +
style?: ViewStyle;
12 +
}
13 +
14 +
export const MoodComponentCard: React.FC<MoodComponentCardProps> = ({
15 +
id,
16 +
intensity,
17 +
style,
18 +
}) => {
19 +
const definition = getMoodComponent(id);
20 +
if (!definition) return null;
21 +
22 +
return (
23 +
<Card style={[styles.card, style]}>
24 +
<Row gap={6} style={styles.inner}>
25 +
<View style={styles.mood}>
26 +
<View style={[styles.dot, { backgroundColor: definition.color }]} />
27 +
<Text style={styles.label} numberOfLines={1}>
28 +
{definition.label}
29 +
</Text>
30 +
</View>
31 +
32 +
<Text style={styles.intensity} numberOfLines={1}>
33 +
{intensityLabel(intensity)}
34 +
</Text>
35 +
</Row>
36 +
</Card>
37 +
);
38 +
};
39 +
40 +
const styles = StyleSheet.create({
41 +
card: {
42 +
paddingHorizontal: 10,
43 +
paddingVertical: 8,
44 +
},
45 +
mood: {
46 +
flex: 1,
47 +
flexDirection: 'row',
48 +
alignItems: 'center',
49 +
height: '100%',
50 +
},
51 +
inner: {
52 +
alignItems: 'baseline',
53 +
flexShrink: 1,
54 +
},
55 +
dot: {
56 +
width: 8,
57 +
height: 8,
58 +
borderRadius: 5,
59 +
flexShrink: 0,
60 +
marginRight: 4,
61 +
justifyContent: 'center'
62 +
},
63 +
label: {
64 +
fontSize: Theme.typography.bodyMd.fontSize,
65 +
fontWeight: '600',
66 +
color: Theme.colors.light.text,
67 +
flexShrink: 1,
68 +
},
69 +
intensity: {
70 +
fontSize: Theme.typography.labelSm.fontSize,
71 +
color: Theme.colors.light.moodIntensityLabel,
72 +
flexShrink: 1,
73 +
height: '100%',
74 +
},
75 +
});
frontend/constants/theme.ts
1 1
/**
2 2
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
3 3
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
4 4
*/
5 5
66 66
cardShadow: 'rgba(0, 0, 0, 0.05)',
67 67
68 68
// Active / Inactive States
69 69
activeBackground: STATUS_ACTIVE_BG,
70 70
inactiveOpacity: 0.7,
71 +
moodIntensityLabel: '#94a3b8',
71 72
72 73
// Semantic Accents (for categorization)
73 74
accentBlue: PILL_BLUE,
74 75
accentIndigo: PILL_INDIGO,
75 76
accentPurple: PILL_PURPLE,
211 212
typography: Typography,
212 213
spacing: Spacing,
213 214
shadows: Shadows,
214 215
borderRadius: BorderRadius
215 216
};