feat: show calendar in mobile

apps/expo/package.json

@@ -17,6 +17,8 @@
   "dependencies": {
     "@bacons/text-decoder": "^0.0.0",
     "@expo/metro-config": "^0.18.11",
+    "@gorhom/bottom-sheet": "^5",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@shopify/flash-list": "1.7.1",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
@@ -37,6 +39,8 @@
     "react-native": "~0.74.6",
     "react-native-css-interop": "~0.0.36",
     "react-native-gesture-handler": "~2.20.0",
+    "react-native-infinite-pager": "^0.3.18",
+    "react-native-pager-view": "6.3.0",
     "react-native-reanimated": "~3.15.5",
     "react-native-safe-area-context": "~4.11.1",
     "react-native-screens": "~3.34.0",

apps/expo/src/app/(app)/index.tsx

@@ -1,24 +1,104 @@
-import { Button, Image, Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { Stack } from "expo-router";
+import React, { useState } from "react";
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import InfinitePager from "react-native-infinite-pager";
 
-import { api } from "~/utils/api";
-import { useSignOut, useUser } from "~/utils/auth";
+import { api, RouterOutputs } from "~/utils/api";
 
-export default function Index() {
-  const utils = api.useUtils();
-  const signOut = useSignOut();
-  const user = useUser();
+const { height: HEIGHT } = Dimensions.get("window");
+const height = HEIGHT - 200;
+
+type Cal = RouterOutputs["service"]["getEvents"][number];
+
+const Page =
+  (data: RouterOutputs["service"]["getEvents"]) =>
+  ({ index }: { index: number }) => {
+    const day = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * index);
+
+    const events =
+      data
+        ?.reduce(
+          (acc, cur) => [
+            ...acc,
+            ...cur.events.map((e) => ({ ...e, calendar: cur })),
+          ],
+          [] as (Cal["events"][number] & {
+            calendar: { name: string; color: string };
+          })[],
+        )
+        .filter((e) => e.start.toDateString() == day.toDateString()) || [];
+
+    return (
+      <View className="flex-1 items-center justify-center">
+        <View className="absolute top-0 z-10 w-full flex-1">
+          {events.map((event) => (
+            <View
+              key={event.name}
+              style={{
+                height:
+                  (height * (event.end.getTime() - event.start.getTime())) /
+                  (1000 * 60 * 60 * 24),
+                top:
+                  height *
+                  ((event.start.getHours() * 60 + event.start.getMinutes()) /
+                    (60 * 24)),
+                borderLeftColor: event.calendar.color,
+              }}
+              className="absolute w-full border-l bg-zinc-800 px-2 pt-2"
+            >
+              <Text className="text-white">{event.name}</Text>
+            </View>
+          ))}
+        </View>
+
+        <View className="w-full flex-1">
+          {Array.from({ length: 24 }).map((_, i) => (
+            <View
+              key={i}
+              style={{ height: height / 24 }}
+              className="w-full border-b border-zinc-800"
+            ></View>
+          ))}
+        </View>
+      </View>
+    );
+  };
+
+const MS_DAY = 1000 * 60 * 60;
+
+/**
+ * Return the last Sunday of the given date
+ * @param from
+ */
+function getLastSunday(from: Date): Date {
+  const day = from.getDay();
+  const date = new Date(from.getTime() + -day * MS_DAY);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+export default function App() {
+  const [index, setIndex] = useState(0);
+
+  const { data } = api.service.getEvents.useQuery({
+    start: getLastSunday(new Date()),
+  });
 
   return (
-    <SafeAreaView className="bg-background">
-      <Stack.Screen options={{ title: "Home Page" }} />
-      <Text className="text-white">Create</Text>
-      <Image
-        source={{ uri: user?.image! }}
-        className="h-24 w-24 rounded-full"
+    <View className="flex-1">
+      <InfinitePager
+        PageComponent={Page(data || [])}
+        style={{ flex: 1 }}
+        pageWrapperStyle={{ flex: 1 }}
+        // onPageChange={(index) => {
+        //   setIndex(index);
+        // }}
       />
-      <Button title="Louout" onPress={() => signOut()} />
-    </SafeAreaView>
+    </View>
   );
 }

apps/expo/src/app/_layout.tsx

@@ -8,27 +8,31 @@ import { TRPCProvider } from "~/utils/api";
 
 import "../styles.css";
 
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+
 // This is the main layout of the app
 // It wraps your pages with the providers they need
 export default function RootLayout() {
   const { colorScheme } = useColorScheme();
   return (
-    <TRPCProvider>
-      {/*
+    <GestureHandlerRootView>
+      <TRPCProvider>
+        {/*
           The Stack component displays the current page.
           It also allows you to configure your screens 
         */}
-      <Stack
-        screenOptions={{
-          headerStyle: {
-            backgroundColor: "#f472b6",
-          },
-          contentStyle: {
-            backgroundColor: colorScheme == "dark" ? "#09090B" : "#FFFFFF",
-          },
-        }}
-      />
-      <StatusBar />
-    </TRPCProvider>
+        <Stack
+          screenOptions={{
+            headerStyle: {
+              backgroundColor: "#f472b6",
+            },
+            contentStyle: {
+              backgroundColor: colorScheme == "dark" ? "#09090B" : "#FFFFFF",
+            },
+          }}
+        />
+        <StatusBar />
+      </TRPCProvider>
+    </GestureHandlerRootView>
   );
 }