Ofertas de HOY con Next.js 16 + React 19 — Server Actions sin APIs

# Requisito: Node 18.18+ o 20+
node -v

# Crear app con App Router + TS + Tailwind y alias "@/*"
pnpm dlx create-next-app@latest ofertas-hoy `
  --ts --app --src-dir --tailwind --eslint `
  --import-alias "@/*"

cd ofertas-hoy

# Asegurar versiones (Next 16 + React 19)
pnpm add -E next@16.0.1 react@19.2.0 react-dom@19.2.0

src/
  app/
    favicon.ico
    globals.css
    layout.tsx
    page.tsx
  components/
    OfferForm.tsx
    OfferList.tsx
  data/
    data.json
    lastDeleted.json
    rl.json

// src/app/page.tsx
export const runtime = "nodejs";
export const dynamic = "force-dynamic";

import path from "node:path";
import fs from "node:fs/promises";
import { cookies, headers } from "next/headers";
import { revalidatePath } from "next/cache";
import OfferForm from "@/components/OfferForm";
import OfferList from "@/components/OfferList";

// Toggle global: desactiva el banner de “Deshacer” en la UI
const SHOW_UNDO_BANNER = false;

// ===== Tipos =====
export type Offer = {
  id: string;
  title: string;
  price: number;
  createdAt: string; // ISO
};

export type CreateState = {
  ok?: boolean;
  message?: string;
  errors?: { title?: string; price?: string };
  rateLimitResetSec?: number;
};

// ===== Paths (persistencia simple en archivos) =====
const DB_DIR = path.join(process.cwd(), "src", "data");
const DB_PATH = path.join(DB_DIR, "data.json");
const RL_PATH = path.join(DB_DIR, "rl.json");
const UNDO_PATH = path.join(DB_DIR, "lastDeleted.json");

// ===== Utilidades de archivo =====
async function ensureDB() {
  await fs.mkdir(DB_DIR, { recursive: true });
  for (const [p, init] of [
    [DB_PATH, { offers: [] }],
    [RL_PATH, {}],
    [UNDO_PATH, {}],
  ] as const) {
    try {
      await fs.access(p);
    } catch {
      await fs.writeFile(p, JSON.stringify(init, null, 2), "utf8");
    }
  }
}

async function readJSON<T>(p: string, fallback: T): Promise<T> {
  await ensureDB();
  try {
    const raw = await fs.readFile(p, "utf8");
    return (raw?.trim() ? JSON.parse(raw) : fallback) as T;
  } catch {
    return fallback;
  }
}

async function writeJSON<T>(p: string, v: T) {
  await ensureDB();
  await fs.writeFile(p, JSON.stringify(v, null, 2), "utf8");
}

// ===== Ofertas =====
async function readOffers(): Promise<Offer[]> {
  const data = await readJSON<{ offers: Offer[] }>(DB_PATH, { offers: [] });
  return Array.isArray(data.offers) ? data.offers : [];
}

async function writeOffers(offers: Offer[]) {
  await writeJSON(DB_PATH, { offers });
}

function ymdBogota(d: Date) {
  const fmt = new Intl.DateTimeFormat("en-CA", {
    timeZone: "America/Bogota",
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
  return fmt.format(d);
}

async function getOffersToday(): Promise<Offer[]> {
  const all = await readOffers();
  const today = ymdBogota(new Date());
  return all
    .filter((o) => ymdBogota(new Date(o.createdAt)) === today)
    .sort((a, b) => +new Date(b.createdAt) - +new Date(a.createdAt));
}

// ===== “Deshacer” eliminación (buffer con TTL) =====
type UndoBuffer = { offer?: Offer; expiresAt?: number };

async function setUndo(offer: Offer, ttlSec = 60) {
  const expiresAt = Date.now() + ttlSec * 1000;
  await writeJSON<UndoBuffer>(UNDO_PATH, { offer, expiresAt });
}

async function getUndo(): Promise<UndoBuffer> {
  const buf = await readJSON<UndoBuffer>(UNDO_PATH, {});
  if (!buf.offer || !buf.expiresAt) return {};
  if (Date.now() > buf.expiresAt) {
    await writeJSON<UndoBuffer>(UNDO_PATH, {}); // expiró
    return {};
  }
  return buf;
}

async function clearUndo() {
  await writeJSON<UndoBuffer>(UNDO_PATH, {});
}

// ===== Rate limiting (cookie de sesión + fallback a headers) =====
type RLMap = Record<string, number[]>;

async function clientKey(): Promise<string> {
  // 1) Cookie de sesión (preferido)
  try {
    const c = await cookies(); // Next 16: APIs dinámicas son async
    let sid = c.get("sid")?.value;
    if (!sid) {
      sid = crypto.randomUUID();
      c.set("sid", sid, {
        httpOnly: true,
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
        path: "/",
        maxAge: 60 * 60 * 24 * 7,
      });
    }
    return `sid:${sid}`;
  } catch {
    // ignore
  }

  // 2) Fallback: headers async
  try {
    const h = await headers();
    const ip =
      h.get("x-forwarded-for") ??
      h.get("cf-connecting-ip") ??
      h.get("x-real-ip") ??
      "unknown";
    const ua = h.get("user-agent") ?? "ua";
    return `${ip}|${ua}`;
  } catch {
    // ignore
  }

  // 3) Último recurso
  return "anon";
}

async function rateLimitGuard(key: string, maxPerWindow = 5, windowSec = 60) {
  const now = Date.now();
  const map = await readJSON<RLMap>(RL_PATH, {});
  const arr = (map[key] ?? []).filter((t) => now - t < windowSec * 1000);
  if (arr.length >= maxPerWindow) {
    const oldest = arr[0];
    const resetMs = windowSec * 1000 - (now - oldest);
    const resetSec = Math.max(1, Math.ceil(resetMs / 1000));
    return { allowed: false, resetSec };
  }
  arr.push(now);
  map[key] = arr;
  await writeJSON<RLMap>(RL_PATH, map);
  return { allowed: true };
}

// ===== Sanitización =====
function sanitizeTitle(s: string) {
  return s.replace(/\s+/g, " ").trim().slice(0, 80);
}

function parseCOP(s: string) {
  // acepta “15.000”, “15000”, “15,000.50”, “15000,50”
  const norm = s.replace(/\s/g, "").replace(/\./g, "").replace(",", ".");
  const n = Number(norm);
  return Number.isFinite(n) ? n : NaN;
}

// ===== Server Actions =====
export async function createOfferAction(
  _prev: CreateState,
  formData: FormData
): Promise<CreateState> {
  "use server";

  const key = await clientKey();
  const gate = await rateLimitGuard(key, 5, 60); // 5 por minuto
  if (!gate.allowed) {
    return {
      message: "Demasiadas publicaciones. Intenta de nuevo en un momento.",
      rateLimitResetSec: gate.resetSec,
    };
  }

  let title = (formData.get("title") as string | null) ?? "";
  let priceRaw = (formData.get("price") as string | null) ?? "";

  title = sanitizeTitle(title);
  const priceNum = parseCOP(priceRaw);

  const errors: CreateState["errors"] = {};
  if (!title) errors.title = "El título es obligatorio.";
  if (!priceRaw || Number.isNaN(priceNum) || priceNum <= 0) {
    errors.price = "El precio debe ser un número positivo.";
  }

  if (errors.title || errors.price) {
    return { message: "Corrige los campos marcados.", errors };
  }

  const offer: Offer = {
    id: crypto.randomUUID(),
    title,
    price: Math.round(priceNum), // normaliza a entero COP
    createdAt: new Date().toISOString(),
  };

  const current = await readOffers();
  current.push(offer);
  await writeOffers(current);
  revalidatePath("/");
  return { ok: true };
}

// Eliminar: guarda lastDeleted.json PERO marca cookie para no mostrar banner
export async function deleteOfferAction(formData: FormData) {
  "use server";
  const id = (formData.get("id") as string | null) ?? "";
  if (!id) return { ok: false };

  const current = await readOffers();
  const victim = current.find((o) => o.id === id);
  const next = current.filter((o) => o.id !== id);

  await writeOffers(next);

  if (victim) {
    // 1) Guardar buffer de deshacer (auditoría / log) por 60s
    await setUndo(victim, 60);

    // 2) Marcar en cookie que ESTE cliente ya “vio” este borrado
    try {
      const c = await cookies();
      c.set("undo_seen", victim.id, {
        httpOnly: true,
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
        path: "/",
        maxAge: 60, // dura 60s (igual a TTL del buffer)
      });
    } catch {
      // ignore en dev si cookies no disponibles
    }
  }

  revalidatePath("/");
  return { ok: true };
}

// (opcional) Deshacer si algún día reactivas el banner
export async function undoDeleteOfferAction() {
  "use server";
  const buf = await getUndo();
  if (!buf.offer) return { ok: false };

  const offers = await readOffers();
  if (!offers.some((o) => o.id === buf.offer!.id)) {
    offers.push(buf.offer!);
    await writeOffers(offers);
  }
  await clearUndo();
  revalidatePath("/");
  return { ok: true };
}

// ===== Página =====
export default async function Home() {
  const offers = await getOffersToday();

  // Cálculo del banner (respetando cookie y flag)
  const undo = await getUndo();
  const c = await cookies();
  const seenId = c.get("undo_seen")?.value;
  const undoAvailable =
    SHOW_UNDO_BANNER &&
    Boolean(undo.offer && undo.expiresAt && Date.now() < (undo.expiresAt as number)) &&
    undo.offer!.id !== seenId;

  return (
    <main className="mx-auto max-w-2xl p-6 space-y-8">
      <header className="space-y-2">
        <h1 className="text-2xl font-semibold tracking-tight">Ofertas de HOY</h1>
        <p className="text-sm text-neutral-500">
          Publica una oferta rápida. Datos persistidos en{" "}
          <code>src/data/data.json</code> (solo dev).
        </p>
      </header>

      {/* Banner Deshacer: desactivado por SHOW_UNDO_BANNER */}
      {undoAvailable && (
        <form
          action={undoDeleteOfferAction}
          className="flex items-center justify-between rounded-xl border bg-amber-50 px-4 py-3 text-sm"
        >
          <span>
            Oferta eliminada: <strong>{undo.offer!.title}</strong>. ¿Deshacer?
          </span>
          <button
            type="submit"
            className="rounded-lg border px-3 py-1 hover:bg-amber-100"
            title="Reinsertar la última oferta eliminada (válido ~60s)"
          >
            Deshacer
          </button>
        </form>
      )}

      <section className="rounded-2xl border p-4 shadow-sm">
        <h2 className="mb-3 text-lg font-medium">Nueva oferta</h2>
        <OfferForm action={createOfferAction} />
      </section>

      <section className="space-y-3">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-medium">Publicadas hoy</h2>
          <span className="text-sm text-neutral-500">{offers.length} en total</span>
        </div>
        <OfferList offers={offers} deleteAction={deleteOfferAction} />
      </section>
    </main>
  );
}

"use client";

import { useEffect, useRef } from "react";
import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import type { CreateState } from "@/app/page";

type Props = {
  action: (state: CreateState, formData: FormData) => Promise<CreateState>;
};

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="inline-flex items-center rounded-xl bg-black px-4 py-2 text-white disabled:opacity-60"
    >
      {pending ? "Publicando…" : "Publicar oferta"}
    </button>
  );
}

export default function OfferForm({ action }: Props) {
  const [state, formAction] = useActionState<CreateState, FormData>(action, {});
  const formRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    if (state?.ok) formRef.current?.reset();
  }, [state?.ok]);

  return (
    <form ref={formRef} action={formAction} className="space-y-3">
      <div>
        <label htmlFor="title" className="block text-sm font-medium">
          Título de la oferta
        </label>
        <input
          id="title"
          name="title"
          type="text"
          placeholder="Ej: Almuerzo ejecutivo"
          className="mt-1 w-full rounded-xl border px-3 py-2 outline-none focus:ring"
          aria-invalid={Boolean(state?.errors?.title) || undefined}
          aria-errormessage="title-error"
          required
          maxLength={80}
        />
        {state?.errors?.title && (
          <p id="title-error" className="mt-1 text-sm text-red-600">
            {state.errors.title}
          </p>
        )}
      </div>

      <div>
        <label htmlFor="price" className="block text-sm font-medium">
          Precio (COP)
        </label>
        <input
          id="price"
          name="price"
          type="text"
          inputMode="decimal"
          placeholder="Ej: 15.000"
          className="mt-1 w-full rounded-xl border px-3 py-2 outline-none focus:ring"
          aria-invalid={Boolean(state?.errors?.price) || undefined}
          aria-errormessage="price-error"
          required
        />
        {state?.errors?.price && (
          <p id="price-error" className="mt-1 text-sm text-red-600">
            {state.errors.price}
          </p>
        )}
      </div>

      {state?.message && !state?.ok && (
        <p className="text-sm text-red-600">
          {state.message}
          {typeof state.rateLimitResetSec === "number" &&
            ` (espera ~${state.rateLimitResetSec}s)`}
        </p>
      )}

      {state?.ok && <p className="text-sm text-green-600">¡Oferta publicada!</p>}

      <SubmitButton />
    </form>
  );
}

"use client";

import { useMemo } from "react";
import { useFormStatus } from "react-dom";
import type { Offer } from "@/app/page";

type Props = {
  offers: Offer[];
  deleteAction: (formData: FormData) => Promise<{ ok?: boolean }>;
};

function DeleteButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="rounded-lg border px-3 py-1 text-sm hover:bg-neutral-50 disabled:opacity-60"
    >
      {pending ? "Eliminando…" : "Eliminar"}
    </button>
  );
}

export default function OfferList({ offers, deleteAction }: Props) {
  const cop = useMemo(
    () =>
      new Intl.NumberFormat("es-CO", {
        style: "currency",
        currency: "COP",
        maximumFractionDigits: 0,
      }),
    []
  );

  if (offers.length === 0) {
    return (
      <div className="rounded-2xl border p-4 text-sm text-neutral-500">
        Aún no hay ofertas publicadas hoy.
      </div>
    );
  }

  return (
    <ul className="space-y-3">
      {offers.map((o) => (
        <li
          key={o.id}
          className="flex items-center justify-between rounded-2xl border p-4"
        >
          <div>
            <div className="font-medium">{o.title}</div>
            <div className="text-sm text-neutral-500">{cop.format(o.price)}</div>
          </div>
          <form action={deleteAction}>
            <input type="hidden" name="id" value={o.id} />
            <DeleteButton />
          </form>
        </li>
      ))}
    </ul>
  );
}

import type { Metadata } from "next";
import "./globals.css";


export const metadata: Metadata = {
title: "Ofertas de HOY",
description: "Demo Next.js Server Actions con persistencia local en JSON",
};


export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}