React nextjs

"use client";

import { useEffect, useState } from "react";

export function ProductDetail({ id }: { id: string }) {
  const [product, setProduct] = useState<Product | null>(null);

  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then((res) => res.json())
      .then(setProduct);
  }, [id]);

  if (!product) return <Skeleton />;

  return <h1>{product.name}</h1>;
}

import { productRepository } from "@/lib/repositories/product";
import { NotFound } from "@/components/ui/NotFound";

interface ProductDetailProps {
  id: string;
}

export async function ProductDetail({ id }: ProductDetailProps) {
  const product = await productRepository.findById(id);
  if (!product) return <NotFound entity="produto" />;

  return <h1>{product.name}</h1>;
}

export default async function OrderPage({ params }: { params: { id: string } }) {
  const order = await db.orders.findUnique({
    where: { id: params.id },
    include: { items: true, customer: true },
  });

  if (!order) return <div>Pedido não encontrado</div>;

  const total = order.items.reduce((sum, item) => sum + item.price * item.qty, 0);

  return (
    <div>
      {order.customer.name}: R$ {total}
    </div>
  );
}

// app/orders/[id]/page.tsx
import { orderRepository } from "@/lib/repositories/order";
import { OrderDetail } from "@/components/orders/OrderDetail";
import { NotFound } from "@/components/ui/NotFound";

interface OrderPageProps {
  params: Promise<{ id: string }>;
}

export default async function OrderPage({ params }: OrderPageProps) {
  const { id } = await params;
  const order = await orderRepository.findWithDetails(id);
  if (!order) return <NotFound entity="pedido" />;

  return <OrderDetail order={order} />;
}

export function OrderCard({
  id,
  status,
  total,
  customerName,
}: {
  id: string;
  status: OrderStatus;
  total: number;
  customerName: string;
}) {
  return (
    <div>
      {customerName}: {total}
    </div>
  );
}

interface OrderCardProps {
  id: string;
  status: OrderStatus;
  total: number;
  customerName: string;
}

export function OrderCard({ id, status, total, customerName }: OrderCardProps) {
  return (
    <div>
      {customerName}: {total}
    </div>
  );
}

"use client";

export function OrderList() {
  const [orders, setOrders] = useState<Order[]>([]);

  useEffect(() => {
    fetch("/api/orders")
      .then((res) => res.json())
      .then(setOrders);
  }, []);

  return (
    <ul>
      {orders.map((o) => (
        <li key={o.id}>{o.id}</li>
      ))}
    </ul>
  );
}

// lib/services/order.ts
import { apiClient } from "@/lib/api-client";
import type { OrderView } from "@/lib/types/views";

export async function listOrders(): Promise<OrderView[]> {
  const result = await apiClient.get<Order[]>("/orders");
  if (!result.success) return [];

  const orderViews = result.data.map(toOrderView);
  return orderViews;
}

// hooks/use-orders.ts
interface UseOrdersResult {
  orders: OrderView[];
  isLoading: boolean;
  error: string | null;
}

export function useOrders(): UseOrdersResult {
  const [orders, setOrders] = useState<OrderView[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    listOrders()
      .then(setOrders)
      .catch(() => setError("Não foi possível carregar os pedidos."))
      .finally(() => setIsLoading(false));
  }, []);

  const ordersResult = { orders, isLoading, error };
  return ordersResult;
}

// components/orders/OrderList.tsx
"use client";

export function OrderList() {
  const { orders, isLoading, error } = useOrders();

  if (isLoading) return <Skeleton />;
  if (error) return <ErrorMessage message={error} />;

  return (
    <ul>
      {orders.map((order) => (
        <li key={order.id}>{order.customerName}</li>
      ))}
    </ul>
  );
}

"use client";

export default function DashboardPage() {
  const { user } = useAuth();

  useEffect(() => {
    if (!user) router.push("/login");
  }, [user]);

  return <Dashboard />;
}

// proxy.ts
import { NextRequest, NextResponse } from "next/server";
import { verifySession } from "@/lib/auth/session";

export async function proxy(request: NextRequest): Promise<NextResponse> {
  const session = await verifySession(request);

  if (!session) {
    const loginUrl = new URL("/login", request.url);
    const redirectResponse = NextResponse.redirect(loginUrl);
    return redirectResponse;
  }

  const nextResponse = NextResponse.next();
  return nextResponse;
}

export const config = {
  matcher: ["/dashboard/:path*", "/orders/:path*"],
};

// app/actions/order.ts
"use server";

export async function createOrder(formData: FormData) {
  const productId = formData.get("productId") as string;
  const quantity = parseInt(formData.get("quantity") as string);

  if (!productId || quantity < 1) return { ok: false };

  await db.orders.create({ data: { productId, quantity } });

  return { ok: true };
}

// lib/schemas/order.ts
import { z } from "zod";

export const createOrderSchema = z.object({
  productId: z.string().uuid(),
  quantity: z.number().int().min(1),
});

export type CreateOrderInput = z.infer<typeof createOrderSchema>;

// app/actions/order.ts
"use server";

import { createOrderSchema } from "@/lib/schemas/order";
import { orderRepository } from "@/lib/repositories/order";

interface CreateOrderResult {
  ok: boolean;
  orderId?: string;
  fieldErrors?: Partial<Record<keyof CreateOrderInput, string[]>>;
  formError?: string;
}

export async function createOrder(
  _prev: CreateOrderResult | null,
  formData: FormData,
): Promise<CreateOrderResult> {
  const parsed = createOrderSchema.safeParse({
    productId: formData.get("productId"),
    quantity: Number(formData.get("quantity")),
  });

  if (!parsed.success) {
    const fieldErrors = parsed.error.flatten().fieldErrors;
    const failResult = { ok: false, fieldErrors };
    return failResult;
  }

  const order = await orderRepository.create(parsed.data);
  const orderResult = { ok: true, orderId: order.id };
  return orderResult;
}

// components/orders/CreateOrderForm.tsx
"use client";

import { useActionState } from "react";
import { createOrder } from "@/app/actions/order";

export function CreateOrderForm() {
  const [state, action, isPending] = useActionState(createOrder, null);

  return (
    <form action={action}>
      <fieldset disabled={isPending}>
        <input name="productId" type="text" aria-describedby="productId-error" />
        {state?.fieldErrors?.productId && (
          <span id="productId-error">{state.fieldErrors.productId[0]}</span>
        )}

        <input name="quantity" type="number" min="1" aria-describedby="quantity-error" />
        {state?.fieldErrors?.quantity && (
          <span id="quantity-error">{state.fieldErrors.quantity[0]}</span>
        )}

        {state?.formError && <p role="alert">{state.formError}</p>}

        <button type="submit">{isPending ? "Enviando..." : "Criar pedido"}</button>
      </fieldset>
    </form>
  );
}

// app/api/orders/route.ts
export async function POST(request: NextRequest) {
  const body = await request.json();

  if (!body.productId || !body.quantity) {
    return new Response("Invalid", { status: 400 });
  }

  const order = await db.orders.create({ data: body });

  return Response.json(order);
}

// app/api/orders/route.ts
import { NextRequest, NextResponse } from "next/server";
import { createOrderSchema } from "@/lib/schemas/order";
import { orderRepository } from "@/lib/repositories/order";

export async function GET(): Promise<NextResponse> {
  const orders = await orderRepository.listAll();
  const response = NextResponse.json(orders);
  return response;
}

export async function POST(request: NextRequest): Promise<NextResponse> {
  const body = await request.json();
  const parsed = createOrderSchema.safeParse(body);

  if (!parsed.success) {
    const fieldErrors = parsed.error.flatten().fieldErrors;
    const errorResponse = NextResponse.json({ fieldErrors }, { status: 422 });
    return errorResponse;
  }

  const order = await orderRepository.create(parsed.data);
  const createdResponse = NextResponse.json(order, { status: 201 });
  return createdResponse;
}

// app/api/webhooks/[provider]/route.ts
export async function POST(request: NextRequest) {
  const body = await request.json();
  const signature = request.headers.get("x-signature");

  const expected = createHmac("sha256", process.env.WEBHOOK_SECRET!)
    .update(JSON.stringify(body))
    .digest("hex");

  if (expected !== signature) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  await processWebhookPayload(body);

  return NextResponse.json({ ok: true });
}

// app/api/webhooks/[provider]/route.ts
import { NextRequest, NextResponse } from "next/server";
import { createHmac, timingSafeEqual } from "crypto";
import { webhookRepository } from "@/lib/repositories/webhook";
import { jobQueue } from "@/lib/queue";

export async function POST(request: NextRequest): Promise<NextResponse> {
  const rawBody = await request.text();
  const receivedSignature = request.headers.get("x-signature") ?? "";
  const eventId = request.headers.get("x-event-id") ?? "";

  const expectedSignature = createHmac("sha256", process.env.WEBHOOK_SECRET!)
    .update(rawBody)
    .digest("hex");

  const signaturesMatch =
    expectedSignature.length === receivedSignature.length &&
    timingSafeEqual(Buffer.from(expectedSignature), Buffer.from(receivedSignature));

  if (!signaturesMatch) {
    const unauthorizedResponse = NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    return unauthorizedResponse;
  }

  const alreadyReceived = await webhookRepository.findByEventId(eventId);

  if (alreadyReceived) {
    const duplicateResponse = NextResponse.json({ ok: true });
    return duplicateResponse;
  }

  await webhookRepository.save({ eventId, rawBody });
  await jobQueue.enqueue("webhook.process", { eventId });

  const acceptedResponse = NextResponse.json({ ok: true });
  return acceptedResponse;
}

// lib/queries/orders.ts
"use cache";

import { cacheLife, cacheTag } from "next/cache";
import { orderRepository } from "@/lib/repositories/order";

export async function getCachedOrders(): Promise<Order[]> {
  cacheLife("hours");
  cacheTag("orders");

  const orders = await orderRepository.listAll();
  return orders;
}

// app/actions/order.ts
"use server";

import { updateTag } from "next/cache";
import { createOrderSchema } from "@/lib/schemas/order";
import { orderRepository } from "@/lib/repositories/order";

export async function createOrder(
  _prev: CreateOrderResult | null,
  formData: FormData,
): Promise<CreateOrderResult> {
  const parsed = createOrderSchema.safeParse({
    productId: formData.get("productId"),
    quantity: Number(formData.get("quantity")),
  });

  if (!parsed.success) {
    const fieldErrors = parsed.error.flatten().fieldErrors;
    const failResult = { ok: false, fieldErrors };
    return failResult;
  }

  const order = await orderRepository.create(parsed.data);

  updateTag("orders");

  const orderResult = { ok: true, orderId: order.id };
  return orderResult;
}