activity indicators in correct y position

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_",
+      },
+    ],
   ],
 });

apps/expo/jest.config.ts

@@ -2,7 +2,11 @@ import type { Config } from "jest";
 
 const config: Config = {
   preset: "jest-expo",
-  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts", "<rootDir>/setup.ts"],
+  setupFilesAfterEnv: [
+    "<rootDir>/jest-setup.ts",
+    "<rootDir>/setup.ts",
+    "<rootDir>/node_modules/@react-native-google-signin/google-signin/jest/build/jest/setup.js",
+  ],
   testMatch: ["**/?(*.)+(spec|test).ts?(x)"],
   collectCoverageFrom: [
     "src/**/*.{ts,tsx}",

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() {
         >
           <Text>Sign Out</Text>
         </Button>
+        <Button
+          onPress={() => {
+            router.replace("/(home)");
+          }}
+        >
+          <Text>root</Text>
+        </Button>
         <ThemeToggle />
       </View>
     );

apps/expo/src/app/index.tsx → 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";

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 = () => {
       <SafeAreaEnv>
         <Stack>
           <Stack.Screen
-            name="index"
+            name="(home)/index"
             options={{
               headerShown: false,
             }}
@@ -144,8 +141,6 @@ export default function RootLayout() {
   const { colorScheme, setColorScheme, isDarkColorScheme } = useColorScheme();
   const [isColorSchemeLoaded, setIsColorSchemeLoaded] = useState(false);
 
-  console.log("isColorSchemeLoaded", isColorSchemeLoaded);
-
   useEffect(() => {
     (async () => {
       const theme = await AsyncStorage.getItem("theme");

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<number | null>(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) => (
               <ActivityIndicator
                 key={index}
                 activity={activity}
                 chartBounds={chartBounds}
-                isSelected={selectedActivityIndex.value === index}
+                points={points.amount}
               />
             ))}
-            {(isActive || selectedActivity) && (
+            {isActive && (
               <ActiveValueIndicator
-                xPosition={
-                  selectedActivity ? selectedActivity.hour : state.x.position
-                }
+                xPosition={state.x.position}
                 yPosition={state.y.amount.position}
                 activeValue={state.y.amount.value}
-                activeTime={
-                  selectedActivity ? selectedActivity.hour : state.x.value
-                }
+                activeTime={state.x.value}
                 bottom={chartBounds.bottom}
                 top={chartBounds.top}
                 textColor={labelColor}
@@ -202,27 +170,36 @@ export default function CGMChart() {
 const ActivityIndicator = (props: {
   activity: ProcessedActivityData;
   chartBounds: ChartBounds;
-  isSelected: boolean;
+  points: PointsArray;
 }) => {
-  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 (
     <>
       <Circle
         cx={xPosition}
         cy={yPosition}
-        r={isSelected ? 15 : 10}
-        color={isSelected ? "rgba(0, 255, 0, 0.5)" : "rgba(200, 200, 200, 0.5)"}
+        r={10}
+        color="rgba(200, 200, 200, 0.5)"
       />
       <SKText
-        x={xPosition - 10}
+        x={xPosition - 5}
         y={yPosition + 5}
-        text={activityTypeToEmoji[activity.type]}
+        text={"a"}
         font={useFont(Inter_500Medium, 20)}
       />
     </>

apps/expo/src/components/ui/button.tsx

@@ -62,17 +62,20 @@ const buttonTextVariants = cva(
 );
 
 type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
-  VariantProps<typeof buttonVariants>;
+  VariantProps<typeof buttonVariants> & {
+    textClassName?: string;
+  };
 
 const Button = React.forwardRef<
   React.ElementRef<typeof Pressable>,
   ButtonProps
->(({ className, variant, size, ...props }, ref) => {
+>(({ className, variant, size, textClassName, ...props }, ref) => {
   return (
     <TextClassContext.Provider
       value={cn(
         props.disabled && "web:pointer-events-none",
         buttonTextVariants({ variant, size }),
+        textClassName,
       )}
     >
       <Pressable

apps/expo/src/data/activity.ts

@@ -19,7 +19,7 @@ export const mockActivityData = [
   },
   {
     type: "work",
-    dateTime: "2024-08-12T09:00:00",
+    dateTime: "2024-08-12T09:01:00",
     title: "Start Work",
     description: "Begin workday at the office",
   },

apps/expo/src/lib/use-color-scheme.tsx

@@ -4,7 +4,6 @@ export function useColorScheme() {
   const { colorScheme, setColorScheme, toggleColorScheme } =
     useNativewindColorScheme();
 
-  console.log("colorSchemeasdfffff", colorScheme);
   return {
     colorScheme: colorScheme ?? "dark",
     isDarkColorScheme: colorScheme === "dark",