Reports screen: Monthly search reports integrated!

Alperengozum · Dec 30, 2023 · ef049a2 · ef049a2
1 parent 3a6fabc
commit ef049a2
Show file tree

Hide file tree

Showing 10 changed files with 427 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -17,11 +17,13 @@
     "@react-navigation/native-stack": "^6.9.0",
     "@react-navigation/stack": "^6.3.2",
     "@shopify/flash-list": "1.4.3",
+    "@types/react-native-vector-icons": "^6.4.18",
     "css-color-keywords": "^1.0.0",
     "expo": "~49.0.15",
     "expo-constants": "~14.4.2",
     "expo-intent-launcher": "~10.7.0",
     "expo-localization": "~14.3.0",
+    "expo-notifications": "~0.20.1",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "mobx": "^6.6.2",

diff --git a/src/components/charts/SleepIndicatorChart.tsx b/src/components/charts/SleepIndicatorChart.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import SleepStore from "../../store/SleepStore";
+import {Sleep} from "../../store/SleepStore";
 import {Observer} from "mobx-react";
 import {GenericCard} from "../cards/GenericCard";
 import {Divider, HStack, Text, VStack} from "native-base";
 
-export const SleepIndicatorChart = () => {
+export const SleepIndicatorChart = ({sleeps}: { sleeps: Array<Sleep> | undefined }) => {
 
   const averageCalculator = (arr: number[]) => arr.reduce((a, b) => a + b, 0) / arr.length
 
@@ -17,16 +17,13 @@ export const SleepIndicatorChart = () => {
   return (
     <Observer>
       {() => {
-        let data = SleepStore.getSleeps( undefined, 30)?.map((sleep) => sleep.cycle).filter((sleep) => (sleep != undefined))
-        if (!data){
-          data = [0]
-        }
-        if (data.length == 0) {
+        let data = sleeps?.map((sleep) => sleep.cycle).filter((sleep) => (sleep != undefined))
+        if (!data || data.length == 0) {
           data = [0]
         }
 
         return (
-          <GenericCard style={{marginVertical: 10, backgroundColor: "#440e6a", display: "flex"}} >
+          <GenericCard style={{marginVertical: 10, backgroundColor: "#440e6a", display: "flex"}}>
             <HStack my={5} mr={5} justifyContent="space-between" alignItems="center" textAlign="center"
                     divider={<Divider/>}>
               <VStack mx={5} flex={1} alignItems="center">

diff --git a/src/components/charts/SleepLineChart.tsx b/src/components/charts/SleepLineChart.tsx
@@ -1,44 +1,41 @@
 import React from "react";
 import {GenericCard} from "../cards/GenericCard";
 import {Dimensions} from "react-native";
-import SleepStore from "../../store/SleepStore";
+import {Sleep} from "../../store/SleepStore";
 import {Observer} from "mobx-react";
 import {LineChart} from "react-native-chart-kit";
 import {Text} from "native-base";
 
-export const SleepLineChart = () => {
+export const SleepLineChart = ({sleeps}: {sleeps: Array<Sleep> | undefined }) => {
+  return (
+    <Observer>
+      {() => {
+        let data = sleeps?.map((sleep) => sleep.cycle).filter((sleep) => (sleep != undefined))
+        if (!data || data.length == 0) {
+          data = [0]
+        }
 
-    return (
-        <Observer>
-            {() => {
-                let data = SleepStore.getSleeps(undefined, 30)?.map((sleep) => sleep.cycle).filter((sleep) => (sleep != undefined))
-                if (!data) {
-                    data = [0]
-                }
-                if (data.length == 0) {
-                    data = [0]
-                }
-                return (
-                    <GenericCard style={{marginVertical: 10, backgroundColor: "#440e6a", marginTop: 5}}>
-                        <Text color="white" fontSize="md" bold textAlign="center">Sleep Cycles (last 30 days)</Text>
-                        <LineChart
-                            data={{datasets: [{data}]}}
-                            width={Dimensions.get("window").width}
-                            height={Dimensions.get("window").height / 3}
-                            yLabelsOffset={5}
-                            yAxisSuffix = " Cycles"
-                            chartConfig={{
-                                backgroundGradientFrom: "#440e6a",
-                                backgroundGradientTo: "#440e6a",
-                                decimalPlaces: 0,
-                                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
-                                labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
-                            }}
-                            bezier
-                            style={{borderRadius: 20}}
-                        />
-                    </GenericCard>);
-            }}
-        </Observer>
-    );
+        return (
+          <GenericCard style={{marginVertical: 10, backgroundColor: "#440e6a", marginTop: 5}}>
+            <Text color="white" fontSize="md" bold textAlign="center">Sleep Cycles</Text>
+            <LineChart
+              data={{datasets: [{data: data as number[]}], labels: []}}
+              width={Dimensions.get("window").width}
+              height={Dimensions.get("window").height / 3}
+              yLabelsOffset={5}
+              yAxisSuffix=" Cycles"
+              chartConfig={{
+                backgroundGradientFrom: "#440e6a",
+                backgroundGradientTo: "#440e6a",
+                decimalPlaces: 0,
+                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+                labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+              }}
+              bezier
+              style={{borderRadius: 20}}
+            />
+          </GenericCard>);
+      }}
+    </Observer>
+  );
 };
diff --git a/src/components/headers/ReportsHeader.tsx b/src/components/headers/ReportsHeader.tsx
@@ -1,9 +1,27 @@
 import React, {useRef} from "react";
 import {Animated, NativeScrollEvent, NativeSyntheticEvent, StyleSheet} from "react-native";
-import {Heading, HStack, IconButton, View} from "native-base";
+import {Heading, HStack, Icon, IconButton, Text, View, VStack} from "native-base";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import {SleepFilter} from "../../store/SleepStore";
+import {getMonthBefore} from "../../utils/DateUtils";
 
-export default function ReportsHeader(props: { children: React.ReactNode; }) {
+export default function ReportsHeader(props: { children: React.ReactNode, selectedDate: SleepFilter, setSelectedDate: React.Dispatch<React.SetStateAction<SleepFilter>> }) {
+  const {selectedDate, setSelectedDate} = props;
 
+  const onLeftDateButtonPress = () => {
+    setSelectedDate({
+      start: getMonthBefore(selectedDate.start, 1),
+      end: selectedDate.start
+    })
+  }
+  const onRightDateButtonPress = () => {
+    const monthAfter = new Date(selectedDate.end?.getTime() || 0);
+    monthAfter.setMonth(monthAfter.getMonth() + 1);
+    setSelectedDate({
+      start: selectedDate.end,
+      end: monthAfter
+    })
+  }
   const HEADER_MAX_HEIGHT = 150;
   const HEADER_MIN_HEIGHT = 80;
   const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
@@ -77,7 +95,7 @@ export default function ReportsHeader(props: { children: React.ReactNode; }) {
     },
     topBar: {
       marginTop: 120,
-      height: 10,
+      height: 120,
       alignItems: "center",
       justifyContent: "center",
       position: "absolute",
@@ -102,7 +120,10 @@ export default function ReportsHeader(props: { children: React.ReactNode; }) {
 
   return (
     <View style={styles.saveArea}>
-        {props?.children}
+      {props && props.children && React.cloneElement(props.children as React.ReactElement, {
+        selectedDate: selectedDate,
+        setSelectedDate: setSelectedDate,
+      })}
       <Animated.View
         style={[styles.header, {transform: [{translateY: headerTranslateY}]}]}>
         <Animated.View
@@ -123,12 +144,21 @@ export default function ReportsHeader(props: { children: React.ReactNode; }) {
           }
         ]}>
         <HStack justifyContent="space-between" alignItems="center" width="100%" height="100%" bgColor="black">
-          <IconButton variant="unstyled"/>
-          <Heading color="white" size="xl" letterSpacing={0.1} fontWeight="thin">
-            Reports
-          </Heading>
-          <IconButton colorScheme="purple"
-                      variant="unstyled"/>
+          <IconButton variant="ghost" colorScheme={"white"}
+                      icon={<Icon as={Ionicons} name="chevron-back-outline" color={"white"}/>}
+                      onPress={onLeftDateButtonPress}/>
+          <VStack alignItems={"center"}>
+            <Heading color="white" size="xl" letterSpacing={0.1} fontWeight="thin">
+              Reports
+            </Heading>
+            <Text color="white" fontSize="md" letterSpacing={0.1} fontWeight="thin">
+              {selectedDate.start?.toLocaleDateString()} - {selectedDate.end?.toLocaleDateString()}
+            </Text>
+          </VStack>
+          <IconButton variant="ghost" colorScheme={"white"}
+                      icon={<Icon as={Ionicons} name="chevron-forward-outline" color={"white"}/>}
+                      onPress={onRightDateButtonPress}/>
+
         </HStack>
 
       </Animated.View>

diff --git a/src/components/lists/CycleList.tsx b/src/components/lists/CycleList.tsx
@@ -23,12 +23,14 @@ enum ListType {
 }
 
 export const createIntentAlarm = (date: Date, type?: SleepType, cycleCount?: number): void => {
+	//TODO add success modal
 	let createDate: Date = new Date();
 	startActivityAsync("android.intent.action.SET_ALARM", {
 		extra: {
 			'android.intent.extra.alarm.HOUR': date.getHours(),
 			'android.intent.extra.alarm.MESSAGE': type || SleepType.SLEEP,
 			'android.intent.extra.alarm.MINUTES': date.getMinutes(),
+			'android.intent.extra.alarm.SKIP_UI': true,
 		}
 	}).then(() => {
 		SleepStore.addSleep({