From 08251bc3d836d2eebfc7960da116d0292478b703 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <khanh@quocs.com>
Date: Mon, 10 Jun 2024 00:50:43 +0700
Subject: [PATCH] feat(mobile): create db user after sign up

---
 apps/api/v1/validation/user.zod.ts          |  2 +-
 apps/mobile/app/(app)/(tabs)/explore.tsx    | 15 +------
 apps/mobile/app/(app)/_layout.tsx           |  4 +-
 apps/mobile/app/_layout.tsx                 |  3 +-
 apps/mobile/components/auth/auth-email.tsx  |  7 +++
 apps/mobile/components/auth/auth-social.tsx | 49 +++++++++------------
 apps/mobile/mutations/user.ts               | 14 ++++++
 apps/mobile/queries/auth.ts                 | 16 +++++++
 8 files changed, 64 insertions(+), 46 deletions(-)
 create mode 100644 apps/mobile/mutations/user.ts
 create mode 100644 apps/mobile/queries/auth.ts

diff --git a/apps/api/v1/validation/user.zod.ts b/apps/api/v1/validation/user.zod.ts
index 81c4ef15..9724697a 100644
--- a/apps/api/v1/validation/user.zod.ts
+++ b/apps/api/v1/validation/user.zod.ts
@@ -3,7 +3,7 @@ import { z } from 'zod'
 export const zCreateUser = z.object({
   id: z.string().optional(),
   email: z.string().email(),
-  name: z.string().min(3),
+  name: z.string().optional(),
 })
 
 export type CreateUser = z.infer<typeof zCreateUser>
diff --git a/apps/mobile/app/(app)/(tabs)/explore.tsx b/apps/mobile/app/(app)/(tabs)/explore.tsx
index 99144fdc..79e9d449 100644
--- a/apps/mobile/app/(app)/(tabs)/explore.tsx
+++ b/apps/mobile/app/(app)/(tabs)/explore.tsx
@@ -1,23 +1,12 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/Avatar'
 import { Button } from '@/components/Button'
-import { getHonoClient } from '@/lib/client'
+import { useMeQuery } from '@/queries/auth'
 import { useAuth } from '@clerk/clerk-expo'
-import { useQuery } from '@tanstack/react-query'
 import { ScrollView, Text, View } from 'react-native'
 
 export default function TabTwoScreen() {
   const { signOut } = useAuth()
-  const { data } = useQuery({
-    queryKey: ['me'],
-    queryFn: async () => {
-      const hc = await getHonoClient()
-      const res = await hc.v1.auth.me.$get()
-      if (!res.ok) {
-        throw new Error(await res.text())
-      }
-      return await res.json()
-    },
-  })
+  const { data } = useMeQuery()
 
   return (
     <ScrollView contentContainerClassName="flex-1 p-4">
diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
index 41d5c7d2..4d6655ff 100644
--- a/apps/mobile/app/(app)/_layout.tsx
+++ b/apps/mobile/app/(app)/_layout.tsx
@@ -7,11 +7,11 @@ export default function AuthenticatedLayout() {
 
   useEffect(() => {
     if (isLoaded) {
-      SplashScreen.hideAsync()
+      setTimeout(() => SplashScreen.hideAsync(), 1000)
     }
   }, [isLoaded])
 
-  if (!isSignedIn) {
+  if (!isSignedIn && isLoaded) {
     return <Redirect href={'/login'} />
   }
 
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 10b5a0f2..f412353c 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -10,8 +10,7 @@ import {
   BeVietnamPro_700Bold,
   useFonts,
 } from '@expo-google-fonts/be-vietnam-pro'
-import { Stack } from 'expo-router'
-import * as SplashScreen from 'expo-splash-screen'
+import { SplashScreen, Stack } from 'expo-router'
 import * as WebBrowser from "expo-web-browser";
 
 import 'react-native-reanimated'
diff --git a/apps/mobile/components/auth/auth-email.tsx b/apps/mobile/components/auth/auth-email.tsx
index bd0d5133..d61280ce 100644
--- a/apps/mobile/components/auth/auth-email.tsx
+++ b/apps/mobile/components/auth/auth-email.tsx
@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useState } from 'react'
 import { View } from 'react-native'
 
+import { useCreateUserMutation } from '@/mutations/user'
 import { XCircleIcon } from 'lucide-react-native'
 import { FormProvider, useForm } from 'react-hook-form'
 import { IconButton } from '../IconButton'
@@ -27,6 +28,8 @@ export function AuthEmail() {
   const [verifying, setVerifying] = useState(false)
   const [mode, setMode] = useState<'signUp' | 'signIn'>('signUp')
 
+  const { mutateAsync: createUser } = useCreateUserMutation()
+
   const {
     isLoaded: isSignUpLoaded,
     signUp,
@@ -92,6 +95,10 @@ export function AuthEmail() {
         if (signUpAttempt.status === 'complete') {
           await setActiveSignUp({ session: signUpAttempt.createdSessionId })
           // signed up
+          await createUser({
+            email: signUpAttempt.emailAddress!,
+            name: signUpAttempt.firstName ?? '',
+          })
         } else {
           console.error(signUpAttempt)
         }
diff --git a/apps/mobile/components/auth/auth-social.tsx b/apps/mobile/components/auth/auth-social.tsx
index ee04f5ec..5d079866 100644
--- a/apps/mobile/components/auth/auth-social.tsx
+++ b/apps/mobile/components/auth/auth-social.tsx
@@ -1,3 +1,4 @@
+import { useCreateUserMutation } from '@/mutations/user'
 import { useOAuth } from '@clerk/clerk-expo'
 import type { SvgProps } from 'react-native-svg'
 import { Button } from '../Button'
@@ -7,24 +8,25 @@ import { GoogleLogo } from '../svg-assets/google-logo'
 type AuthSocialProps = {
   label: string
   icon: React.ComponentType<SvgProps>
-  onPress?: () => void
+  strategy: 'oauth_google' | 'oauth_apple'
 }
 
-export function AuthSocial({ label, icon: Icon, onPress }: AuthSocialProps) {
-  return (
-    <Button label={label} leftIcon={Icon} variant="outline" onPress={onPress} />
-  )
-}
-
-export function GoogleAuthButton() {
-  const { startOAuthFlow } = useOAuth({ strategy: 'oauth_google' })
+export function AuthSocial({ label, icon: Icon, strategy }: AuthSocialProps) {
+  const { startOAuthFlow } = useOAuth({ strategy })
+  const { mutateAsync: createUser } = useCreateUserMutation()
 
   const onPress = async () => {
     try {
-      const { createdSessionId, setActive } = await startOAuthFlow()
+      const { createdSessionId, setActive, signUp } = await startOAuthFlow()
 
       if (createdSessionId) {
         setActive?.({ session: createdSessionId })
+        if (signUp?.createdUserId) {
+          setTimeout(async () => await createUser({
+            email: signUp.emailAddress!,
+            name: signUp.firstName ?? '',
+          }), 1000)
+        }
       } else {
         // Use signIn or signUp for next steps such as MFA
       }
@@ -33,37 +35,28 @@ export function GoogleAuthButton() {
     }
   }
 
+  return (
+    <Button label={label} leftIcon={Icon} variant="outline" onPress={onPress} />
+  )
+}
+
+export function GoogleAuthButton() {
+
   return (
     <AuthSocial
       label="Sign in with Google"
       icon={GoogleLogo}
-      onPress={onPress}
+      strategy="oauth_google"
     />
   )
 }
 
 export function AppleAuthButton() {
-  const { startOAuthFlow } = useOAuth({ strategy: 'oauth_apple' })
-
-  const onPress = async () => {
-    try {
-      const { createdSessionId, setActive } = await startOAuthFlow()
-
-      if (createdSessionId) {
-        setActive?.({ session: createdSessionId })
-      } else {
-        // Use signIn or signUp for next steps such as MFA
-      }
-    } catch (err) {
-      console.error('OAuth error', err)
-    }
-  }
-
   return (
     <AuthSocial
       label="Sign in with Apple"
       icon={AppleLogo}
-      onPress={onPress}
+      strategy="oauth_apple"
     />
   )
 }
diff --git a/apps/mobile/mutations/user.ts b/apps/mobile/mutations/user.ts
new file mode 100644
index 00000000..65ef9d31
--- /dev/null
+++ b/apps/mobile/mutations/user.ts
@@ -0,0 +1,14 @@
+import { getHonoClient } from '@/lib/client'
+import type { CreateUser } from '@6pm/api'
+import { useMutation } from '@tanstack/react-query'
+
+export function useCreateUserMutation() {
+  return useMutation({
+    mutationFn: async (data: CreateUser) => {
+      const hc = await getHonoClient()
+      await hc.v1.users.$post({
+        json: data,
+      })
+    },
+  })
+}
diff --git a/apps/mobile/queries/auth.ts b/apps/mobile/queries/auth.ts
new file mode 100644
index 00000000..3f31d274
--- /dev/null
+++ b/apps/mobile/queries/auth.ts
@@ -0,0 +1,16 @@
+import { getHonoClient } from '@/lib/client'
+import { useQuery } from '@tanstack/react-query'
+
+export function useMeQuery() {
+  return useQuery({
+    queryKey: ['me'],
+    queryFn: async () => {
+      const hc = await getHonoClient()
+      const res = await hc.v1.auth.me.$get()
+      if (!res.ok) {
+        throw new Error(await res.text())
+      }
+      return await res.json()
+    },
+  })
+}