@@ -24,128 +24,124 @@ import { SignUp } from "@/components/sign-up";
2424import { useQuery } from "convex/react";
2525import { api } from "@{{ projectName }} /backend/convex/_generated/api";
2626{{ /if }}
27+ {{ #unless (eq backend " none" )}}
2728import { Ionicons } from "@expo/vector-icons";
29+ {{ /unless }}
2830import { Card, Chip, useThemeColor } from "heroui-native";
2931
3032export default function Home() {
3133{{ #if (eq api " orpc" )}}
32- const healthCheck = useQuery(orpc.healthCheck.queryOptions());
34+ const healthCheck = useQuery(orpc.healthCheck.queryOptions());
3335{{ /if }}
3436{{ #if (eq api " trpc" )}}
35- const healthCheck = useQuery(trpc.healthCheck.queryOptions());
37+ const healthCheck = useQuery(trpc.healthCheck.queryOptions());
3638{{ /if }}
3739{{ #if (and (eq backend " convex" ) (eq auth " clerk" ))}}
38- const { user } = useUser();
39- const healthCheck = useQuery(api.healthCheck.get);
40- const privateData = useQuery(api.privateData.get);
40+ const { user } = useUser();
41+ const healthCheck = useQuery(api.healthCheck.get);
42+ const privateData = useQuery(api.privateData.get);
4143{{ else if (and (eq backend "convex") (eq auth "better-auth"))}}
42- const healthCheck = useQuery(api.healthCheck.get);
43- const { isAuthenticated } = useConvexAuth();
44- const user = useQuery(api.auth.getCurrentUser, isAuthenticated ? {} : "skip");
44+ const healthCheck = useQuery(api.healthCheck.get);
45+ const { isAuthenticated } = useConvexAuth();
46+ const user = useQuery(api.auth.getCurrentUser, isAuthenticated ? {} : "skip");
4547{{ else if (eq backend "convex")}}
46- const healthCheck = useQuery(api.healthCheck.get);
48+ const healthCheck = useQuery(api.healthCheck.get);
4749{{ /if }}
48- const mutedColor = useThemeColor("muted");
49- const successColor = useThemeColor("success");
50- const dangerColor = useThemeColor("danger");
50+ {{ #unless (eq backend " none" )}}
51+ const mutedColor = useThemeColor("muted");
52+ const successColor = useThemeColor("success");
53+ const dangerColor = useThemeColor("danger");
5154
5255{{ #if (eq backend " convex" )}}
53- const isConnected = healthCheck === "OK";
54- const isLoading = healthCheck === undefined;
56+ const isConnected = healthCheck === "OK";
57+ const isLoading = healthCheck === undefined;
5558{{ else }}
5659{{ #unless (eq api " none" )}}
57- const isConnected = healthCheck?.data === "OK";
58- const isLoading = healthCheck?.isLoading;
60+ const isConnected = healthCheck?.data === "OK";
61+ const isLoading = healthCheck?.isLoading;
5962{{ /unless }}
6063{{ /if }}
64+ {{ /unless }}
6165
62- return (
63- <Container className =" p-6" >
64- <View className =" py-4 mb-6" >
65- <Text className =" text-4xl font-bold text-foreground mb-2" >
66- BETTER T STACK
67- </Text >
68- </View >
69-
70- {{ #unless (and (eq backend " convex" ) (eq auth " better-auth" ))}}
71- <Card variant =" secondary" className =" p-6" >
72- <View className =" flex-row items-center justify-between mb-4" >
73- <Card .Title>System Status</Card .Title>
74- <Chip
75- variant =" secondary"
76- color = {isConnected ? " success" : " danger" }
77- size =" sm"
78- >
79- <Chip .Label>
80- {isConnected ? "LIVE" : "OFFLINE"}
81- </Chip .Label>
82- </Chip >
83- </View >
84- <Card className =" p-4" >
85- <View className =" flex-row items-center" >
86- <View
87- className = {`w-3 h-3 rounded-full mr-3 ${
88- isConnected ? " bg-success" : " bg-muted"
89- }`}
90- />
91- <View className =" flex-1" >
92- <Text className =" text-foreground font-medium mb-1" >
93- {{ #if (eq backend " convex" )}}
94- Convex Backend
95- {{ else }}
96- {{ #unless (eq api " none" )}}
97- {{ #if (eq api " orpc" )}} ORPC{{ else }} TRPC{{ /if }} Backend
98- {{ /unless }}
99- {{ /if }}
100- </Text >
101- <Card .Description>
102- {isLoading
103- ? "Checking connection..."
104- : isConnected
105- ? "Connected to API"
106- : "API Disconnected"}
107- </Card .Description>
108- </View >
109- {isLoading && (
110- <Ionicons name =" hourglass-outline" size = {20} color = {mutedColor} />
111- )}
112- {!isLoading && isConnected && (
113- <Ionicons name =" checkmark-circle" size = {20} color = {successColor} />
114- )}
115- {!isLoading && !isConnected && (
116- <Ionicons name =" close-circle" size = {20} color = {dangerColor} />
117- )}
118- </View >
119- </Card >
120- </Card >
121- {{ /unless }}
66+ return (
67+ <Container className =" p-6" >
68+ <View className =" py-4 mb-6" >
69+ <Text className =" text-4xl font-bold text-foreground mb-2" >
70+ BETTER T STACK
71+ </Text >
72+ </View >
12273
123- {{ #if (and (eq backend " convex" ) (eq auth " clerk" ))}}
124- <Authenticated >
125- <Card variant =" secondary" className =" mt-6 p-4" >
126- <Text className =" text-foreground text-base mb-2" >
127- Hello {user?.emailAddresses[0].emailAddress}
128- </Text >
129- <Text className =" text-muted text-sm mb-4" >
130- Private Data: {privateData?.message}
74+ {{ #unless (or (eq backend " none" ) (and (eq backend " convex" ) (eq auth " better-auth" )))}}
75+ <Card variant =" secondary" className =" p-6" >
76+ <View className =" flex-row items-center justify-between mb-4" >
77+ <Card .Title>System Status</Card .Title>
78+ <Chip variant =" secondary" color = {isConnected ? " success" : " danger" } size =" sm" >
79+ <Chip .Label>
80+ {isConnected ? "LIVE" : "OFFLINE"}
81+ </Chip .Label>
82+ </Chip >
83+ </View >
84+ <Card className =" p-4" >
85+ <View className =" flex-row items-center" >
86+ <View className = {`w-3 h-3 rounded-full mr-3 ${ isConnected ? " bg-success" : " bg-muted" }`} />
87+ <View className =" flex-1" >
88+ <Text className =" text-foreground font-medium mb-1" >
89+ {{ #if (eq backend " convex" )}}
90+ Convex Backend
91+ {{ else }}
92+ {{ #unless (eq api " none" )}}
93+ {{ #if (eq api " orpc" )}} ORPC{{ else }} TRPC{{ /if }} Backend
94+ {{ /unless }}
95+ {{ /if }}
13196 </Text >
132- <SignOutButton />
133- </Card >
134- </Authenticated >
135- <Unauthenticated >
136- <View className =" mt-6 gap-4" >
137- <Link href =" /(auth)/sign-in" asChild>
138- <Text className =" text-primary font-semibold" >Sign in</Text >
139- </Link >
140- <Link href =" /(auth)/sign-up" asChild>
141- <Text className =" text-primary font-semibold" >Sign up</Text >
142- </Link >
97+ <Card .Description>
98+ {isLoading
99+ ? "Checking connection..."
100+ : isConnected
101+ ? "Connected to API"
102+ : "API Disconnected"}
103+ </Card .Description>
143104 </View >
144- </Unauthenticated >
145- <AuthLoading >
146- <Text className =" text-muted" >Loading...</Text >
147- </AuthLoading >
148- {{ /if }}
149- </Container >
150- );
105+ {isLoading && (
106+ <Ionicons name =" hourglass-outline" size = {20} color = {mutedColor} />
107+ )}
108+ {!isLoading && isConnected && (
109+ <Ionicons name =" checkmark-circle" size = {20} color = {successColor} />
110+ )}
111+ {!isLoading && !isConnected && (
112+ <Ionicons name =" close-circle" size = {20} color = {dangerColor} />
113+ )}
114+ </View >
115+ </Card >
116+ </Card >
117+ {{ /unless }}
118+
119+ {{ #if (and (eq backend " convex" ) (eq auth " clerk" ))}}
120+ <Authenticated >
121+ <Card variant =" secondary" className =" mt-6 p-4" >
122+ <Text className =" text-foreground text-base mb-2" >
123+ Hello {user?.emailAddresses[0].emailAddress}
124+ </Text >
125+ <Text className =" text-muted text-sm mb-4" >
126+ Private Data: {privateData?.message}
127+ </Text >
128+ <SignOutButton />
129+ </Card >
130+ </Authenticated >
131+ <Unauthenticated >
132+ <View className =" mt-6 gap-4" >
133+ <Link href =" /(auth)/sign-in" asChild>
134+ <Text className =" text-primary font-semibold" >Sign in</Text >
135+ </Link >
136+ <Link href =" /(auth)/sign-up" asChild>
137+ <Text className =" text-primary font-semibold" >Sign up</Text >
138+ </Link >
139+ </View >
140+ </Unauthenticated >
141+ <AuthLoading >
142+ <Text className =" text-muted" >Loading...</Text >
143+ </AuthLoading >
144+ {{ /if }}
145+ </Container >
146+ );
151147}
0 commit comments