eletrotupi / tcc/ commit / fc92b32

frontend: add daily sleep widget draft

Pedro Lucas Porcellis porcellis@eletrotupi.com · 4 months ago fc92b32268c541f45e9432340f0d76076dfc57f4 Browse files
Parents 7742007
Changed files
3
Additions
+69
Deletions
-23
frontend/app/(tabs)/new/index.tsx modified+2 -22
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";
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 });
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>
178 158 
    fontSize: 11,
179 159 
    fontWeight: 600,
180 160 
    lineHeight: 16.5,
181 161 
  },
182 162 
});
frontend/components/ui/DailyEnergyWidget.tsx modified+1 -1
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";
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()}
95 95 
    fontSize: 11,
96 96 
    fontWeight: 600,
97 97 
    lineHeight: 16.5,
98 98 
  },
99 99 
});
frontend/components/ui/DailySleepWidget.tsx added+66
/dev/null → frontend/components/ui/DailySleepWidget.tsx
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 + 
});