testing app router

This commit is contained in:
Marco Pedone 2025-08-22 15:44:18 +02:00
parent 1ac2d4b3ab
commit b9934cb390
6 changed files with 139 additions and 38 deletions

View file

@ -0,0 +1,39 @@
import type { Metadata } from "next";
import "~/styles/globals.css";
export const metadata: Metadata = {
title: "Home",
description: "Welcome to Next.js",
icons: {
apple: {
url: "/favicon/apple-touch-icon.png",
sizes: "180x180",
type: "image/png",
},
icon: [
{ url: "/favicon/favicon-32x32.png", sizes: "32x32", type: "image/png" },
{ url: "/favicon/favicon-16x16.png", sizes: "16x16", type: "image/png" },
],
other: [
{
rel: "mask-icon",
url: "/favicon/safari-pinned-tab.svg",
color: "#5bbad5",
},
],
},
manifest: "/site.webmanifest",
};
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

View file

@ -0,0 +1,20 @@
import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
import { db } from "~/server/db";
export async function getDataFromDB() {
try {
// Example query - adjust to your database schema
const data = await db
.selectFrom("annunci")
.select("codice")
.where("web", "=", true)
.where("tipo", "=", TipologiaPosizioneEnum.Transitorio)
.where("stato", "=", "Attivo")
.execute();
return data;
} catch (error) {
console.error("Database error:", error);
return [];
}
}

View file

@ -0,0 +1,22 @@
import { Suspense } from "react";
import Annunci from "~/app/ui/annunci";
import { getDataFromDB } from "~/app/lib/annunci";
import { LoadingPage } from "~/components/loading";
export default function TestAppPage() {
const annunci = getDataFromDB();
return (
<div className="p-8">
<h1 className="mb-4 text-2xl font-bold">Test App Page</h1>
<div className="rounded-lg border bg-gray-50 p-4">
<h2 className="mb-2 text-lg font-semibold">Data from Database:</h2>
<Suspense fallback={<LoadingPage />}>
<Annunci annunci={annunci} />
</Suspense>
</div>
</div>
);
}

View file

@ -0,0 +1,19 @@
"use client";
import { use } from "react";
import type { Annunci } from "~/schemas/public/Annunci";
type AnnunciProps = {
annunci: Promise<Pick<Annunci, "codice">[]>;
};
export default function Annunci({ annunci }: AnnunciProps) {
const allAnnunci = use(annunci);
return (
<ul>
{allAnnunci.map((ann, i) => (
<li key={i}>{ann.codice}</li>
))}
</ul>
);
}

View file

@ -0,0 +1,38 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "~/providers/I18nProvider";
import { HomeIcon } from "~/components/IconComponents";
export default function FailedAnnuncioLoading() {
const router = useRouter();
const { t } = useTranslation();
return (
<main>
<div className="mx-auto flex h-screen max-w-screen-xl items-center justify-start px-4 md:px-8">
<div className="mx-auto max-w-lg space-y-3 text-center">
<HomeIcon className="mx-auto size-20 text-rose-700" />
<h3 className="text-accent-foreground text-4xl font-semibold sm:text-5xl">
{t.annuncio_load_fail.titolo}
</h3>
<p className="text-neutral-600">{t.annuncio_load_fail.sottotitolo}</p>
<div className="flex flex-wrap items-center justify-center gap-3">
<button
onClick={() => {
router.back();
}}
className="block rounded-lg bg-rose-600 px-4 py-2 font-medium text-white duration-150 hover:bg-rose-500 active:bg-rose-700"
>
{t.annuncio_load_fail.CTA}
</button>
<Link
href="/annunci"
className="block rounded-lg border px-4 py-2 font-medium text-neutral-700 duration-150 hover:bg-neutral-50 active:bg-neutral-100"
>
{t.annuncio_load_fail.home}
</Link>
</div>
</div>
</div>
</main>
);
}

View file

@ -1,7 +1,4 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "~/providers/I18nProvider";
import { HomeIcon } from "~/components/IconComponents";
"use client";
import { ASvg } from "~/components/svgs";
export const LoadingPage = () => {
@ -12,37 +9,3 @@ export const LoadingPage = () => {
</div>
);
};
export default function FailedAnnuncioLoading() {
const router = useRouter();
const { t } = useTranslation();
return (
<main>
<div className="mx-auto flex h-screen max-w-screen-xl items-center justify-start px-4 md:px-8">
<div className="mx-auto max-w-lg space-y-3 text-center">
<HomeIcon className="mx-auto size-20 text-rose-700" />
<h3 className="text-accent-foreground text-4xl font-semibold sm:text-5xl">
{t.annuncio_load_fail.titolo}
</h3>
<p className="text-neutral-600">{t.annuncio_load_fail.sottotitolo}</p>
<div className="flex flex-wrap items-center justify-center gap-3">
<button
onClick={() => {
router.back();
}}
className="block rounded-lg bg-rose-600 px-4 py-2 font-medium text-white duration-150 hover:bg-rose-500 active:bg-rose-700"
>
{t.annuncio_load_fail.CTA}
</button>
<Link
href="/annunci"
className="block rounded-lg border px-4 py-2 font-medium text-neutral-700 duration-150 hover:bg-neutral-50 active:bg-neutral-100"
>
{t.annuncio_load_fail.home}
</Link>
</div>
</div>
</div>
</main>
);
}