Files

amaliadwiy 6ffe599ad0 docs: pecah CLAUDE.md jadi file terpisah di docs/

Pindahkan konten architecture dan conventions ke docs/ARCHITECTURE.md
dan docs/CONVENTIONS.md, lalu referensikan via @path di CLAUDE.md
agar file tetap ramping.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-23 11:19:49 +08:00

2.2 KiB

Raw Blame History

Architecture

Routing (Expo Router — file-based)

app/index.tsx — Login/splash (public); OTP verification is handled inline via components/auth/viewVerification.tsx (not a separate route)
app/(application)/ — All authenticated screens; Expo Router enforces auth guard here
Deep-link navigation is handled by lib/pushToPage.ts, which maps notification payloads to routes

State Management (three layers)

Context (providers/) — Auth (token encryption/decryption via CryptoES.AES), Theme (light/dark, persisted to AsyncStorage), and React Query client
Redux Toolkit (lib/store.ts + slices) — Feature-level state for CRUD operations. Slices follow a naming pattern: *Slice.ts for read state, *Update.ts/*Create.ts for mutation state
TanStack React Query — All server data fetching; configured with 5-min stale time, 24-hour cache retention, 2 retries, and AsyncStorage persistence for offline support

API Layer (`lib/api.ts`)

Single file defining 50+ Axios-based endpoints. The Axios instance reads baseURL from Constants.expoConfig.extra.URL_API (set in .env via app.config.js). Authentication uses Bearer tokens in headers. File uploads use FormData with multipart/form-data.

Three separate backend services are integrated:

REST API (axios) — main business logic
WhatsApp server — OTP delivery (separate token in .env)
Firebase — real-time database (lib/firebaseDatabase.ts) and push notifications (lib/useNotification.ts, lib/registerForPushNotificationsAsync.ts)

Providers Initialization Order

app/_layout.tsx wraps the app in: ErrorBoundary → NotifierWrapper → ThemeProvider → QueryProvider → AuthProvider → navigation stack. Redux store is provided inside app/(application)/_layout.tsx, not at the root.

Error Boundary

components/ErrorBoundary.tsx is a class component (required by React) wrapping the entire app. It uses React Native's built-in Text — do not replace it with the custom components/Text.tsx as that pulls in ThemeProvider → AsyncStorage, which breaks Jest tests.

Tests for ErrorBoundary live in __tests__/ErrorBoundary-test.tsx and use @testing-library/react-native.

2.2 KiB Raw Blame History