frontend: introduce link row component
Pedro Lucas Porcellis porcellis@eletrotupi.com · 4 months ago
71fdb8f591445852b09aef1f212869a412d68eb3 Browse filesParents
ee13593Changed files
2
Additions
+132
Deletions
-3
frontend/app/triggers/new.tsx
1 1
import {
2 2
View,
3 3
Text,
4 4
StyleSheet,
5 5
KeyboardAvoidingView,
6 6
ScrollView,
7 7
} from "react-native";
8 -
import { useEffect, useState } from "react";
8 +
import { useState } from "react";
9 9
import { router } from "expo-router";
10 10
11 11
import { Card } from "@/components/ui/Cards";
12 -
import { Input, TextArea } from "@/components/ui/Input";
12 +
import { TextArea } from "@/components/ui/Input";
13 13
import { Button } from "@/components/ui/Button";
14 14
import { Section, SectionHeader } from "@/components/ui/Sections";
15 15
import { Spacing, Typography, Colors, BorderRadius } from "@/constants/theme";
16 16
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
17 -
import { useCreateTrigger } from "@/hooks";
17 +
import { useCreateTrigger, useMoodEntries } from "@/hooks";
18 18
import { CategoryChips, CategoryOption } from "@/components/ui/CategoryChips";
19 19
import { TriggerCategory } from "@/constants/triggers";
20 20
import { TimePicker } from "@/components/ui/TimePicker";
21 +
import { getMood } from "@/constants/moods";
22 +
import { LinkRow } from "@/components/ui/LinkRow";
21 23
22 24
const TRIGGER_CATEGORIES: CategoryOption<TriggerCategory>[] = [
23 25
{
24 26
label: "Trabalho",
25 27
value: "WORK",
50 52
export default function NewTrigger() {
51 53
const [moment, setMoment] = useState(new Date());
52 54
const [comment, setComment] = useState("");
53 55
const [category, setCategory] = useState("WORK");
54 56
const createTrigger = useCreateTrigger();
57 +
const [linkMood, setLinkMood] = useState(false);
58 +
const { data: moodEntries, isLoading: isLoadingMood } = useMoodEntries({
59 +
limit: 1,
60 +
});
61 +
62 +
const latestMood = moodEntries?.entries[0] ?? null;
63 +
const moodDef = latestMood
64 +
? getMood(latestMood.selectedMood.toLowerCase())
65 +
: null;
55 66
56 67
const save = async () => {
57 68
const data = {
58 69
moment,
59 70
comment,
116 127
placeholder="Descreva o que gerou esse sentimento"
117 128
/>
118 129
</Card>
119 130
</Section>
120 131
132 +
<Section>
133 +
<SectionHeader title="Vincular registro" />
134 +
135 +
<LinkRow
136 +
icon={
137 +
<View
138 +
style={[styles.iconWrap, { backgroundColor: "transparent" }]}
139 +
>
140 +
<Text style={styles.moodIconEmoji}>
141 +
{moodDef?.icon ?? "😐"}
142 +
</Text>
143 +
</View>
144 +
}
145 +
label="Humor atual"
146 +
sublabel={
147 +
isLoadingMood ? "..." : (moodDef?.label ?? "Nenhum registrado")
148 +
}
149 +
disabled={!latestMood}
150 +
value={linkMood && !!latestMood}
151 +
onToggle={setLinkMood}
152 +
/>
153 +
154 +
<LinkRow
155 +
icon={
156 +
<MaterialIcons
157 +
name="psychology"
158 +
size={40}
159 +
color={Colors.light.disabled}
160 +
/>
161 +
}
162 +
label="Atividade"
163 +
sublabel={"Nenhuma registrada"}
164 +
disabled={true}
165 +
value={false}
166 +
onToggle={() => {
167 +
console.log("When we get that");
168 +
}}
169 +
/>
170 +
</Section>
171 +
121 172
<Button title="Salvar Registro" onPress={save} />
122 173
</View>
123 174
</ScrollView>
124 175
</KeyboardAvoidingView>
125 176
);
163 214
color: Colors.light.textSecondary,
164 215
marginTop: 20,
165 216
},
166 217
keyboardView: {
167 218
flex: 1,
219 +
},
220 +
moodIconEmoji: {
221 +
fontSize: 26,
222 +
},
223 +
iconWrap: {
224 +
width: 40,
225 +
height: 40,
226 +
borderRadius: 20,
227 +
alignItems: "center",
228 +
justifyContent: "center",
229 +
marginTop: 1,
168 230
},
169 231
});
/dev/null → frontend/components/ui/LinkRow.tsx
1 +
import React from "react";
2 +
import { StyleSheet, View, Text, Switch } from "react-native";
3 +
import { Card } from "@/components/ui/Cards";
4 +
import { Typography, Colors, Spacing } from "@/constants/theme";
5 +
6 +
const styles = StyleSheet.create({
7 +
linkRowCard: {
8 +
padding: Spacing.cardGap,
9 +
flex: 1,
10 +
flexDirection: "row",
11 +
alignItems: "flex-start",
12 +
justifyContent: "space-between",
13 +
gap: 12,
14 +
},
15 +
linkRowIcon: {
16 +
width: 40,
17 +
height: 40,
18 +
},
19 +
linkRowDescription: {
20 +
flexGrow: 1,
21 +
},
22 +
linkRowLabel: {
23 +
...Typography.bodyLg,
24 +
},
25 +
linkRowSublabel: {
26 +
...Typography.labelSm,
27 +
},
28 +
});
29 +
30 +
type LinkRowProps = {
31 +
icon: React.ReactNode;
32 +
label: string;
33 +
sublabel: string;
34 +
disabled?: boolean;
35 +
value?: boolean;
36 +
onToggle: (value: boolean) => void;
37 +
};
38 +
39 +
export const LinkRow = ({
40 +
icon,
41 +
label,
42 +
sublabel,
43 +
disabled,
44 +
value,
45 +
onToggle,
46 +
}: LinkRowProps) => {
47 +
return (
48 +
<Card
49 +
style={styles.linkRowCard}
50 +
onPress={() => !disabled && onToggle(!value)}
51 +
>
52 +
{icon}
53 +
54 +
<View style={styles.linkRowDescription}>
55 +
<Text style={styles.linkRowLabel}>{label}</Text>
56 +
<Text style={styles.linkRowSublabel}>{sublabel}</Text>
57 +
</View>
58 +
59 +
<Switch
60 +
value={value}
61 +
trackColor={{ false: "#767577", true: Colors.light.tint }}
62 +
disabled={disabled}
63 +
onValueChange={onToggle}
64 +
/>
65 +
</Card>
66 +
);
67 +
};