Tipar Context Provider no React + TS 2026

import {
  createContext,
  useContext,
  useState,
  useCallback,
  ReactNode,
} from "react";

// 1. Interface do usuário
interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user";
}

// 2. Interface do contexto
interface AuthContextType {
  user: User | null;
  loading: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  isAuthenticated: boolean;
}

// 3. Criar context com undefined (sem valor fake)
const AuthContext = createContext<AuthContextType | undefined>(
  undefined
);

// 4. Provider
interface AuthProviderProps {
  children: ReactNode;
}

export function AuthProvider({ children }: AuthProviderProps) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(false);

  const login = useCallback(
    async (email: string, password: string) => {
      setLoading(true);
      try {
        const res = await fetch("/api/login", {
          method: "POST",
          body: JSON.stringify({ email, password }),
        });
        const data: User = await res.json();
        setUser(data);
      } finally {
        setLoading(false);
      }
    },
    []
  );

  const logout = useCallback(() => {
    setUser(null);
  }, []);

  return (
    <AuthContext.Provider
      value={{
        user,
        loading,
        login,
        logout,
        isAuthenticated: user !== null,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
}

// 5. Hook customizado (a estrela do padrão)
export function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth deve ser usado dentro de AuthProvider");
  }
  return context;
}

// State tipado
interface CartState {
  items: CartItem[];
  total: number;
}

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

// Actions com discriminated union
type CartAction =
  | { type: "ADD_ITEM"; payload: CartItem }
  | { type: "REMOVE_ITEM"; payload: { id: string } }
  | { type: "UPDATE_QUANTITY"; payload: { id: string; quantity: number } }
  | { type: "CLEAR_CART" };

// Reducer tipado
function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case "ADD_ITEM":
      return {
        ...state,
        items: [...state.items, action.payload],
        total: state.total + action.payload.price,
      };
    case "REMOVE_ITEM":
      return {
        ...state,
        items: state.items.filter((i) => i.id !== action.payload.id),
      };
    case "CLEAR_CART":
      return { items: [], total: 0 };
    default:
      return state;
  }
}

// Context com dispatch tipado
interface CartContextType {
  state: CartState;
  dispatch: React.Dispatch<CartAction>;
}

const CartContext = createContext<CartContextType | undefined>(
  undefined
);

export function CartProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, {
    items: [],
    total: 0,
  });

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

export function useCart(): CartContextType {
  const context = useContext(CartContext);
  if (!context) throw new Error("useCart fora do CartProvider");
  return context;
}

// Uso:
const { state, dispatch } = useCart();
dispatch({ type: "ADD_ITEM", payload: item });
// TypeScript garante que payload casa com o type

function createSafeContext<T>(name: string) {
  const Context = createContext<T | undefined>(undefined);

  function useContextSafe(): T {
    const value = useContext(Context);
    if (value === undefined) {
      throw new Error(
        `use${name} deve ser usado dentro de ${name}Provider`
      );
    }
    return value;
  }

  return [Context.Provider, useContextSafe] as const;
}

// Uso:
const [ThemeProvider, useTheme] =
  createSafeContext<ThemeContextType>("Theme");

const [NotificationProvider, useNotification] =
  createSafeContext<NotificationContextType>("Notification");