fix: calling backend

.gitignore

@@ -46,7 +46,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-dist/
 
 # turbo
 .turbo

.vscode/settings.json

@@ -12,9 +12,5 @@
     { "pattern": "tooling/*/" }
   ],
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.preferences.autoImportFileExcludePatterns": [
-    "next/router.d.ts",
-    "next/dist/client/router.d.ts"
-  ],
   "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/api/.gitignore

@@ -12,7 +12,6 @@
 
 # production
 /build
-/dist
 /out
 
 # misc

apps/api/package.json

@@ -4,6 +4,11 @@
   "main": "build/index.mjs",
   "private": true,
   "type": "module",
+  "exports": {
+    "./router": {
+      "types": "./build/src/web/router.d.ts"
+    }
+  },
   "scripts": {
     "start": "node build/index.mjs",
     "dev": "pnpm with-env run-p dev:*",
@@ -43,6 +48,7 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^18.19.31",
     "@vercel/node": "^2.15.10",
+    "dotenv-cli": "^7.4.1",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",

apps/api/src/web/endpoint.ts

@@ -12,7 +12,7 @@ import {
   authPlugin,
 } from '@splitter/package-auth'
 
-import { router } from '@/web/router'
+import router from '@/web/router'
 import { createContext } from '@/web/trpc'
 
 const app = fastify({ logger: true })

apps/api/src/web/router.ts

@@ -1,3 +1,5 @@
+import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server'
+
 import {
   CreateUserSchema,
   FindBillsSchema,
@@ -24,6 +26,12 @@ const users = createRouter({
     .mutation(async ({ input }) => await Users.create(input)),
 })
 
-export const router = createRouter({ bills, users })
+const router = createRouter({ bills, users })
+
+export default router
 
 export type Router = typeof router
+
+export type RouterInputs = inferRouterInputs<Router>
+
+export type RouterOutputs = inferRouterOutputs<Router>

apps/mobile/.gitignore

@@ -1,6 +1,5 @@
 node_modules/
 .expo/
-dist/
 npm-debug.*
 *.jks
 *.p8

apps/mobile/app.config.ts

@@ -50,7 +50,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   android: {
     package: getBundleIdentifier(),
     adaptiveIcon: {
-      foregroundImage: './assets/adaptive-icon.png',
+      foregroundImage: './assets/images/adaptive-icon.png',
       backgroundColor: '#ffffff',
     },
   },
@@ -65,7 +65,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   //
   // Environment
   extra: {
-    // ...process.env,
+    ...process.env,
     eas: {
       projectId: '916828f4-940a-42fa-a42d-a662c47baf27',
     },

apps/mobile/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "splitter",
+  "name": "@splitter/mobile",
   "main": "expo-router/entry",
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "expo start",
+    "dev": "pnpm with-env expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
@@ -15,7 +15,8 @@
     "lint:ts": "tsc",
     "lint:eslint": "eslint",
     "lint:prettier": "prettier --check . --ignore-path ../../.gitignore",
-    "clean": "git clean -xdf node_modules .turbo build"
+    "clean": "git clean -xdf node_modules .turbo build",
+    "with-env": "dotenv -e ../../.env --"
   },
   "dependencies": {
     "@expo/metro-config": "~0.18.1",
@@ -44,7 +45,8 @@
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.10",
-    "superjson": "^2.2.1"
+    "superjson": "^2.2.1",
+    "zod": "^3.23.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -56,6 +58,7 @@
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
     "@types/react-test-renderer": "^18.0.7",
+    "dotenv-cli": "^7.4.1",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.2",
     "npm-run-all": "^4.1.5",

apps/mobile/src/app/_layout.tsx

@@ -2,10 +2,14 @@ import '@/styles.css'
 
 import { Stack } from 'expo-router'
 
+import Provider from '@/services/providers'
+
 export default function RootLayout() {
   return (
-    <Stack>
-      <Stack.Screen name="index" />
-    </Stack>
+    <Provider>
+      <Stack>
+        <Stack.Screen name="index" />
+      </Stack>
+    </Provider>
   )
 }

apps/mobile/src/app/index.tsx

@@ -1,6 +1,14 @@
 import { Text, View } from 'react-native'
 
+import { api } from '@/services/api'
+
 export default function Index() {
+  const bills = api.bills.list.useQuery()
+
+  if (bills.error) console.log(bills.error)
+
+  if (bills.isLoading) return <Text>Loading...</Text>
+
   return (
     <View
       style={{

apps/mobile/src/services/api.ts

@@ -0,0 +1,38 @@
+import { createTRPCReact, httpBatchLink, loggerLink } from '@trpc/react-query'
+import superjson from 'superjson'
+
+import type { Router } from '@splitter/api/router'
+
+import env, { isProductionEnv } from '@/services/env'
+
+const protocol = isProductionEnv(env.ENV) ? 'https' : 'http'
+const host = isProductionEnv(env.ENV) ? env.API_HOST : env.DEBUGGER_HOST
+const port = env.API_PORT
+const pathname = '/trpc'
+
+const TRPC_API_URL = `${protocol}://${host}:${port}${pathname}`
+
+export const api = createTRPCReact<Router>()
+
+export const TRPCProvider = api.Provider
+
+export const createTRPCClient = () =>
+  api.createClient({
+    transformer: superjson,
+    links: [
+      loggerLink({
+        colorMode: 'ansi',
+        enabled: (opts) => opts.direction === 'down' && !opts.result,
+      }),
+      httpBatchLink({
+        url: TRPC_API_URL,
+        headers() {
+          const headers = new Map<string, string>()
+          headers.set('x-trpc-source', 'expo-react')
+          return Object.fromEntries(headers)
+        },
+      }),
+    ],
+  })
+
+export { type RouterInputs, type RouterOutputs } from '@splitter/api/router'

apps/mobile/src/services/env.ts

@@ -0,0 +1,18 @@
+import Constants from 'expo-constants'
+import z from 'zod'
+
+export function isProductionEnv(env: 'development' | 'production') {
+  return env === 'production'
+}
+
+const schema = z.object({
+  ENV: z.union([z.literal('development'), z.literal('production')]),
+  API_HOST: z.string(),
+  API_PORT: z.string(),
+  DEBUGGER_HOST: z.string(),
+})
+
+export default schema.parse({
+  ...Constants.expoConfig?.extra,
+  DEBUGGER_HOST: Constants.expoConfig?.hostUri?.split(':').at(0) ?? '',
+})

apps/mobile/src/services/providers.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { TRPCProvider, createTRPCClient } from '@/services/api'
+
+interface Props {
+  children: JSX.Element | JSX.Element[]
+}
+
+export default function Provider({ children }: Props) {
+  const [queryClient] = useState(() => new QueryClient())
+  const [trpcClient] = useState(() => createTRPCClient())
+
+  return (
+    <TRPCProvider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </TRPCProvider>
+  )
+}

packages/db/tsconfig.json

@@ -9,5 +9,5 @@
     }
   },
   "include": ["*.ts", "src"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "build"]
 }

packages/validators/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@splitter/tooling-typescript/internal-package.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "outDir": "build",
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
     "baseUrl": ".",
     "paths": {

tooling/eslint/src/base.js

@@ -25,9 +25,11 @@ export default tseslint.config(
       ...tseslint.configs.stylisticTypeChecked,
     ],
     rules: {
-      // Typescript Eslint
       'no-unused-vars': 'error',
+      // Typescript Eslint
       '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-return': 'off',
       '@typescript-eslint/consistent-type-imports': [
         'warn',
         { prefer: 'type-imports', fixStyle: 'separate-type-imports' },

tooling/typescript/base.json

@@ -21,5 +21,5 @@
     "moduleResolution": "Bundler",
     "noEmit": true
   },
-  "exclude": ["node_modules", "build", "dist", ".expo"]
+  "exclude": ["node_modules", "build", ".expo"]
 }