Dependency Injection in RN

// src/shared/di/AppServicesContext.tsx
import { createContext, useContext, type ReactNode } from "react";
import { createApiClient } from "@/shared/api/createApiClient";
import { createOrdersApi, type OrdersApi } from "@/features/orders/api/ordersApi";
import { getAppConfig } from "@/shared/config/env";
 
export type AppServices = {
  ordersApi: OrdersApi;
};
 
const AppServicesContext = createContext<AppServices | null>(null);
 
export function AppServicesProvider({ children, overrides }: { children: ReactNode; overrides?: Partial<AppServices> }) {
  const client = createApiClient(getAppConfig().apiBaseUrl);
  const value: AppServices = {
    ordersApi: overrides?.ordersApi ?? createOrdersApi(client),
  };
  return <AppServicesContext.Provider value={value}>{children}</AppServicesContext.Provider>;
}
 
export function useAppServices(): AppServices {
  const ctx = useContext(AppServicesContext);
  if (!ctx) throw new Error("AppServicesProvider missing - wrap app/_layout.tsx");
  return ctx;
}

// app/_layout.tsx (excerpt) - composition root
import { Stack } from "expo-router";
import { AppServicesProvider } from "@/shared/di/AppServicesContext";
 
export default function RootLayout() {
  return (
    <AppServicesProvider>
      <Stack />
    </AppServicesProvider>
  );
}

// src/shared/api/createApiClient.ts
export type ApiClient = {
  get<T>(path: string): Promise<T>;
};
 
export function createApiClient(baseUrl: string): ApiClient {
  return {
    async get<T>(path: string) {
      const response = await fetch(`${baseUrl}${path}`);
      if (!response.ok) throw new Error(`GET ${path} failed`);
      return response.json() as Promise<T>;
    },
  };
}

// src/features/orders/api/ordersApi.ts
import type { Order } from "@/entities/order";
import type { ApiClient } from "@/shared/api/createApiClient";
 
export type OrdersApi = {
  list(): Promise<Order[]>;
};
 
export function createOrdersApi(client: ApiClient): OrdersApi {
  return {
    list: () => client.get<Order[]>("/orders"),
  };
}

// src/features/orders/model/useOrders.ts
import { useCallback, useEffect, useState } from "react";
import type { Order } from "@/entities/order";
import { useAppServices } from "@/shared/di/AppServicesContext";
 
export function useOrders() {
  const { ordersApi } = useAppServices();
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
 
  const refresh = useCallback(async () => {
    try {
      setError(null);
      setOrders(await ordersApi.list());
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to load");
    } finally {
      setLoading(false);
    }
  }, [ordersApi]);
 
  useEffect(() => {
    refresh();
  }, [refresh]);
 
  return { orders, loading, error, refresh };
}

// src/features/orders/model/useOrders.test.tsx
import { renderHook, waitFor } from "@testing-library/react-native";
import type { ReactNode } from "react";
import { AppServicesProvider } from "@/shared/di/AppServicesContext";
import type { OrdersApi } from "../api/ordersApi";
import { useOrders } from "./useOrders";
 
const mockOrdersApi: OrdersApi = {
  list: jest.fn(() =>
    Promise.resolve([{ id: "1", title: "Test", totalCents: 100, status: "pending", placedAt: "" }])
  ),
};
 
function wrapper({ children }: { children: ReactNode }) {
  return <AppServicesProvider overrides={{ ordersApi: mockOrdersApi }}>{children}</AppServicesProvider>;
}
 
it("loads orders from injected api", async () => {
  const { result } = renderHook(() => useOrders(), { wrapper });
  await waitFor(() => expect(result.current.loading).toBe(false));
  expect(mockOrdersApi.list).toHaveBeenCalled();
  expect(result.current.orders).toHaveLength(1);
});

// ❌ Hidden global - hard to test, hard to swap per variant
export const ordersApi = createOrdersApi(createApiClient(getAppConfig().apiBaseUrl));

// ✅ Explicit wiring at composition root
const client = createApiClient(getAppConfig().apiBaseUrl);
const ordersApi = createOrdersApi(client);

// useSignIn hook - inject ports from context or factories
export function createSignInRunner(services: AppServices) {
  return (email: string, password: string) =>
    signIn(
      {
        authGateway: services.authGateway,
        tokenStorage: services.tokenStorage,
        createSession: services.createSession,
      },
      { email, password }
    );
}

// Narrow AppServices as the app grows - split contexts if needed
export type AppServices = {
  ordersApi: OrdersApi;
  authGateway: AuthGateway;
  tokenStorage: TokenStorage;
  analytics: AnalyticsPort;
};
 
// Feature-specific context avoids god provider
export const CheckoutServicesContext = createContext<CheckoutServices | null>(null);