feat(mobile): [Transaction] add create transaction with success toast (…

…#101)

Resolves #39

https://github.com/sixpm-ai/6pm/assets/16166195/b19780bc-ab86-4f48-b811-1f94235d4cc2

apps/mobile/app/(app)/new-record.tsx

@@ -1,12 +1,34 @@
+import { toast } from '@/components/common/toast'
 import { TransactionForm } from '@/components/transaction/transaction-form'
+import { createTransaction } from '@/mutations/transaction'
 import { useWallets } from '@/queries/wallet'
+import { t } from '@lingui/macro'
+import { useLingui } from '@lingui/react'
+import { useMutation } from '@tanstack/react-query'
 import { useRouter } from 'expo-router'
 import { LoaderIcon } from 'lucide-react-native'
-import { View } from 'react-native'
+import { Alert, View } from 'react-native'
 
 export default function NewRecordScreen() {
   const router = useRouter()
   const { data: walletAccounts } = useWallets()
+  const { i18n } = useLingui()
+  // const queryClient = useQueryClient()
+  const { mutateAsync } = useMutation({
+    mutationFn: createTransaction,
+    onError(error) {
+      Alert.alert(error.message)
+    },
+    onSuccess() {
+      router.back()
+      toast.success(t(i18n)`Transaction created`)
+    },
+    async onSettled() {
+      // await queryClient.invalidateQueries({
+      //   queryKey: transactionQueries.list._def,
+      // })
+    },
+  })
 
   const defaultWallet = walletAccounts?.[0]
 
@@ -20,7 +42,7 @@ export default function NewRecordScreen() {
 
   return (
     <TransactionForm
-      onSubmit={(values) => console.log('submit', values)}
+      onSubmit={mutateAsync}
       onCancel={router.back}
       defaultValues={{
         walletAccountId: defaultWallet.id,

apps/mobile/app/_layout.tsx

@@ -14,6 +14,7 @@ import { SplashScreen, Stack } from 'expo-router'
 import * as WebBrowser from 'expo-web-browser'
 
 import 'react-native-reanimated'
+import { ToastRoot } from '@/components/common/toast'
 import { useWarmUpBrowser } from '@/hooks/use-warm-up-browser'
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { queryClient } from '@/lib/client'
@@ -85,6 +86,7 @@ export default function RootLayout() {
                       }}
                     />
                   </Stack>
+                  <ToastRoot />
                 </BottomSheetModalProvider>
               </GestureHandlerRootView>
             </SafeAreaProvider>

apps/mobile/components/common/toast.tsx

@@ -0,0 +1,15 @@
+import { Toasts, toast as rntoast } from '@backpackapp-io/react-native-toast'
+
+export function ToastRoot() {
+  return (
+    <Toasts
+      defaultStyle={{
+        text: {
+          fontFamily: 'Be Vietnam Pro',
+        },
+      }}
+    />
+  )
+}
+
+export const toast = rntoast

apps/mobile/mutations/transaction.ts

@@ -0,0 +1,22 @@
+import { getHonoClient } from '@/lib/client'
+import { type TransactionFormValues, TransactionSchema } from '@6pm/validation'
+import { z } from 'zod'
+
+export async function createTransaction(data: TransactionFormValues) {
+  const hc = await getHonoClient()
+  const result = await hc.v1.transactions.$post({
+    json: data,
+  })
+
+  if (result.ok) {
+    const transaction = await result.json()
+    return TransactionSchema.merge(
+      z.object({
+        // override Decimal type with number
+        amount: z.number({ coerce: true }),
+      }),
+    ).parse(transaction)
+  }
+
+  return result
+}

apps/mobile/package.json

@@ -19,6 +19,7 @@
     "@6pm/api": "workspace:^",
     "@6pm/currency": "workspace:^",
     "@6pm/validation": "workspace:^",
+    "@backpackapp-io/react-native-toast": "^0.11.0",
     "@clerk/clerk-expo": "^1.2.0",
     "@expo-google-fonts/be-vietnam-pro": "^0.2.3",
     "@expo/vector-icons": "^14.0.0",