From d3c4762a3f13838938db93145a0c3d3654d4ea02 Mon Sep 17 00:00:00 2001 From: ElektrikSpark Date: Mon, 26 Aug 2024 21:04:40 +0000 Subject: [PATCH] activity indicators in correct y position --- apps/expo/app.config.ts | 6 ++ apps/expo/jest.config.ts | 6 +- apps/expo/src/app/(app)/(tabs)/account.tsx | 10 +++ apps/expo/src/app/{ => (home)}/index.tsx | 1 - apps/expo/src/app/_layout.tsx | 11 +-- apps/expo/src/components/charts/cgm-chart.tsx | 79 +++++++------------ apps/expo/src/components/ui/button.tsx | 7 +- apps/expo/src/data/activity.ts | 2 +- apps/expo/src/lib/use-color-scheme.tsx | 1 - pnpm-lock.yaml | 18 ++--- 10 files changed, 67 insertions(+), 74 deletions(-) rename apps/expo/src/app/{ => (home)}/index.tsx (92%) diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts index b9f8c17..dd2f01c 100644 --- a/apps/expo/app.config.ts +++ b/apps/expo/app.config.ts @@ -92,5 +92,11 @@ export default ({ config }: ConfigContext): ExpoConfig => ({ enableCodeScanner: true, }, ], + [ + "@react-native-google-signin/google-signin", + { + iosUrlScheme: "com.googleusercontent.apps._some_id_here_", + }, + ], ], }); diff --git a/apps/expo/jest.config.ts b/apps/expo/jest.config.ts index 5d6e9f6..b6ebaed 100644 --- a/apps/expo/jest.config.ts +++ b/apps/expo/jest.config.ts @@ -2,7 +2,11 @@ import type { Config } from "jest"; const config: Config = { preset: "jest-expo", - setupFilesAfterEnv: ["/jest-setup.ts", "/setup.ts"], + setupFilesAfterEnv: [ + "/jest-setup.ts", + "/setup.ts", + "/node_modules/@react-native-google-signin/google-signin/jest/build/jest/setup.js", + ], testMatch: ["**/?(*.)+(spec|test).ts?(x)"], collectCoverageFrom: [ "src/**/*.{ts,tsx}", diff --git a/apps/expo/src/app/(app)/(tabs)/account.tsx b/apps/expo/src/app/(app)/(tabs)/account.tsx index 45ea335..20a5088 100644 --- a/apps/expo/src/app/(app)/(tabs)/account.tsx +++ b/apps/expo/src/app/(app)/(tabs)/account.tsx @@ -1,4 +1,5 @@ import { View } from "react-native"; +import { useRouter } from "expo-router"; import { useSessionContext, useSupabaseClient, @@ -10,6 +11,8 @@ import { Button } from "~/components/ui/button"; import { Text } from "~/components/ui/text"; export default function AccountScreen() { + const router = useRouter(); + const user = useUser(); const SignOut = () => { @@ -28,6 +31,13 @@ export default function AccountScreen() { > Sign Out + ); diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/(home)/index.tsx similarity index 92% rename from apps/expo/src/app/index.tsx rename to apps/expo/src/app/(home)/index.tsx index 9954c18..f5f9ce5 100644 --- a/apps/expo/src/app/index.tsx +++ b/apps/expo/src/app/(home)/index.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { View } from "react-native"; import AnimatedIntro from "~/components/intro/animated-intro"; diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx index 18779fe..2f0d961 100644 --- a/apps/expo/src/app/_layout.tsx +++ b/apps/expo/src/app/_layout.tsx @@ -47,7 +47,7 @@ SplashScreen.preventAutoHideAsync(); export const unstable_settings = { // Ensure any route can link back to `/` - initialRouteName: "index", + initialRouteName: "(home)/index", }; const InitialLayout = () => { @@ -56,9 +56,6 @@ const InitialLayout = () => { const [isLoaded, setIsLoaded] = useState(false); const [isSignedIn, setIsSignedIn] = useState(false); - console.log("isLoaded", isLoaded); - console.log("isSignedIn", isSignedIn); - useEffect(() => { supabase.auth.getSession().then(({ data: { session } }) => { setIsSignedIn(!!session); @@ -84,7 +81,7 @@ const InitialLayout = () => { if (isSignedIn && !inAppGroup) { router.replace("/(tabs)"); } else if (!isSignedIn && inAppGroup) { - router.replace("/"); + router.replace("/(home)"); } }, [isLoaded, isSignedIn, segments, router]); @@ -97,7 +94,7 @@ const InitialLayout = () => { { (async () => { const theme = await AsyncStorage.getItem("theme"); diff --git a/apps/expo/src/components/charts/cgm-chart.tsx b/apps/expo/src/components/charts/cgm-chart.tsx index 610eec8..df6acf2 100644 --- a/apps/expo/src/components/charts/cgm-chart.tsx +++ b/apps/expo/src/components/charts/cgm-chart.tsx @@ -1,8 +1,8 @@ import type { SharedValue } from "react-native-reanimated"; -import type { ChartBounds } from "victory-native"; +import type { ChartBounds, PointsArray } from "victory-native"; import { useMemo } from "react"; import { View } from "react-native"; -import { useDerivedValue, useSharedValue } from "react-native-reanimated"; +import { useDerivedValue } from "react-native-reanimated"; import { Inter_500Medium } from "@expo-google-fonts/inter"; import { Circle, @@ -47,7 +47,7 @@ const activityTypeToEmoji = { export default function CGMChart() { const { colorScheme } = useColorScheme(); - const { selectedActivity, setSelectedActivity } = useActivityStore(); + // const { selectedActivity, setSelectedActivity } = useActivityStore(); const font = useFont(Inter_500Medium, 12); // Preprocess the data to use hour numbers for x-axis @@ -60,6 +60,7 @@ export default function CGMChart() { [], ); + // Preprocess the activity data to use hour numbers for x-axis const processedActivityData = useMemo( () => mockActivityData.map((item) => ({ @@ -74,36 +75,6 @@ export default function CGMChart() { y: { amount: 0 }, }); - const selectedActivityIndex = useSharedValue(null); - - useDerivedValue(() => { - if (isActive) { - const pressedXValue = state.x.value.value; - const nearestActivityIndex = processedActivityData.reduce( - (nearest, current, index) => { - const currentDiff = Math.abs(current.hour - pressedXValue); - const nearestDiff = Math.abs( - processedActivityData[nearest].hour - pressedXValue, - ); - return currentDiff < nearestDiff ? index : nearest; - }, - 0, - ); - - if ( - Math.abs( - processedActivityData[nearestActivityIndex].hour - pressedXValue, - ) <= 0.5 - ) { - selectedActivityIndex.value = nearestActivityIndex; - } else { - selectedActivityIndex.value = null; - } - } else { - selectedActivityIndex.value = null; - } - }, [isActive, state.x.value]); - const labelColor = colorScheme === "dark" ? "white" : "black"; const lineColor = colorScheme === "dark" @@ -166,25 +137,22 @@ export default function CGMChart() { strokeWidth={3} animate={{ type: "timing", duration: 500 }} connectMissingData={false} + curveType="natural" /> {processedActivityData.map((activity, index) => ( ))} - {(isActive || selectedActivity) && ( + {isActive && ( { - const { activity, chartBounds, isSelected } = props; + const { activity, chartBounds, points } = props; + + // Find the closest point to the activity's hour + const closestPoint = points.reduce((prev, curr) => + Math.abs((curr.xValue as number) - activity.hour) < + Math.abs((prev.xValue as number) - activity.hour) + ? curr + : prev, + ); + + // Calculate x position based on the closest point + const xPosition = closestPoint.x; - const xPosition = - (activity.hour / 24) * (chartBounds.right - chartBounds.left) + - chartBounds.left; - const yPosition = chartBounds.bottom - 20; // Place it slightly above the bottom of the chart + // Calculate y position based on the closest point + const yPosition = closestPoint.y ?? chartBounds.bottom - 20; return ( <> diff --git a/apps/expo/src/components/ui/button.tsx b/apps/expo/src/components/ui/button.tsx index e3db715..a141514 100644 --- a/apps/expo/src/components/ui/button.tsx +++ b/apps/expo/src/components/ui/button.tsx @@ -62,17 +62,20 @@ const buttonTextVariants = cva( ); type ButtonProps = React.ComponentPropsWithoutRef & - VariantProps; + VariantProps & { + textClassName?: string; + }; const Button = React.forwardRef< React.ElementRef, ButtonProps ->(({ className, variant, size, ...props }, ref) => { +>(({ className, variant, size, textClassName, ...props }, ref) => { return (