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