amaliadwiy
6ffe599ad0
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>
33 lines
2.2 KiB
Markdown
33 lines
2.2 KiB
Markdown
# 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)
|
|
|
|
1. **Context** (`providers/`) — Auth (token encryption/decryption via CryptoES.AES), Theme (light/dark, persisted to AsyncStorage), and React Query client
|
|
2. **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
|
|
3. **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`.
|