Chore: Separate components and update architecture

Victor-Zarzar · Victor-Zarzar · commit 364a7a2cb349 · 2026-02-28T07:36:28.000-03:00
diff --git a/bun.lock b/bun.lock
diff --git a/drizzle/0000_wet_zemo.sql b/drizzle/0000_wet_zemo.sql
@@ -1,25 +1,25 @@
 CREATE TABLE `items` (
-	`id` text PRIMARY KEY NOT NULL,
+	`id` integer PRIMARY KEY NOT NULL,
 	`title` text NOT NULL,
 	`created_at` integer NOT NULL,
 	`updated_at` integer NOT NULL
 );
 --> statement-breakpoint
 CREATE TABLE `password_resets` (
-	`id` text PRIMARY KEY NOT NULL,
+	`id` integer PRIMARY KEY NOT NULL,
 	`email` text NOT NULL,
 	`code` text NOT NULL,
 	`expires_at` integer NOT NULL
 );
 --> statement-breakpoint
 CREATE TABLE `sessions` (
-	`id` text PRIMARY KEY NOT NULL,
+	`id` integer PRIMARY KEY NOT NULL,
 	`user_id` text NOT NULL,
 	`created_at` integer NOT NULL
 );
 --> statement-breakpoint
 CREATE TABLE `users` (
-	`id` text PRIMARY KEY NOT NULL,
+	`id` integer PRIMARY KEY NOT NULL,
 	`email` text NOT NULL,
 	`password_hash` text NOT NULL,
 	`created_at` integer NOT NULL
diff --git a/drizzle/meta/0000_snapshot.json b/drizzle/meta/0000_snapshot.json
@@ -1,15 +1,15 @@
 {
   "version": "6",
   "dialect": "sqlite",
-  "id": "5a28ff77-c60e-42fa-8309-7d617a231245",
+  "id": "a80d7cec-989f-4bd1-97a4-b7d30ff894c8",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "items": {
       "name": "items",
       "columns": {
         "id": {
           "name": "id",
-          "type": "text",
+          "type": "integer",
           "primaryKey": true,
           "notNull": true,
           "autoincrement": false
@@ -47,7 +47,7 @@
       "columns": {
         "id": {
           "name": "id",
-          "type": "text",
+          "type": "integer",
           "primaryKey": true,
           "notNull": true,
           "autoincrement": false
@@ -85,7 +85,7 @@
       "columns": {
         "id": {
           "name": "id",
-          "type": "text",
+          "type": "integer",
           "primaryKey": true,
           "notNull": true,
           "autoincrement": false
@@ -116,7 +116,7 @@
       "columns": {
         "id": {
           "name": "id",
-          "type": "text",
+          "type": "integer",
           "primaryKey": true,
           "notNull": true,
           "autoincrement": false
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "6",
-      "when": 1772230312846,
-      "tag": "0000_rich_echo",
+      "when": 1772274776298,
+      "tag": "0000_wet_zemo",
       "breakpoints": true
     }
   ]
diff --git a/drizzle/migrations.js b/drizzle/migrations.js
@@ -1,7 +1,7 @@
 // This file is required for Expo/React Native SQLite migrations - https://orm.drizzle.team/quick-sqlite/expo
 
 import journal from './meta/_journal.json';
-import m0000 from './0000_rich_echo.sql';
+import m0000 from './0000_wet_zemo.sql';
 
   export default {
     journal,
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
 		"expo-localization": "~17.0.8",
 		"expo-router": "~6.0.19",
 		"expo-splash-screen": "~31.0.12",
-		"expo-sqlite": "~16.0.10",
+		"expo-sqlite": "^16.0.10",
 		"expo-status-bar": "~3.0.9",
 		"expo-system-ui": "~6.0.9",
 		"i18next": "^25.8.13",
diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx
@@ -1,5 +1,5 @@
+import { useAuth } from "@/shared/hooks/useAuth";
 import { Redirect } from "expo-router";
-import { useAuth } from "@/shared/providers/auth-provider";
 
 export default function Index() {
 	const { user, isBootstrapping } = useAuth();
diff --git a/src/app/(auth)/_layout.tsx b/src/app/(auth)/_layout.tsx
@@ -1,5 +1,5 @@
+import { useAuth } from "@/shared/hooks/useAuth";
 import { Redirect, Stack } from "expo-router";
-import { useAuth } from "@/shared/providers/auth-provider";
 
 export default function AuthLayout() {
 	const { isBootstrapping, user } = useAuth();
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -1,10 +1,12 @@
 import { ThemeProvider } from "@react-navigation/native";
 import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
+import { Suspense } from "react";
+import { ActivityIndicator, View } from "react-native";
 import { useColorScheme } from "nativewind";
 import { NAV_THEME } from "@/shared/lib/theme";
-import { DbGate } from "@/shared/providers/db-gate";
-import { AuthProvider } from "@/shared/providers/auth-provider";
+import { AuthProvider } from "@/shared/auth/provider";
+import { DbProvider } from "@/shared/db/provider";
 import "@/shared/global.css";
 import "../../i18n";
 
@@ -15,14 +17,22 @@ export default function RootLayout() {
 	return (
 		<ThemeProvider value={theme}>
 			<StatusBar style={theme.dark ? "light" : "dark"} />
-			<DbGate>
-				<AuthProvider>
-					<Stack screenOptions={{ headerShown: false }}>
-						<Stack.Screen name="(auth)" />
-						<Stack.Screen name="(app)" />
-					</Stack>
-				</AuthProvider>
-			</DbGate>
+			<Suspense
+				fallback={
+					<View className="flex-1 justify-center items-center">
+						<ActivityIndicator size="large" />
+					</View>
+				}
+			>
+				<DbProvider>
+					<AuthProvider>
+						<Stack screenOptions={{ headerShown: false }}>
+							<Stack.Screen name="(auth)" />
+							<Stack.Screen name="(app)" />
+						</Stack>
+					</AuthProvider>
+				</DbProvider>
+			</Suspense>
 		</ThemeProvider>
 	);
 }
diff --git a/src/shared/auth/context.ts b/src/shared/auth/context.ts
@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import type { AuthContextType } from "@/shared/types/auth";
+
+export const AuthContext = createContext<AuthContextType | null>(null);
diff --git a/src/shared/auth/index.ts b/src/shared/auth/index.ts
@@ -0,0 +1,3 @@
+export { AuthProvider } from "./provider";
+export { useAuth } from "@/shared/hooks/useAuth";
+export type { AuthUser, AuthContextType } from "@/shared/types/auth";
diff --git a/src/shared/auth/provider.tsx b/src/shared/auth/provider.tsx
@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from "react";
+import { AuthContext } from "./context";
+import { getSessionUser, clearSession } from "./service";
+import type { AuthUser } from "@/shared/types/auth";
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+	const [user, setUser] = useState<AuthUser | null>(null);
+	const [isBootstrapping, setIsBootstrapping] = useState(true);
+
+	useEffect(() => {
+		getSessionUser()
+			.then(setUser)
+			.finally(() => setIsBootstrapping(false));
+	}, []);
+
+	async function signOut() {
+		await clearSession();
+		setUser(null);
+	}
+
+	return (
+		<AuthContext.Provider value={{ user, isBootstrapping, signOut }}>
+			{children}
+		</AuthContext.Provider>
+	);
+}
diff --git a/src/shared/auth/service.ts b/src/shared/auth/service.ts
@@ -0,0 +1,23 @@
+import { db } from "@/shared/db/client";
+import { sessions, users } from "@/shared/db/schema";
+import { eq } from "drizzle-orm";
+import type { AuthUser } from "@/shared/types/auth";
+
+export async function getSessionUser(): Promise<AuthUser | null> {
+	const [session] = await db.select().from(sessions).limit(1);
+	if (!session) return null;
+
+	const [user] = await db
+		.select()
+		.from(users)
+		.where(eq(users.id, Number(session.userId)))
+		.limit(1);
+
+	if (!user) return null;
+
+	return { id: user.id, email: user.email };
+}
+
+export async function clearSession(userId: number): Promise<void> {
+  await db.delete(sessions).where(eq(sessions.userId, String(userId)));
+}
diff --git a/src/shared/db/client.ts b/src/shared/db/client.ts
@@ -1,6 +1,6 @@
+import * as SQLite from "expo-sqlite";
 import { drizzle } from "drizzle-orm/expo-sqlite";
-import { openDatabaseSync } from "expo-sqlite";
+import * as schema from "./schema";
 
-const expoDb = openDatabaseSync("app.db");
-
-export const db = drizzle(expoDb);
+const sqlite = SQLite.openDatabaseSync("app.db");
+export const db = drizzle(sqlite, { schema });
diff --git a/src/shared/db/db-migration.tsx b/src/shared/db/db-migration.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { useSQLiteContext } from "expo-sqlite";
+import { drizzle } from "drizzle-orm/expo-sqlite";
+import { useMigrations } from "drizzle-orm/expo-sqlite/migrator";
+import { ActivityIndicator, View, Text } from "react-native";
+import migrations from "../../../drizzle/migrations";
+import * as schema from "./schema";
+
+export function MigrationGate({ children }: { children: React.ReactNode }) {
+	const sqlite = useSQLiteContext();
+	const db = drizzle(sqlite, { schema });
+	const { success, error } = useMigrations(db, migrations);
+
+	if (error) {
+		return (
+			<View className="flex-1 justify-center items-center">
+				<Text className="text-red-500">Migration error: {error.message}</Text>
+			</View>
+		);
+	}
+
+	if (!success) {
+		return (
+			<View className="flex-1 justify-center items-center">
+				<ActivityIndicator size="large" color="#0000ff" />
+			</View>
+		);
+	}
+
+	return <>{children}</>;
+}
diff --git a/src/shared/db/index.ts b/src/shared/db/index.ts
@@ -0,0 +1,3 @@
+export { DbProvider } from "./provider";
+export { db } from "./client";
+export * as schema from "./schema";
diff --git a/src/shared/db/provider.tsx b/src/shared/db/provider.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { SQLiteProvider } from "expo-sqlite";
+import { MigrationGate } from "./db-migration";
+
+export function DbProvider({ children }: { children: React.ReactNode }) {
+	return (
+		<SQLiteProvider databaseName="app.db" useSuspense>
+			<MigrationGate>{children}</MigrationGate>
+		</SQLiteProvider>
+	);
+}
diff --git a/src/shared/db/schema.ts b/src/shared/db/schema.ts
@@ -1,27 +1,27 @@
 import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";
 
 export const users = sqliteTable("users", {
-	id: text("id").primaryKey().notNull(),
+	id: integer("id").primaryKey().notNull(),
 	email: text("email").notNull().unique(),
 	passwordHash: text("password_hash").notNull(),
 	createdAt: integer("created_at").notNull(),
 });
 
 export const sessions = sqliteTable("sessions", {
-	id: text("id").primaryKey().notNull(),
+	id: integer("id").primaryKey().notNull(),
 	userId: text("user_id").notNull(),
 	createdAt: integer("created_at").notNull(),
 });
 
 export const passwordResets = sqliteTable("password_resets", {
-	id: text("id").primaryKey().notNull(),
+	id: integer("id").primaryKey().notNull(),
 	email: text("email").notNull(),
 	code: text("code").notNull(),
 	expiresAt: integer("expires_at").notNull(),
 });
 
 export const items = sqliteTable("items", {
-	id: text("id").primaryKey().notNull(),
+	id: integer("id").primaryKey().notNull(),
 	title: text("title").notNull(),
 	createdAt: integer("created_at").notNull(),
 	updatedAt: integer("updated_at").notNull(),
diff --git a/src/shared/hooks/useAuth.ts b/src/shared/hooks/useAuth.ts
diff --git a/src/shared/providers/auth-provider.tsx b/src/shared/providers/auth-provider.tsx
diff --git a/src/shared/providers/db-gate.tsx b/src/shared/providers/db-gate.tsx
diff --git a/src/shared/types/auth.ts b/src/shared/types/auth.ts

Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,8 @@`
`5`	`5`	`{`
`6`	`6`	`"idx": 0,`
`7`	`7`	`"version": "6",`
`8`		`- "when": 1772230312846,`
`9`		`- "tag": "0000_rich_echo",`
	`8`	`+ "when": 1772274776298,`
	`9`	`+ "tag": "0000_wet_zemo",`
`10`	`10`	`"breakpoints": true`
`11`	`11`	`}`
`12`	`12`	`]`