frontend: flesh new triggers screen
Parents:
da58efb1 file(s) changed
- frontend/app/triggers/new.tsx +166 -0
frontend/app/triggers/new.tsx
@@ -0,0 +1,166 @@
1 + import {
2 + View,
3 + Text,
4 + StyleSheet,
5 + KeyboardAvoidingView,
6 + ScrollView
7 + } from 'react-native';
8 + import { useEffect, useState } from 'react';
9 + import { router } from 'expo-router';
10 +
11 + import { Card } from '@/components/ui/Cards';
12 + import { Input, TextArea } from '@/components/ui/Input';
13 + import { Button } from '@/components/ui/Button';
14 + import { Section, SectionHeader } from '@/components/ui/Sections';
15 + import { Spacing, Typography, Colors, BorderRadius } from '@/constants/theme';
16 + import { Ionicons, MaterialIcons } from '@expo/vector-icons';
17 + import { useCreateSleepRecord } from '@/hooks';
18 + import { CategoryChips, CategoryOption } from '@/components/ui/CategoryChips';
19 + import { TriggerCategory } from '@/constants/triggers';
20 +
21 + const TRIGGER_CATEGORIES: CategoryOption<TriggerCategory>[] = [
22 + {
23 + label: 'Trabalho',
24 + value: 'work',
25 + icon: <Ionicons size={16} color="#60A5FA" name="briefcase" />
26 + },
27 + {
28 + label: 'Social',
29 + value: 'social',
30 + icon: <MaterialIcons size={16} color="#AF52DE" name="diversity-1" />
31 + },
32 + {
33 + label:
34 + 'Saúde',
35 + value: 'health',
36 + icon: <MaterialIcons size={16} color="#34C759" name="healing" />
37 + },
38 + {
39 + label: 'Família',
40 + value: 'family',
41 + icon: <MaterialIcons size={16} color="#FF9500" name="family-restroom" />
42 + },
43 + {
44 + label: 'Outros',
45 + value: 'other',
46 + icon: <Ionicons size={16} color="#8E8E93" name="ellipsis-horizontal" />
47 + },
48 + ];
49 +
50 + export default function NewTrigger() {
51 + const [moment, setMoment] = useState(new Date())
52 + const [comment, setComment] = useState();
53 + const [category, setCategory] = useState('work');
54 +
55 + const save = async () => {
56 + const data = {
57 + moment,
58 + comment,
59 + };
60 +
61 + console.log("Trigger data: ", data)
62 + //await createSleepRecord.mutateAsync(data)
63 + router.replace("/")
64 + };
65 +
66 + return (
67 + <KeyboardAvoidingView
68 + behavior='height'
69 + style={styles.keyboardView}>
70 + <ScrollView scrollEventThrottle={16}>
71 + <View style={styles.container}>
72 + <View style={styles.header}>
73 + <View style={styles.innerHeaderWrapper}>
74 + <View style={[styles.headerIcon, { backgroundColor: '#FFF7ED' }]}>
75 + <Ionicons name="flash-outline" size={20} color="#EA580C" />
76 + </View>
77 +
78 + <View style={styles.headerTitleSubtitle}>
79 + <Text style={styles.headerTitle}>Aconteceu algo?</Text>
80 + <Text style={styles.headerSubtitle}>
81 + Registre acontecimentos fora do padrão
82 + </Text>
83 + </View>
84 + </View>
85 +
86 + <Text style={styles.description}>
87 + Identificar gatilhos ajuda a entender melhor seus padrões emocionais
88 + </Text>
89 + </View>
90 +
91 + <Section>
92 + <SectionHeader title="Selecionar uma categoria" />
93 + <CategoryChips
94 + options={TRIGGER_CATEGORIES}
95 + active={category}
96 + onChange={setCategory} />
97 + </Section>
98 +
99 + <Section>
100 + <SectionHeader title="Adicione detalhes" />
101 +
102 + <Card style={styles.mainCard}>
103 + <TextArea
104 + label="Comentários sobre"
105 + type="text"
106 + variant="darkGhost"
107 + onChangeText={(val) => setComment(val)}
108 + value={comment}
109 + minRows={5}
110 + maxRows={10}
111 + placeholder="Descreva o que gerou esse sentimento"
112 + style={styles.notes}
113 + />
114 + </Card>
115 + </Section>
116 +
117 + <Button title="Salvar Registro" onPress={save} />
118 + </View>
119 + </ScrollView>
120 + </KeyboardAvoidingView>
121 + );
122 + }
123 +
124 + const styles = StyleSheet.create({
125 + container: {
126 + gap: 24,
127 + paddingHorizontal: Spacing.containerPadding,
128 + paddingVertical: Spacing.sectionGap,
129 + marginBottom: 50
130 + },
131 + mainCard: {
132 + padding: Spacing.cardGap
133 + },
134 + // Header
135 + header: {
136 + },
137 + headerIcon: {
138 + paddingVertical: 15,
139 + paddingHorizontal: 14,
140 + width: 48,
141 + borderRadius: BorderRadius.md,
142 + },
143 + innerHeaderWrapper: {
144 + flex: 1,
145 + flexDirection: 'row',
146 + alignItems: 'center'
147 + },
148 + headerTitleSubtitle: {
149 + marginLeft: 10
150 + },
151 + headerTitle: {
152 + ...Typography.headlineMd
153 + },
154 + headerSubtitle: {
155 + ...Typography.bodyMd,
156 + color: Colors.light.textSecondary
157 + },
158 + description: {
159 + ...Typography.bodyMd,
160 + color: Colors.light.textSecondary,
161 + marginTop: 20
162 + },
163 + keyboardView: {
164 + flex: 1,
165 + },
166 + })