eletrotupi / tcc/ frontend/app/(tabs)/new/index.tsx1b7bbac5b9f7913a9d8f8b0e29870cdbdbadd226
4.3 KB | 164 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
        <SectionHeader title="Entre hoje e ontem" />
90
91
        <View
92
          style={[
93
            {
94
              flexDirection: "row",
95
              gap: 16,
96
            },
97
          ]}
98
        >
99
          <View style={{ flex: 1 }}>
100
            <DailyEnergyWidget />
101
          </View>
102
103
          <View style={{ flex: 1 }}>
104
            <DailySleepWidget />
105
          </View>
106
        </View>
107
      </Section>
108
109
      <Section>
110
        <SectionHeader title="Registros recentes" />
111
112
        {isLoading ? (
113
          <ActivityIndicator />
114
        ) : (
115
          <Col gap={8}>
116
            {recentEntries.map((entry) => (
117
              <MoodEntryLog key={entry.id} entry={entry} />
118
            ))}
119
          </Col>
120
        )}
121
      </Section>
122
    </ScreenLayout>
123
  );
124
}
125
126
const styles = StyleSheet.create({
127
  quickRegisterHeader: {
128
    marginTop: 16,
129
    paddingLeft: 16,
130
    paddingRight: 16,
131
  },
132
  quickRegisterTitle: {
133
    ...Typography.bodyLg,
134
  },
135
  // TODO: Replace when we have badges
136
  quickRegisterBadge: {
137
    fontSize: 12,
138
    lineHeight: 16,
139
  },
140
  quickRegisterButton: {
141
    marginLeft: 16,
142
    marginRight: 16,
143
    marginBottom: 16,
144
    ...Shadows.lg,
145
  },
146
  lineTrack: {
147
    height: 6,
148
    backgroundColor: Colors.light.divider,
149
    borderRadius: BorderRadius.full,
150
    marginBottom: 4,
151
    overflow: "hidden",
152
  },
153
  lineFill: {
154
    height: "100%",
155
    backgroundColor: Colors.light.tint,
156
    borderRadius: BorderRadius.full,
157
  },
158
  indicatorGreen: {
159
    color: Colors.light.tint,
160
    fontSize: 11,
161
    fontWeight: 600,
162
    lineHeight: 16.5,
163
  },
164
});