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