Reports screen performance improvements

Alperengozum · Dec 29, 2023 · 76d48ba · 76d48ba
1 parent 9b96fba
commit 76d48ba
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 83 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -0,0 +1,13 @@
+import { ExpoConfig, ConfigContext } from '@expo/config';
+import * as dotenv from 'dotenv';
+
+// initialize dotenv
+dotenv.config();
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+    ...config,
+    "react-native-google-mobile-ads": {
+        "android_app_id": process.env.SLEEPWELL_app_id,
+        "ios_app_id": process.env.SLEEPWELL_app_id
+    }
+});
diff --git a/app.json b/app.json
@@ -33,9 +33,5 @@
     "plugins": [
       "expo-localization"
     ]
-  },
-  "react-native-google-mobile-ads": {
-    "android_app_id": "ca-app-pub-1654624162360424~4020619641",
-    "ios_app_id": "ca-app-pub-1654624162360424~4020619641"
   }
 }
diff --git a/src/components/cards/GenericHeaderCard.tsx b/src/components/cards/GenericHeaderCard.tsx
@@ -1,19 +1,21 @@
 import {StyleProp, ViewStyle} from "react-native";
 import {Box} from "native-base";
 import React from "react";
+import {InterfaceBoxProps} from "native-base/lib/typescript/components/primitives/Box";
 
 
 export const GenericHeaderCard = (props: Props) => {
-  const {children, style} = props;
+  const {children, style, boxProps} = props;
 
   return (
-    <Box style={style || undefined} width="100%" mx={5} my={5}>
+    <Box style={style || undefined} width="100%" mx={5} my={5} {...boxProps}>
       {children}
     </Box>
   );
 };
 
 interface Props {
   style?: StyleProp<ViewStyle>,
-  children: JSX.Element[] | JSX.Element
+  children: JSX.Element[] | JSX.Element,
+  boxProps?: InterfaceBoxProps
 }
diff --git a/src/components/headers/ReportsHeader.tsx b/src/components/headers/ReportsHeader.tsx
@@ -86,7 +86,7 @@ export default function ReportsHeader(props: { children: React.ReactNode; }) {
       right: 0
     },
     topHeaderBar: {
-      height: 120,
+      height: 80,
       alignItems: "center",
       justifyContent: "center",
       position: "absolute",
@@ -102,22 +102,7 @@ export default function ReportsHeader(props: { children: React.ReactNode; }) {
 
   return (
     <View style={styles.saveArea}>
-      <Animated.ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={{paddingTop: HEADER_MAX_HEIGHT - 32, paddingBottom: 100}}
-        scrollEventThrottle={16}
-        onScroll={Animated.event(
-          [{nativeEvent: {contentOffset: {y: scrollY}}}],
-          {useNativeDriver: true}
-        )}
-        ref={scrollviewRef}
-        onMomentumScrollEnd={(e: NativeSyntheticEvent<NativeScrollEvent>) => {
-          if (e.nativeEvent.contentOffset.y > HEADER_MAX_HEIGHT / 5 && e.nativeEvent.contentOffset.y < HEADER_MAX_HEIGHT) {
-            scrollviewRef.current?.scrollTo({x: 0, y: HEADER_MIN_HEIGHT + 10, animated: true});
-          }
-        }}>
         {props?.children}
-      </Animated.ScrollView>
       <Animated.View
         style={[styles.header, {transform: [{translateY: headerTranslateY}]}]}>
         <Animated.View

diff --git a/src/components/lists/CalculatorList.tsx b/src/components/lists/CalculatorList.tsx
@@ -150,7 +150,7 @@ export const CalculatorList = () => {
     return (
         <Observer>
             {() => (
-                <View width="100%" mt={50}>
+                <View width={"100%"} h={"100%"} mt={50}>
                     <FlashList
                         data={list}
                         renderItem={({item}) => {

diff --git a/src/components/lists/CycleList.tsx b/src/components/lists/CycleList.tsx
@@ -133,7 +133,7 @@ export const CycleList = (props: { params: any; }) => {
 	}, [])
 
 	return (
-		<View width="100%" mt={50}>
+		<View width={"100%"} h={"100%"} mt={50}>
 			<FlashList
 				data={list}
 				renderItem={({item}) => {

diff --git a/src/components/lists/InfoList.tsx b/src/components/lists/InfoList.tsx
@@ -88,7 +88,7 @@ export const InfoList = () => {
     .filter((item: number | null) => item !== null) as number[];
 
   return (
-    <View width="100%" mt={50}>
+    <View width={"100%"} h={"100%"} mt={50}>
       <FlashList
         data={list}
         renderItem={({item}) => {

diff --git a/src/components/lists/ReportsList.tsx b/src/components/lists/ReportsList.tsx
@@ -6,6 +6,8 @@ import {GenericHeaderCard} from "../cards/GenericHeaderCard";
 import SleepStore, {Sleep, SleepType} from "../../store/SleepStore";
 import {Observer} from "mobx-react";
 import Ionicons from "react-native-vector-icons/Ionicons";
+import {SleepIndicatorChart} from "../charts/SleepIndicatorChart";
+import {SleepLineChart} from "../charts/SleepLineChart";
 
 interface List {
     name: string | number;
@@ -28,75 +30,92 @@ export const ReportsList = () => {
         if (start && count) {
             sleeps = sleeps.slice(start, count)
         }
-        return sleeps.map(
-            (sleep: Sleep): List => {
-                return {
-                    type: ListType.ITEM,
-                    name: sleep.type,
-                    desc: sleep.cycle,
-                    id: sleep.id
-                }
-            }
-        );
+
+        const newList: Array<List> = [];
+        newList.push({
+            type: ListType.HEADER,
+            name: "Reports",
+        })
+        sleeps.forEach((sleep: Sleep) => {
+            newList.push({
+                type: ListType.ITEM,
+                name: sleep.type,
+                desc: sleep.cycle,
+                id: sleep.id
+            })
+        })
+        return newList;
     }
 
     const deleteSleep = (id: number) => {
         SleepStore.deleteSleep(id)
     }
-    const getRenderItem = ({item}: {item: List}): React.ReactElement => {
-        if (item!.type === ListType.HEADER) {
-            // Rendering header
-            return <GenericHeaderCard>
-                <HStack mr={10} justifyContent="space-between" alignItems="center" textAlign="center">
-                    <Text color="white" fontSize="lg">{item.name}</Text>
-                    <Text color="white" fontSize="lg">{item.desc}</Text>
-                </HStack>
-            </GenericHeaderCard>;
-        } else if (item.type == ListType.ITEM) {
-            return <GenericCard style={{marginVertical: 10}} onPress={item.onClick || undefined}>
-                <HStack my={5} mr={5} justifyContent="space-between" alignItems="center" textAlign="center">
-                    <VStack mx={5}>
-                        <Text color="white"
-                              fontSize="lg">{item.name == SleepType.SLEEP ? item.desc + " Sleep Cycles" : "Powernap"}</Text>
-                        <Text color="gray.400"
-                              fontSize="md">{item.name == SleepType.SLEEP ? "Equals " + item.desc * 1.5 + " hours sleep." : "Equals " + 30 + " minutes sleep."}</Text>
-                    </VStack>
-                    <View>
-                        <HStack alignItems="center" space={5}>
-                            <IconButton colorScheme="red"
+    const getRenderItem = ({item}: { item: List }): React.ReactElement => {
+        switch (item!.type) {
+            case ListType.HEADER:
+                // Rendering header
+                return (
+                    <GenericHeaderCard boxProps={{
+                        mx: 0,
+                        my: 0,
+                        mt: 10
+                    }}>
+                        <SleepLineChart/>
+                        <SleepIndicatorChart/>
+                    </GenericHeaderCard>
+                );
+            case ListType.ITEM:
+                return (
+                    <GenericCard style={{marginVertical: 10}} onPress={item.onClick || undefined}>
+                        <HStack my={5} mr={5} justifyContent="space-between" alignItems="center" textAlign="center">
+                            <VStack mx={5}>
+                                <Text color="white" fontSize="lg">
+                                    {item.name === SleepType.SLEEP ? `${item.desc} Sleep Cycles` : 'Powernap'}
+                                </Text>
+                                <Text color="gray.400" fontSize="md">
+                                    {item.name === SleepType.SLEEP
+                                        ? `Equals ${item.desc as number * 1.5} hours sleep.`
+                                        : 'Equals 30 minutes sleep.'}
+                                </Text>
+                            </VStack>
+                            <View>
+                                <HStack alignItems="center" space={5}>
+                                    <IconButton
+                                        colorScheme="red"
                                         borderRadius="20"
                                         size="lg"
                                         variant="outline"
                                         icon={<Icon as={Ionicons} name="trash-outline"/>}
                                         onPress={() => deleteSleep(item.id as number)}
-                            />
+                                    />
+                                </HStack>
+                            </View>
                         </HStack>
-                    </View>
-                </HStack>
-            </GenericCard>
-        } else {
-            return <React.Fragment/>
+                    </GenericCard>
+                );
+            default:
+                return <React.Fragment/>;
         }
     };
 
     return (
         <Observer>
             {() => (
-                    <View width="100%" mt={50} height="100%">
-                        <FlashList
-                            data={buildList(0, 10 * count)}
-                            renderItem={getRenderItem}
-                            onEndReached={() => {
-                                if(count > 3) return
-                                setCount(count + 1)
-                            }}
-                            getItemType={(item) => {
-                                // To achieve better performance, specify the type based on the item
-                                return typeof item === "string" ? "sectionHeader" : "row";
-                            }}
-                            estimatedItemSize={200}
-                        />
-                    </View>)
+                <View width="100%" mt={50} height="100%">
+                    <FlashList
+                        data={buildList(0, 10 * count)}
+                        renderItem={getRenderItem}
+                        onEndReached={() => {
+                            if (count > 3) return
+                            setCount(count + 1)
+                        }}
+                        getItemType={(item) => {
+                            // To achieve better performance, specify the type based on the item
+                            return typeof item === "string" ? "sectionHeader" : "row";
+                        }}
+                        estimatedItemSize={200}
+                    />
+                </View>)
             }
         </Observer>
     );

diff --git a/src/components/lists/SettingsList.tsx b/src/components/lists/SettingsList.tsx
@@ -50,7 +50,7 @@ export const SettingsList = () => {
   return (
     <Observer>
       {() => (
-        <View width="100%" mt={50}>
+        <View width={"100%"} h={"100%"} mt={50}>
           <FlashList
             data={buildList()}
             renderItem={({item}) => {

diff --git a/src/screen/Reports.tsx b/src/screen/Reports.tsx
@@ -1,15 +1,11 @@
 import React from "react";
 import {ReportsList} from "../components/lists/ReportsList";
 import ReportsHeader from "../components/headers/ReportsHeader";
-import {SleepIndicatorChart} from "../components/charts/SleepIndicatorChart";
-import {SleepLineChart} from "../components/charts/SleepLineChart";
 
 export default function Reports() {
 
   return (
     <ReportsHeader>
-      <SleepIndicatorChart/>
-      <SleepLineChart/>
       <ReportsList/>
     </ReportsHeader>
   );