eletrotupi / tcc/ commit / cd79c89

frontend: flesh new triggers screen

Pedro Lucas Porcellis porcellis@eletrotupi.com · 4 months ago cd79c8980d51787d2f9187eb56e28c591ed395bd Browse files
Parents da58efb
Changed files
1
Additions
+166
Deletions
0
frontend/app/triggers/new.tsx added+166
/dev/null → frontend/app/triggers/new.tsx
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 + 
})