eletrotupi / tcc/ frontend/app/(tabs)/new/index.tsx92fe16c5883a76b1919f4c7dcb888c00e2912fc3
4.2 KB | 160 lines Raw
1
import { useState } from "react";
2
import { StyleSheet, View, ActivityIndicator } from "react-native";
3
4
import { Text } from "@/components/ui/Text";
5
import { ScreenLayout } from "@/components/ui/ScreenLayout";
6
import { useAuth } from "@/context/AuthContext";
7
import { Col, Between } from "@/components/ui/LayoutHelpers";
8
import { Card } from "@/components/ui/Cards";
9
import { Button } from "@/components/ui/Button";
10
import { Section, SectionHeader } from "@/components/ui/Sections";
11
import { MoodSelector } from "@/components/ui/EmojiSelectors";
12
import {
13
  Typography,
14
  Shadows,
15
  Colors,
16
  BorderRadius,
17
} from "@/constants/theme";
18
import { router } from "expo-router";
19
import { MOODS } from "@/constants/moods";
20
21
import { useMoodEntries } from "@/hooks";
22
23
import MoodEntryLog from "@/components/ui/MoodEntryLog";
24
import { DailyEnergyWidget } from "@/components/ui/DailyEnergyWidget";
25
import { DailySleepWidget } from "@/components/ui/DailySleepWidget";
26
import { EmptyState } from "@/components/ui/EmptyState";
27
28
export default function New() {
29
  const { user } = useAuth();
30
  const [mood, setMood] = useState<string>("good");
31
  const { data, isLoading } = useMoodEntries({ limit: 5 });
32
  const recentEntries = data?.entries ?? [];
33
34
  const initQuickRegister = () => {
35
    // TODO: Set down on camelCase vs kebab case
36
    router.navigate(`/new/entry?initialMood=${mood}`);
37
  };
38
39
  return (
40
    <ScreenLayout
41
      userName={user?.firstName}
42
      userAvatar={user?.avatarURL}
43
    >
44
      <Section>
45
        <SectionHeader
46
          title="Como você está hoje?"
47
          subtitle="Sua jornada começa agora"
48
          testID="text-welcome-quick-register"
49
        ></SectionHeader>
50
51
        <Card style={{ minHeight: 200 }} testID="card-quick-register">
52
          <Col gap={16}>
53
            <Between style={styles.quickRegisterHeader}>
54
              <Text style={styles.quickRegisterTitle}>
55
                Registro rápido
56
              </Text>
57
58
              <Text style={styles.quickRegisterBadge}>HOJE</Text>
59
            </Between>
60
61
            <MoodSelector
62
              style={{ paddingLeft: 8, paddingRight: 8, paddingTop: 16 }}
63
              items={MOODS}
64
              value={mood}
65
              onSelect={setMood}
66
            />
67
68
            <Button
69
              title="Salvar Humor"
70
              onPress={initQuickRegister}
71
              style={styles.quickRegisterButton}
72
              testID="button-save-mood"
73
            />
74
          </Col>
75
        </Card>
76
      </Section>
77
78
      {/* TODO: Check whether we gonna have to generate these on demand */}
79
      <Section>
80
        <SectionHeader title="Entre hoje e ontem" />
81
82
        <View
83
          style={[
84
            {
85
              flexDirection: "row",
86
              gap: 16,
87
            },
88
          ]}
89
        >
90
          <View style={{ flex: 1 }}>
91
            <DailyEnergyWidget />
92
          </View>
93
94
          <View style={{ flex: 1 }}>
95
            <DailySleepWidget />
96
          </View>
97
        </View>
98
      </Section>
99
100
      <Section>
101
        <SectionHeader title="Registros recentes" />
102
103
        {isLoading ? (
104
          <ActivityIndicator />
105
        ) : recentEntries.length === 0 ? (
106
          <EmptyState
107
            title="Nenhum registro ainda"
108
            subtitle="Seus registros de humor aparecerão aqui."
109
          />
110
        ) : (
111
          <Col gap={8}>
112
            {recentEntries.map((entry) => (
113
              <MoodEntryLog key={entry.id} entry={entry} />
114
            ))}
115
          </Col>
116
        )}
117
      </Section>
118
    </ScreenLayout>
119
  );
120
}
121
122
const styles = StyleSheet.create({
123
  quickRegisterHeader: {
124
    marginTop: 16,
125
    paddingLeft: 16,
126
    paddingRight: 16,
127
  },
128
  quickRegisterTitle: {
129
    ...Typography.bodyLg,
130
  },
131
  // TODO: Replace when we have badges
132
  quickRegisterBadge: {
133
    fontSize: 12,
134
    lineHeight: 16,
135
  },
136
  quickRegisterButton: {
137
    marginLeft: 16,
138
    marginRight: 16,
139
    marginBottom: 16,
140
    ...Shadows.lg,
141
  },
142
  lineTrack: {
143
    height: 6,
144
    backgroundColor: Colors.light.divider,
145
    borderRadius: BorderRadius.full,
146
    marginBottom: 4,
147
    overflow: "hidden",
148
  },
149
  lineFill: {
150
    height: "100%",
151
    backgroundColor: Colors.light.tint,
152
    borderRadius: BorderRadius.full,
153
  },
154
  indicatorGreen: {
155
    color: Colors.light.tint,
156
    fontSize: 11,
157
    fontWeight: 600,
158
    lineHeight: 16.5,
159
  },
160
});