eletrotupi / tcc/ commit / fc92b32

frontend: add daily sleep widget draft

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago fc92b32268c541f45e9432340f0d76076dfc57f4
Parents: 7742007
3 file(s) changed
  • frontend/app/(tabs)/new/index.tsx +2 -22
  • frontend/components/ui/DailyEnergyWidget.tsx +1 -1
  • frontend/components/ui/DailySleepWidget.tsx +66 -0
frontend/app/(tabs)/new/index.tsx
1 1 
import { useEffect, useState } from "react";
2 2 
import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
3 3
4 4 
import { ThemedText } from "@/components/misc/themed-text";
5 5 
import { ThemedView } from "@/components/misc/themed-view";
▸ 18 unchanged lines
24 24
25 25 
import { useThemeColor, useMoodEntries } from "@/hooks";
26 26
27 27 
import MoodEntryLog from "@/components/ui/MoodEntryLog";
28 28 
import { DailyEnergyWidget } from "@/components/ui/DailyEnergyWidget";
29 + 
import { DailySleepWidget } from "@/components/ui/DailySleepWidget";
29 30
30 31 
export default function New() {
31 32 
  const { user } = useAuth();
32 33 
  const [mood, setMood] = useState<string>("good");
33 34 
  const { data, isLoading } = useMoodEntries({ limit: 5 });
▸ 62 unchanged lines
96 97 
          <View style={{ flex: 1 }}>
97 98 
            <DailyEnergyWidget />
98 99 
          </View>
99 100
100 101 
          <View style={{ flex: 1 }}>
101 - 
            <Card style={{ padding: Spacing.cardGap }}>
102 - 
              <View
103 - 
                style={{
104 - 
                  flex: 1,
105 - 
                  flexDirection: "row",
106 - 
                  flexGrow: 0,
107 - 
                  paddingVertical: 10,
108 - 
                }}
109 - 
              >
110 - 
                <Ionicons name="moon" size={20} color="#64748B" />
111 -
112 - 
                <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
113 - 
                  Sono
114 - 
                </Text>
115 - 
              </View>
116 -
117 - 
              <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
118 - 
                7h 30m
119 - 
              </Text>
120 -
121 - 
              <Text style={styles.indicatorGreen}>+45min que ontem</Text>
122 - 
            </Card>
102 + 
            <DailySleepWidget />
123 103 
          </View>
124 104 
        </View>
125 105 
      </Section>
126 106
127 107 
      <Section>
▸ 50 unchanged lines
178 158 
    fontSize: 11,
179 159 
    fontWeight: 600,
180 160 
    lineHeight: 16.5,
181 161 
  },
182 162 
});
frontend/components/ui/DailyEnergyWidget.tsx
1 1 
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
2 2 
import { Card } from "@/components/ui/Cards";
3 3 
import { useInsight } from "@/hooks/useInsights.queries";
4 4 
import { Ionicons } from "@expo/vector-icons";
5 5 
import { Typography, Spacing, Colors, BorderRadius } from "@/constants/theme";
▸ 37 unchanged lines
43 43 
      </View>
44 44
45 45 
      <View style={{ flex: 1 }}>
46 46 
        {isLoading ? (
47 47 
          <View style={styles.empty}>
48 - 
            <ActivityIndicator size="small" />
48 + 
            <ActivityIndicator size="small" style={{ paddingBottom: 50 }} />
49 49 
          </View>
50 50 
        ) : insight ? (
51 51 
          <>
52 52 
            <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
53 53 
              {energySummary()}
▸ 41 unchanged lines
95 95 
    fontSize: 11,
96 96 
    fontWeight: 600,
97 97 
    lineHeight: 16.5,
98 98 
  },
99 99 
});
frontend/components/ui/DailySleepWidget.tsx
@@ -0,0 +1,66 @@
1 + import React from "react";
2 + import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
3 + import { Card } from "./Cards";
4 + import { Colors, Spacing, Typography } from "@/constants/theme";
5 + import { Ionicons } from "@expo/vector-icons";
6 +
7 + export const DailySleepWidget = () => {
8 + //const { data: insight, isLoading } = useInsight("DAILY_ENERGY", 0);
9 + const isLoading = false;
10 + const insight = null;
11 +
12 + return (
13 + <Card style={{ padding: Spacing.cardGap }}>
14 + <View
15 + style={{
16 + flex: 1,
17 + flexDirection: "row",
18 + flexGrow: 0,
19 + paddingVertical: 10,
20 + }}
21 + >
22 + <Ionicons name="moon" size={20} color="#64748B" />
23 +
24 + <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>Sono</Text>
25 + </View>
26 +
27 + <View style={{ flex: 1 }}>
28 + {isLoading ? (
29 + <View style={styles.empty}>
30 + <ActivityIndicator size="small" style={{ paddingBottom: 50 }} />
31 + </View>
32 + ) : insight ? (
33 + <>
34 + <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
35 + 7h 30m
36 + </Text>
37 + <Text style={styles.indicatorGreen}>+45min que ontem</Text>
38 + </>
39 + ) : (
40 + <>
41 + <Text style={styles.empty}>
42 + Não há dados disponíveis para o dia de hoje
43 + </Text>
44 + </>
45 + )}
46 + </View>
47 + </Card>
48 + );
49 + };
50 +
51 + const styles = StyleSheet.create({
52 + container: {
53 + flex: 1,
54 + padding: Spacing.cardGap,
55 + },
56 + indicatorGreen: {
57 + color: Colors.light.tint,
58 + fontSize: 11,
59 + fontWeight: 600,
60 + lineHeight: 16.5,
61 + },
62 + empty: {
63 + ...Typography.labelSm,
64 + opacity: 0.5,
65 + },
66 + });