eletrotupi / tcc/ frontend/app/(tabs)/new/index.tsxea1475564abe0f26ea6bb9c6c840b714261aad91
4.3 KB | 161 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
      showNotificationBadge={true}
44
    >
45
      <Section>
46
        <SectionHeader
47
          title="Como você está hoje?"
48
          subtitle="Sua jornada começa agora"
49
          testID="text-welcome-quick-register"
50
        ></SectionHeader>
51
52
        <Card style={{ minHeight: 200 }} testID="card-quick-register">
53
          <Col gap={16}>
54
            <Between style={styles.quickRegisterHeader}>
55
              <Text style={styles.quickRegisterTitle}>
56
                Registro rápido
57
              </Text>
58
59
              <Text style={styles.quickRegisterBadge}>HOJE</Text>
60
            </Between>
61
62
            <MoodSelector
63
              style={{ paddingLeft: 8, paddingRight: 8, paddingTop: 16 }}
64
              items={MOODS}
65
              value={mood}
66
              onSelect={setMood}
67
            />
68
69
            <Button
70
              title="Salvar Humor"
71
              onPress={initQuickRegister}
72
              style={styles.quickRegisterButton}
73
              testID="button-save-mood"
74
            />
75
          </Col>
76
        </Card>
77
      </Section>
78
79
      {/* TODO: Check whether we gonna have to generate these on demand */}
80
      <Section>
81
        <SectionHeader title="Entre hoje e ontem" />
82
83
        <View
84
          style={[
85
            {
86
              flexDirection: "row",
87
              gap: 16,
88
            },
89
          ]}
90
        >
91
          <View style={{ flex: 1 }}>
92
            <DailyEnergyWidget />
93
          </View>
94
95
          <View style={{ flex: 1 }}>
96
            <DailySleepWidget />
97
          </View>
98
        </View>
99
      </Section>
100
101
      <Section>
102
        <SectionHeader title="Registros recentes" />
103
104
        {isLoading ? (
105
          <ActivityIndicator />
106
        ) : recentEntries.length === 0 ? (
107
          <EmptyState
108
            title="Nenhum registro ainda"
109
            subtitle="Seus registros de humor aparecerão aqui."
110
          />
111
        ) : (
112
          <Col gap={8}>
113
            {recentEntries.map((entry) => (
114
              <MoodEntryLog key={entry.id} entry={entry} />
115
            ))}
116
          </Col>
117
        )}
118
      </Section>
119
    </ScreenLayout>
120
  );
121
}
122
123
const styles = StyleSheet.create({
124
  quickRegisterHeader: {
125
    marginTop: 16,
126
    paddingLeft: 16,
127
    paddingRight: 16,
128
  },
129
  quickRegisterTitle: {
130
    ...Typography.bodyLg,
131
  },
132
  // TODO: Replace when we have badges
133
  quickRegisterBadge: {
134
    fontSize: 12,
135
    lineHeight: 16,
136
  },
137
  quickRegisterButton: {
138
    marginLeft: 16,
139
    marginRight: 16,
140
    marginBottom: 16,
141
    ...Shadows.lg,
142
  },
143
  lineTrack: {
144
    height: 6,
145
    backgroundColor: Colors.light.divider,
146
    borderRadius: BorderRadius.full,
147
    marginBottom: 4,
148
    overflow: "hidden",
149
  },
150
  lineFill: {
151
    height: "100%",
152
    backgroundColor: Colors.light.tint,
153
    borderRadius: BorderRadius.full,
154
  },
155
  indicatorGreen: {
156
    color: Colors.light.tint,
157
    fontSize: 11,
158
    fontWeight: 600,
159
    lineHeight: 16.5,
160
  },
161
});