121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
import { useEffect, useRef } from "react"
|
|
import { Stack, router } from "expo-router"
|
|
import { StatusBar } from "expo-status-bar"
|
|
import { useColorScheme, View, ActivityIndicator } from "react-native"
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
|
import { GestureHandlerRootView } from "react-native-gesture-handler"
|
|
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet"
|
|
import { useAuth } from "../src/stores/auth"
|
|
import { useConnections } from "../src/stores/connections"
|
|
import { useEvents } from "../src/stores/events"
|
|
import { useCatalog } from "../src/stores/catalog"
|
|
import { useSettings } from "../src/stores/settings"
|
|
import { AuthGate } from "../src/components/AuthGate"
|
|
import * as notifications from "../src/lib/notifications"
|
|
|
|
const queryClient = new QueryClient()
|
|
|
|
export default function RootLayout() {
|
|
const colorScheme = useColorScheme()
|
|
const isDark = colorScheme === "dark"
|
|
|
|
const { initialize: initAuth, isLoading: authLoading } = useAuth()
|
|
const { loadConnections, isLoading: connectionsLoading, client } = useConnections()
|
|
const sseStarted = useRef(false)
|
|
|
|
useEffect(() => {
|
|
initAuth()
|
|
loadConnections()
|
|
useSettings.getState().load()
|
|
|
|
// Connect notification preferences to the notification module
|
|
notifications.configure(() => useSettings.getState().notifications)
|
|
|
|
// Navigate to session when user taps a notification
|
|
return notifications.onTap((data) => {
|
|
router.push(`/session/${data.sessionId}`)
|
|
})
|
|
}, [])
|
|
|
|
// Connect/disconnect SSE and load catalog when client changes
|
|
useEffect(() => {
|
|
if (client && !sseStarted.current) {
|
|
sseStarted.current = true
|
|
useEvents.getState().connect()
|
|
useCatalog.getState().load()
|
|
} else if (!client && sseStarted.current) {
|
|
sseStarted.current = false
|
|
useEvents.getState().disconnect()
|
|
}
|
|
return () => {
|
|
if (sseStarted.current) {
|
|
sseStarted.current = false
|
|
useEvents.getState().disconnect()
|
|
}
|
|
}
|
|
}, [client])
|
|
|
|
const isLoading = authLoading || connectionsLoading
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: isDark ? "#0a0a0a" : "#ffffff",
|
|
}}
|
|
>
|
|
<ActivityIndicator size="large" color={isDark ? "#ffffff" : "#0a0a0a"} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
|
<BottomSheetModalProvider>
|
|
<QueryClientProvider client={queryClient}>
|
|
<AuthGate>
|
|
<Stack
|
|
screenOptions={{
|
|
headerStyle: {
|
|
backgroundColor: isDark ? "#0a0a0a" : "#ffffff",
|
|
},
|
|
headerTintColor: isDark ? "#ffffff" : "#0a0a0a",
|
|
contentStyle: {
|
|
backgroundColor: isDark ? "#0a0a0a" : "#ffffff",
|
|
},
|
|
}}
|
|
>
|
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
<Stack.Screen
|
|
name="session/[id]"
|
|
options={{
|
|
title: "Session",
|
|
presentation: "card",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="connection/add"
|
|
options={{
|
|
title: "Add Connection",
|
|
presentation: "modal",
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="connection/[id]"
|
|
options={{
|
|
title: "Edit Connection",
|
|
presentation: "modal",
|
|
}}
|
|
/>
|
|
</Stack>
|
|
<StatusBar style={isDark ? "light" : "dark"} />
|
|
</AuthGate>
|
|
</QueryClientProvider>
|
|
</BottomSheetModalProvider>
|
|
</GestureHandlerRootView>
|
|
)
|
|
}
|