Update expo app to make it somewhat functional

apps/expo/src/app/index.tsx

@@ -1,172 +1,54 @@
-import { useState } from 'react';
-import { Pressable, Text, TextInput, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { Link, Stack } from 'expo-router';
-import { LegendList } from '@legendapp/list';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Stack } from 'expo-router';
+import { useAuthActions } from '@convex-dev/auth/react';
+import { useConvexAuth, useQuery } from 'convex/react';
 
-import type { RouterOutputs } from '~/utils/api';
-import { trpc } from '~/utils/api';
-import { authClient } from '~/utils/auth';
+import { api } from '@gib/backend/convex/_generated/api.js';
+
+const Index = () => {
+  const { isAuthenticated, isLoading } = useConvexAuth();
+  const { signOut } = useAuthActions();
+  const user = useQuery(api.auth.getUser, isAuthenticated ? {} : 'skip');
 
-function PostCard(props: {
-  post: RouterOutputs['post']['all'][number];
-  onDelete: () => void;
-}) {
   return (
-    <View className='bg-muted flex flex-row rounded-lg p-4'>
-      <View className='grow'>
-        <Link
-          asChild
-          href={{
-            pathname: '/post/[id]',
-            params: { id: props.post.id },
-          }}
-        >
-          <Pressable className=''>
-            <Text className='text-primary text-xl font-semibold'>
-              {props.post.title}
+    <SafeAreaView className='bg-background flex-1'>
+      <Stack.Screen options={{ title: 'Home' }} />
+      <View className='flex-1 items-center justify-center gap-4 p-6'>
+        <Text className='text-foreground text-4xl font-bold'>
+          Convex Monorepo
+        </Text>
+        <Text className='text-muted-foreground text-center text-base'>
+          Your self-hosted Expo + Convex starter
+        </Text>
+
+        {isLoading ? (
+          <Text className='text-muted-foreground'>Loading...</Text>
+        ) : isAuthenticated ? (
+          <View className='w-full gap-3'>
+            <Text className='text-foreground text-center text-lg'>
+              Welcome{user?.name ? `, ${user.name}` : ''}!
             </Text>
-            <Text className='text-foreground mt-2'>{props.post.content}</Text>
-          </Pressable>
-        </Link>
-      </View>
-      <Pressable onPress={props.onDelete}>
-        <Text className='text-primary font-bold uppercase'>Delete</Text>
-      </Pressable>
-    </View>
-  );
-}
-
-function CreatePost() {
-  const queryClient = useQueryClient();
-
-  const [title, setTitle] = useState('');
-  const [content, setContent] = useState('');
-
-  const { mutate, error } = useMutation(
-    trpc.post.create.mutationOptions({
-      async onSuccess() {
-        setTitle('');
-        setContent('');
-        await queryClient.invalidateQueries(trpc.post.all.queryFilter());
-      },
-    }),
-  );
-
-  return (
-    <View className='mt-4 flex gap-2'>
-      <TextInput
-        className='border-input bg-background text-foreground items-center rounded-md border px-3 text-lg leading-tight'
-        value={title}
-        onChangeText={setTitle}
-        placeholder='Title'
-      />
-      {error?.data?.zodError?.fieldErrors.title && (
-        <Text className='text-destructive mb-2'>
-          {error.data.zodError.fieldErrors.title}
-        </Text>
-      )}
-      <TextInput
-        className='border-input bg-background text-foreground items-center rounded-md border px-3 text-lg leading-tight'
-        value={content}
-        onChangeText={setContent}
-        placeholder='Content'
-      />
-      {error?.data?.zodError?.fieldErrors.content && (
-        <Text className='text-destructive mb-2'>
-          {error.data.zodError.fieldErrors.content}
-        </Text>
-      )}
-      <Pressable
-        className='bg-primary flex items-center rounded-sm p-2'
-        onPress={() => {
-          mutate({
-            title,
-            content,
-          });
-        }}
-      >
-        <Text className='text-foreground'>Create</Text>
-      </Pressable>
-      {error?.data?.code === 'UNAUTHORIZED' && (
-        <Text className='text-destructive mt-2'>
-          You need to be logged in to create a post
-        </Text>
-      )}
-    </View>
-  );
-}
-
-function MobileAuth() {
-  const { data: session } = authClient.useSession();
-
-  return (
-    <>
-      <Text className='text-foreground pb-2 text-center text-xl font-semibold'>
-        {session?.user.name ? `Hello, ${session.user.name}` : 'Not logged in'}
-      </Text>
-      <Pressable
-        onPress={() =>
-          session
-            ? authClient.signOut()
-            : authClient.signIn.social({
-                provider: 'discord',
-                callbackURL: '/',
-              })
-        }
-        className='bg-primary flex items-center rounded-sm p-2'
-      >
-        <Text>{session ? 'Sign Out' : 'Sign In With Discord'}</Text>
-      </Pressable>
-    </>
-  );
-}
-
-export default function Index() {
-  const queryClient = useQueryClient();
-
-  const postQuery = useQuery(trpc.post.all.queryOptions());
-
-  const deletePostMutation = useMutation(
-    trpc.post.delete.mutationOptions({
-      onSettled: () =>
-        queryClient.invalidateQueries(trpc.post.all.queryFilter()),
-    }),
-  );
-
-  return (
-    <SafeAreaView className='bg-background'>
-      {/* Changes page title visible on the header */}
-      <Stack.Screen options={{ title: 'Home Page' }} />
-      <View className='bg-background h-full w-full p-4'>
-        <Text className='text-foreground pb-2 text-center text-5xl font-bold'>
-          Create <Text className='text-primary'>T3</Text> Turbo
-        </Text>
-
-        <MobileAuth />
-
-        <View className='py-2'>
-          <Text className='text-primary font-semibold italic'>
-            Press on a post
-          </Text>
-        </View>
-
-        <LegendList
-          data={postQuery.data ?? []}
-          estimatedItemSize={20}
-          keyExtractor={(item) => item.id}
-          ItemSeparatorComponent={() => <View className='h-2' />}
-          renderItem={(p) => (
-            <PostCard
-              post={p.item}
-              onDelete={() => deletePostMutation.mutate(p.item.id)}
-            />
-          )}
-        />
-
-        <CreatePost />
+            <Pressable
+              className='bg-primary items-center rounded-md p-3'
+              onPress={() => void signOut()}
+            >
+              <Text className='text-primary-foreground font-semibold'>
+                Sign Out
+              </Text>
+            </Pressable>
+          </View>
+        ) : (
+          <View className='w-full gap-3'>
+            <Text className='text-muted-foreground text-center'>
+              Sign in to get started
+            </Text>
+            {/* Add sign-in UI here — see apps/next/src/app/(auth)/sign-in for patterns */}
+          </View>
+        )}
       </View>
     </SafeAreaView>
   );
-}
+};
+
+export default Index;