testing app router
This commit is contained in:
parent
1ac2d4b3ab
commit
b9934cb390
6 changed files with 139 additions and 38 deletions
39
apps/infoalloggi/src/_app/layout.tsx
Normal file
39
apps/infoalloggi/src/_app/layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
20
apps/infoalloggi/src/_app/lib/annunci.ts
Normal file
20
apps/infoalloggi/src/_app/lib/annunci.ts
Normal 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 [];
|
||||
}
|
||||
}
|
||||
22
apps/infoalloggi/src/_app/testapp/page.tsx
Normal file
22
apps/infoalloggi/src/_app/testapp/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
19
apps/infoalloggi/src/_app/ui/annunci.tsx
Normal file
19
apps/infoalloggi/src/_app/ui/annunci.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
38
apps/infoalloggi/src/components/failed-loading.tsx
Normal file
38
apps/infoalloggi/src/components/failed-loading.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue