Pull down to refresh, and deferred loading

.gitignore

@@ -9,6 +9,7 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+.eslintrc.json
 
 # macOS
 .DS_Store

README.md

@@ -1,9 +1,9 @@
 # Mentis
 ---
 <div align="center">
-    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Risuleia/Mentis">
-    <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/Risuleia/Mentis">
-    <img alt="GitHub" src="https://img.shields.io/github/license/Risuleia/Mentis">
+    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/soil-boys/Mentis">
+    <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/soil-boys/Mentis">
+    <img alt="GitHub" src="https://img.shields.io/github/license/soil-boys/Mentis">
 </div>
 
 > ### Record and analyse your mood today!

app/(tabs)/analytics.jsx

@@ -1,33 +1,54 @@
 import moment from 'moment'
-import { useState, useEffect } from 'react'
-
-import { View, Text, SafeAreaView, ScrollView } from 'react-native'
-import { COLORS, SIZES, FONT } from '../../constants'
+import { useState, useCallback } from 'react'
 
 import { MoodWeek, MoodMonth } from '../../components'
 
-import getMood from '../../utils/getMood'
+import useAnalysis from '../../hooks/useAnalysis'
+import useMood from '../../hooks/useMood'
+
+import { View, Text, SafeAreaView, ScrollView, RefreshControl } from 'react-native'
+import { COLORS, SIZES, FONT } from '../../constants'
+import useGraphing from '../../hooks/useGraphing'
 
 function Analytics() {
 
-    const [mood, setMood] = useState('Okay')
-
-    useEffect(() => {
-        const getData = async () => {
-            let _ = await getMood()
-            setMood(_)
-        }
-        getData()
+    const { mood, loadingMood, refetchMood } = useMood()
+    const { analysis, loadingAnalysis, refetchAnalysis } = useAnalysis()
+    const { graph, loadingGraph, refetchGraph } = useGraphing()
+
+    const [refreshing, setRefreshing] = useState(false)
+
+    const onRefresh = useCallback(() => {
+        setRefreshing(true)
+        refetchAnalysis()
+        refetchGraph()
+        refetchMood()
+        setRefreshing(false)
     }, [])
 
-
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
-            <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false} overScrollMode="never">
+            <ScrollView
+                style={{ flex: 1 }}
+                showsVerticalScrollIndicator={false}
+                overScrollMode="never"
+                refreshControl={ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> }
+            >
                 <View style={{ flex: 1, padding: SIZES.medium, gap: SIZES.xLarge }}>
-                    {/* <Welcome time={'morning'} /> */}
-                    <MoodWeek mood={mood} />
-                    <MoodMonth />
+                    <MoodWeek
+                        mood={mood}
+                        loadingMood={loadingMood}
+                        analysis={analysis.week}
+                        loadingAnalysis={loadingAnalysis}
+                        graph={graph.week}
+                        loadingGraph={loadingGraph}
+                    />
+                    <MoodMonth
+                        analysis={analysis.month}
+                        loadingAnalysis={loadingAnalysis}
+                        graph={graph.month}
+                        loadingGraph={loadingGraph}
+                    />
                 </View>
             </ScrollView>
         </SafeAreaView>

app/(tabs)/index.jsx

@@ -1,36 +1,41 @@
-import moment from "moment";
-import { useEffect, useState } from "react";
-import { View, ScrollView, SafeAreaView } from "react-native";
-import { useRouter } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { View, ScrollView, SafeAreaView, RefreshControl } from "react-native";
 
 import { Welcome, Overview, Scale } from "../../components";
-import { COLORS, FONT, icons, SIZES } from "../../constants";
-
-import getGreeting from '../../utils/getGreeting'
-import getMood from "../../utils/getMood";
+import { COLORS, SIZES } from "../../constants";
+import useData from "../../hooks/useData";
+import useGreeting from "../../hooks/useGreeting";
 
 function Home() {
 
-    const [greeting, setGreeting] = useState(getGreeting(moment().format('HH')))
-    const [mood, setMood] = useState('Okay')
-    const router = useRouter()
-
-    useEffect(() => {
-        const getData = async () => {
-            let _ = await getMood()
-            setMood(_)
-        }
-        getData()
-        setGreeting(getGreeting(moment().format('HH')))
+    const { mood, loadingMood, fluctuations, loadingFluctuations, refetch } = useData()
+    const greeting = useGreeting()
+
+    const [refreshing, setRefreshing] = useState(false)
+
+    const onRefresh = useCallback(() => {
+        setRefreshing(true)
+        refetch()
+        setRefreshing(false)
     }, [])
 
     return(
         <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
-            <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false} overScrollMode="never">
+            <ScrollView
+                style={{ flex: 1 }}
+                showsVerticalScrollIndicator={false}
+                overScrollMode="never"
+                refreshControl={ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> }
+            >
                 <View style={{ flex: 1, padding: SIZES.medium }}>
                     <Welcome time={greeting} />
-                    <Scale />
-                    <Overview mood={mood} />
+                    <Scale refetch={refetch} />
+                    <Overview
+                        mood={mood}
+                        loadingMood={loadingMood}
+                        fluctuations={fluctuations}
+                        loadingFluctuations={loadingFluctuations}
+                    />
                 </View>
             </ScrollView>
         </SafeAreaView>

app/_layout.jsx

@@ -1,13 +1,13 @@
 import 'node-libs-react-native/globals'
 
 import { Stack } from "expo-router";
-import { useCallback } from "react";
-import { useFonts } from "expo-font";
+import { useCallback, useEffect, useState } from "react";
+import * as Font from 'expo-font'
 import * as SplashScreen from "expo-splash-screen";
 
 console.reportErrorsAsExceptions = false;
 
-export {ErrorBoundary } from 'expo-router';
+export { ErrorBoundary } from 'expo-router';
 
 export const unstable_settings = {
     initialRouteName: '(tabs)',
@@ -17,17 +17,31 @@ SplashScreen.preventAutoHideAsync();
 
 function Layout() {
 
-    const [loadedFonts] = useFonts({
-        DMBold: require('../assets/fonts/DMSans-Bold.ttf'),
-        DMMedium: require('../assets/fonts/DMSans-Medium.ttf'),
-        DMRegular: require('../assets/fonts/DMSans-Regular.ttf'),
-    })
+    const [loading, setLoading] = useState(true)
+
+    useEffect(() => {
+        async function load() {
+            try {
+                await Font.loadAsync({
+                    DMBold: require('../assets/fonts/DMSans-Bold.ttf'),
+                    DMMedium: require('../assets/fonts/DMSans-Medium.ttf'),
+                    DMRegular: require('../assets/fonts/DMSans-Regular.ttf'),
+                })
+            } catch (err) {
+                console.warn(err)
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        load()
+    }, [])
 
     const onLayoutRootView = useCallback(async () => {
-        if (loadedFonts) await SplashScreen.hideAsync()
-    }, [loadedFonts])
+        if (!loading) await SplashScreen.hideAsync()
+    }, [loading])
 
-    if (!loadedFonts) return null;
+    if (loading) return null;
 
     return (
         <>

components/analytics/mood month/MoodMonth.jsx

@@ -1,40 +1,18 @@
-import { useState, useEffect } from "react";
-import { View, Text } from "react-native";
+import { View, Text, ActivityIndicator } from "react-native";
 
 import AnalyticsCard from "../../common/cards/analytics card/AnalyticsCard";
 import Graph from "../../common/graph/Graph";
 
-import { analyzeData, graphing } from "../../../functions/Analytics"; 
-
 import styles from "./moodmonth.style";
+import { COLORS } from "../../../constants";
 
 
-function MoodMonth() {
+function MoodMonth({ analysis, loadingAnalysis, graph, loadingGraph }) {
 
     const generateData = (arr) => {
         return arr.map((_, index) => ({ date: new Date(index), value: _ }))
     }
 
-    useEffect(() => {
-
-        const getData = async () => {
-            let happy = await analyzeData('Happy', 'month')
-            let sad = await analyzeData('Sad', 'month')
-            let okay = await analyzeData('Okay', 'month')
-            let graphDat = await graphing('month')
-            setDaysHappy(happy)
-            setDaysOkay(okay)
-            setDaysSad(sad)
-            setGraphData(generateData(graphDat))
-        }
-        getData()
-    }, [])
-
-    const [daysHappy, setDaysHappy] = useState(0)
-    const [daysSad, setDaysSad] = useState(0)
-    const [daysOkay, setDaysOkay] = useState(0)
-    const [graphData, setGraphData] = useState([])
-
     return(
 
         <View style={styles.container}>
@@ -43,34 +21,46 @@ function MoodMonth() {
                 <View style={styles.daysContainer}>
                     <AnalyticsCard
                         label='days happy'
-                        content={ <Text style={styles.text2}>{daysHappy}</Text> }
+                        content={loadingAnalysis ? (
+                                <ActivityIndicator size="large" color={COLORS.primary} />
+                            ) : (
+                                <Text style={styles.text2}>{analysis.Happy}</Text>
+                        )}
                         flipped={true}
-                        // flex={true}
                         width={false}
                         ripple
                     />
                     <AnalyticsCard
                         label='days okay'
-                        content={ <Text style={styles.text2}>{daysOkay}</Text> }
+                        content={loadingAnalysis ? (
+                                <ActivityIndicator size="large" color={COLORS.primary} />
+                            ) : (
+                                <Text style={styles.text2}>{analysis.Okay}</Text>
+                        )}
                         flipped={true}
-                        // flex={true}
                         width={false}
                         ripple
                     />
                     <AnalyticsCard
                         label='days sad'
-                        content={ <Text style={styles.text2}>{daysSad}</Text> }
+                        content={loadingAnalysis ? (
+                                <ActivityIndicator size="large" color={COLORS.primary} />
+                            ) : (
+                                <Text style={styles.text2}>{analysis.Sad}</Text>
+                        )}
                         flipped={true}
-                        // flex={false}
                         width={false}
                         ripple
                     />
                 </View>
-                <View style={{ flex: 1, flexDirection: 'row', height: (!graphData || graphData?.length < 2) ? 80 : 200 }}>
+                <View style={{ flex: 1, flexDirection: 'row', height: (!graph || graph?.length < 2) ? 80 : 200 }}>
                     <AnalyticsCard
                         label='graph'
-                        content={ (!graphData || graphData?.length < 2) ? <Text style={styles.errText}>Not enough data</Text> : <Graph data={graphData} /> }
-                        // flipped={true}
+                        content={loadingGraph ? (
+                                <ActivityIndicator size="large" color={COLORS.primary} />
+                            ) : (
+                                (!graph || graph?.length < 2) ? <Text style={styles.errText}>Not enough data</Text> : <Graph data={generateData(graph)} />
+                        )}
                         width={false}
                         flex={true}
                     />