[nobuild] partially continue metrics

app/(app)/metrics.tsx

@@ -7,7 +7,7 @@ import { styles } from "@/styles/metrics";
 import type { APIStats } from "@/types/zipline";
 import { Redirect } from "expo-router";
 import { useEffect, useState } from "react";
-import { View } from "react-native";
+import { ScrollView, Text, View } from "react-native";
 import DatePicker from "@/components/DatePicker";
 import { add } from "date-fns";
 import type { DateType } from "react-native-ui-datepicker";
@@ -56,11 +56,11 @@ export default function Metrics() {
                     onChange={(params) => {
                         setRange(params)
 
-                        if (params.endDate && params.startDate) {
-                            // setDatePickerOpen(false)
+                        // if (params.endDate && params.startDate) {
+                        //     setDatePickerOpen(false)
 
-                            // handle date change
-                        }
+                        //     handle date change
+                        // }
                         console.log("params", params)
                     }}
                     mode="range"
@@ -69,13 +69,27 @@ export default function Metrics() {
                     maxDate={new Date()}
                 />
 
-                <Button
-                    onPress={() => {
-                        setDatePickerOpen(true)
-                    }}
-                    text="test"
-                    color="blue"
-                />
+                {stats ? (
+                    <View>
+                        <ScrollView>
+                            <View style={styles.header}>
+                                <Text style={styles.headerText}>Metrics</Text>
+                                <Text style={styles.dateRangeText}>{new Date(range.startDate as string).toLocaleDateString()} to {new Date(range.endDate as string).toLocaleDateString()}</Text>
+                            </View>
+                        </ScrollView>
+                        {/* <Button
+                            onPress={() => {
+                                setDatePickerOpen(true)
+                            }}
+                            text="test"
+                            color="blue"
+                        /> */}
+                    </View>
+                ) : (
+                    <View style={styles.loadingContainer}>
+                        <Text style={styles.loadingText}>Loading...</Text>
+                    </View>
+                )}
             </View>
         </View>
     )

components/DatePicker.tsx

@@ -2,6 +2,7 @@ import { styles } from "@/styles/components/datePicker";
 import Popup from "./Popup";
 import DateTimePicker from 'react-native-ui-datepicker';
 import type { DatePickeMultipleProps, DatePickerRangeProps, DatePickerSingleProps } from "react-native-ui-datepicker/lib/typescript/DateTimePicker";
+import Button from "./Button";
 
 type Props = (DatePickeMultipleProps | DatePickerRangeProps | DatePickerSingleProps) & {
     open: boolean;
@@ -28,6 +29,12 @@ export default function DatePicker(props: Props) {
     return (
         <Popup hidden={!props.open} onClose={props.onClose}>
             <DateTimePicker {...defaultProps}/>
+
+            <Button
+                text="Close"
+                onPress={props.onClose}
+                color="#171c39"
+            />
         </Popup>
     );
 }

hooks/useAuth.ts

@@ -9,6 +9,8 @@ export const useAuth = (minimumRole: APIUser["role"] = "USER") => {
 
     useFocusEffect(() => {
         (async () => {
+            console.debug("useAuth")
+
             const authenticated = await isAuthenticated();
 
             if (!authenticated) return router.replace("/login");

hooks/useLoginAuth.ts

@@ -15,6 +15,8 @@ export const useLoginAuth = () => {
     });
 
     async function loginAuth() {
+        console.debug("useLoginAuth")
+
         const authenticated = await isAuthenticated();
 
         if (authenticated) return router.replace("/");

styles/metrics.ts

@@ -5,4 +5,33 @@ export const styles = StyleSheet.create({
 		backgroundColor: "#0c101c",
 		flex: 1,
 	},
+	loadingContainer: {
+		display: "flex",
+		flex: 1,
+	},
+	loadingText: {
+		fontSize: 40,
+		fontWeight: "bold",
+		margin: "auto",
+		color: "#cdd6f4",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	headerText: {
+        marginTop: 5,
+        marginLeft: 10,
+        fontSize: 32,
+        fontWeight: "bold",
+        color: "white",
+    },
+	header: {
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        alignItems: "center",
+    },
+	dateRangeText: {
+		color: "gray",
+		textAlignVertical: "center",
+		fontSize: 12
+	}
 });