frontend: introduce link row component

Pedro Lucas Porcellis porcellis@eletrotupi.com 13 days ago 71fdb8f591445852b09aef1f212869a412d68eb3

Parents: ee13593

2 file(s) changed

frontend/app/triggers/new.tsx +65 -3
frontend/components/ui/LinkRow.tsx +67 -0

frontend/app/triggers/new.tsx

@@ -5,19 +5,21 @@ StyleSheet,
      KeyboardAvoidingView,
      ScrollView,
    } from "react-native";
  - import { useEffect, useState } from "react";
  + import { useState } from "react";
    import { router } from "expo-router";
    
    import { Card } from "@/components/ui/Cards";
  - import { Input, TextArea } from "@/components/ui/Input";
  + import { TextArea } from "@/components/ui/Input";
    import { Button } from "@/components/ui/Button";
    import { Section, SectionHeader } from "@/components/ui/Sections";
    import { Spacing, Typography, Colors, BorderRadius } from "@/constants/theme";
    import { Ionicons, MaterialIcons } from "@expo/vector-icons";
  - import { useCreateTrigger } from "@/hooks";
  + import { useCreateTrigger, useMoodEntries } from "@/hooks";
    import { CategoryChips, CategoryOption } from "@/components/ui/CategoryChips";
    import { TriggerCategory } from "@/constants/triggers";
    import { TimePicker } from "@/components/ui/TimePicker";
  + import { getMood } from "@/constants/moods";
  + import { LinkRow } from "@/components/ui/LinkRow";
    
    const TRIGGER_CATEGORIES: CategoryOption<TriggerCategory>[] = [
      {

@@ -52,6 +54,15 @@ const [moment, setMoment] = useState(new Date());
      const [comment, setComment] = useState("");
      const [category, setCategory] = useState("WORK");
      const createTrigger = useCreateTrigger();
  +   const [linkMood, setLinkMood] = useState(false);
  +   const { data: moodEntries, isLoading: isLoadingMood } = useMoodEntries({
  +     limit: 1,
  +   });
  + 
  +   const latestMood = moodEntries?.entries[0] ?? null;
  +   const moodDef = latestMood
  +     ? getMood(latestMood.selectedMood.toLowerCase())
  +     : null;
    
      const save = async () => {
        const data = {

@@ -118,6 +129,46 @@ />
                </Card>
              </Section>
    
  +           <Section>
  +             <SectionHeader title="Vincular registro" />
  + 
  +             <LinkRow
  +               icon={
  +                 <View
  +                   style={[styles.iconWrap, { backgroundColor: "transparent" }]}
  +                 >
  +                   <Text style={styles.moodIconEmoji}>
  +                     {moodDef?.icon ?? "😐"}
  +                   </Text>
  +                 </View>
  +               }
  +               label="Humor atual"
  +               sublabel={
  +                 isLoadingMood ? "..." : (moodDef?.label ?? "Nenhum registrado")
  +               }
  +               disabled={!latestMood}
  +               value={linkMood && !!latestMood}
  +               onToggle={setLinkMood}
  +             />
  + 
  +             <LinkRow
  +               icon={
  +                 <MaterialIcons
  +                   name="psychology"
  +                   size={40}
  +                   color={Colors.light.disabled}
  +                 />
  +               }
  +               label="Atividade"
  +               sublabel={"Nenhuma registrada"}
  +               disabled={true}
  +               value={false}
  +               onToggle={() => {
  +                 console.log("When we get that");
  +               }}
  +             />
  +           </Section>
  + 
              <Button title="Salvar Registro" onPress={save} />
            </View>
          </ScrollView>

@@ -165,5 +216,16 @@ marginTop: 20,
      },
      keyboardView: {
        flex: 1,
  +   },
  +   moodIconEmoji: {
  +     fontSize: 26,
  +   },
  +   iconWrap: {
  +     width: 40,
  +     height: 40,
  +     borderRadius: 20,
  +     alignItems: "center",
  +     justifyContent: "center",
  +     marginTop: 1,
      },
    });

frontend/components/ui/LinkRow.tsx

@@ -0,0 +1,67 @@
  + import React from "react";
  + import { StyleSheet, View, Text, Switch } from "react-native";
  + import { Card } from "@/components/ui/Cards";
  + import { Typography, Colors, Spacing } from "@/constants/theme";
  + 
  + const styles = StyleSheet.create({
  +   linkRowCard: {
  +     padding: Spacing.cardGap,
  +     flex: 1,
  +     flexDirection: "row",
  +     alignItems: "flex-start",
  +     justifyContent: "space-between",
  +     gap: 12,
  +   },
  +   linkRowIcon: {
  +     width: 40,
  +     height: 40,
  +   },
  +   linkRowDescription: {
  +     flexGrow: 1,
  +   },
  +   linkRowLabel: {
  +     ...Typography.bodyLg,
  +   },
  +   linkRowSublabel: {
  +     ...Typography.labelSm,
  +   },
  + });
  + 
  + type LinkRowProps = {
  +   icon: React.ReactNode;
  +   label: string;
  +   sublabel: string;
  +   disabled?: boolean;
  +   value?: boolean;
  +   onToggle: (value: boolean) => void;
  + };
  + 
  + export const LinkRow = ({
  +   icon,
  +   label,
  +   sublabel,
  +   disabled,
  +   value,
  +   onToggle,
  + }: LinkRowProps) => {
  +   return (
  +     <Card
  +       style={styles.linkRowCard}
  +       onPress={() => !disabled && onToggle(!value)}
  +     >
  +       {icon}
  + 
  +       <View style={styles.linkRowDescription}>
  +         <Text style={styles.linkRowLabel}>{label}</Text>
  +         <Text style={styles.linkRowSublabel}>{sublabel}</Text>
  +       </View>
  + 
  +       <Switch
  +         value={value}
  +         trackColor={{ false: "#767577", true: Colors.light.tint }}
  +         disabled={disabled}
  +         onValueChange={onToggle}
  +       />
  +     </Card>
  +   );
  + };