infoalloggi-monorepo/apps/infoalloggi/src/pages/annunci.tsx

import { keepPreviousData } from "@tanstack/react-query";
import {
	ChevronDown,
	ChevronRight,
	ChevronsRight,
	ChevronUp,
	Filter,
	FilterX,
	MapIcon,
	RotateCcwIcon,
	Table,
} from "lucide-react";
import type { GetServerSideProps } from "next";
import Head from "next/head";
import { useEffect, useMemo, useState } from "react";
import { AccordionComp } from "~/components/accordionComp";
import { AnnunciGrid } from "~/components/annunci_grid";
import { MapSection } from "~/components/annunci_map";
import { CTA_TipologiaModal } from "~/components/annunci_tutorial";
import { CodiceBox } from "~/components/codiceRicerca";
import { LoadingPage } from "~/components/loading";
import { Status500 } from "~/components/status-page";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { Label } from "~/components/ui/label";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "~/components/ui/select";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import {
	type AnnunciOptions,
	RicercaProvider,
	type SortTypes,
	useRicerca,
} from "~/providers/RicercaProvider";
import { generateSSGHelper } from "~/server/utils/ssgHelper";
import { api } from "~/utils/api";

type AnnunciPageProps = {
	options: AnnunciOptions;
};

const Annunci = ({ options }: AnnunciPageProps) => {
	const { t } = useTranslation();

	return (
		<RicercaProvider options={options}>
			<Head>
				<title>{t.heads.annunci_titolo}</title>
				<meta content={t.heads.annunci_description} name="description" />
			</Head>

			<main className="mx-auto w-full max-w-7xl space-y-5 bg-background2 px-2 py-5 md:px-8">
				<div className="inline-block rounded-md bg-primary/10 px-3 py-1 text-primary text-sm">
					{t.annunci.titolo}
				</div>

				<Ricerca />
				<AccordionComp
					className="max-w-6xl px-4 py-4 md:py-8"
					texts={t.annunci.accordion_minifaq}
				/>
			</main>
		</RicercaProvider>
	);
};

export default Annunci;

export const getServerSideProps = (async () => {
	const helper = generateSSGHelper();
	const options = await helper.annunci.getAnnunciOptions.fetch();
	return {
		props: {
			options,
		},
	};
}) satisfies GetServerSideProps<AnnunciPageProps>;

const Ricerca = () => {
	const { map, page } = useRicerca();
	useEffect(() => {
		window.scrollTo({ behavior: "smooth", top: 0 });
	}, [page]);

	return (
		<>
			<RicercaFilters />
			<br />
			{map ? <MapSection /> : <AnnunciList />}
		</>
	);
};

const RicercaFilters = () => {
	const { t } = useTranslation();
	const {
		map,
		setMap,
		tipo,
		setTipo,
		comune,
		setComune,
		consegna,
		setConsegna,
		sort,
		setSort,
		comuniOptions,
		tipologieOptions,
		consegnaOptions,
		ResetParams,
		nFiltri,
	} = useRicerca();
	const [open, setOpen] = useState(false);

	const mappedConsegnaOptions = useMemo(
		// biome-ignore lint/style/noNonNullAssertion: <known lenght>
		() => consegnaOptions.map((m) => t.preferenze.mesi[m]!).filter(Boolean),
		[consegnaOptions, t.preferenze.mesi],
	);

	return (
		<div className="mx-auto w-full max-w-7xl space-y-5">
			<div className="flex w-full flex-col-reverse gap-4 sm:flex-row sm:gap-2">
				<div className="flex w-full gap-2 sm:w-auto">
					<div className="flex w-full sm:w-auto">
						<DropdownMenu onOpenChange={setOpen} open={open}>
							<DropdownMenuTrigger asChild>
								<Button
									className="group flex w-full flex-row gap-2 sm:w-auto"
									variant="default"
								>
									<Badge className="w-fit rounded-md bg-secondary px-1.5 py-0.5 text-secondary-foreground dark:group-hover:bg-transparent">
										{nFiltri}
									</Badge>
									<Filter className="size-5" />{" "}
									{nFiltri === 1
										? t.annunci.filtro_attivo
										: t.annunci.filtri_attivi}
									{open ? <ChevronUp /> : <ChevronDown />}
								</Button>
							</DropdownMenuTrigger>
							<DropdownMenuContent
								align="start"
								className="flex w-60 max-w-3xl flex-col gap-2 p-4"
							>
								<SelectFilter
									defaultValue={tipo}
									handleReset={async () => {
										await setTipo("");
									}}
									label={t.annunci.fs_tipologia.titolo}
									onValueChange={async (value: string) => {
										await setTipo(value);
									}}
									options={tipologieOptions}
									placeholder={t.seleziona_placeholder}
									value={tipo}
								/>
								<SelectFilter
									defaultValue={comune}
									handleReset={async () => {
										await setComune(null);
									}}
									label={t.annunci.comune}
									onValueChange={async (value: string) => {
										await setComune(value);
									}}
									options={comuniOptions}
									placeholder={t.seleziona_placeholder}
									value={comune}
								/>
								<SelectFilter
									defaultValue={
										consegna ? t.preferenze.mesi[consegna] || "" : ""
									}
									handleReset={async () => {
										await setConsegna(null);
									}}
									label={t.annunci.consegna}
									onValueChange={async (value: string) => {
										if (value === "") {
											await setConsegna(null);
											return;
										}
										if (t.preferenze.mesi.includes(value)) {
											await setConsegna(t.preferenze.mesi.indexOf(value));
											return;
										}
										console.warn("Value not found in preferenze.mesi");
										await setConsegna(null);
									}}
									options={mappedConsegnaOptions}
									placeholder={t.seleziona_placeholder}
									value={consegna ? t.preferenze.mesi[consegna] || "" : ""}
								/>
								<SelectFilter
									defaultValue={sort}
									handleReset={async () => {
										await setSort("");
									}}
									label={t.ordina_per}
									onValueChange={async (value: SortTypes) => {
										await setSort(value);
									}}
									options={["Recenti", "Prezzo", "Consegna", "Mq"]}
									placeholder={t.seleziona_placeholder}
									value={sort}
								/>
								<Button
									className="flex flex-row gap-2"
									disabled={nFiltri === 0}
									onClick={ResetParams}
									variant="destructive"
								>
									<FilterX className="size-5" /> {t.annunci.filtri_reset}
								</Button>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>
					<Button
						className="flex w-fit flex-row gap-2"
						onClick={async () => {
							await setMap((v) => !v);
						}}
						variant="default"
					>
						{!map ? (
							<>
								<MapIcon className="size-5" />{" "}
								<span className="hidden sm:block">Mappa</span>
							</>
						) : (
							<>
								<Table className="size-5" />
								<span className="hidden sm:block">Lista</span>
							</>
						)}
					</Button>
				</div>
				<div className="flex w-full items-center justify-between gap-2 sm:justify-between">
					<div className="relative z-35 flex w-full gap-1 sm:w-auto">
						<CodiceBox
							className="h-10 w-full"
							inputId="annunci-search"
							optionBoxClassName="top-11 "
						/>
					</div>

					<CTA_TipologiaModal />
				</div>
			</div>
		</div>
	);
};

const AnnunciList = () => {
	const {
		tipo,
		comune,
		consegna,
		sort,
		map,
		page,
		setPage,
		isLoading: ricercaLoading,
	} = useRicerca();

	const { data, status, isPlaceholderData } =
		api.annunci.getWithCursor.useQuery(
			{
				comune: comune || undefined,
				consegna: consegna || undefined,
				page,
				pageSize: 6,
				sort: sort || undefined,
				tipologia: tipo || undefined,
			},
			{
				enabled: !map,
				placeholderData: keepPreviousData,
				staleTime: 5000,
			},
		);
	const utils = api.useUtils();
	useEffect(() => {
		const prefetchData = async () => {
			if (!isPlaceholderData && data?.hasMore) {
				await utils.annunci.getWithCursor.prefetch({
					comune: comune || undefined,
					consegna: consegna || undefined,
					page: page + 1,
					pageSize: 6,
					sort: sort || undefined,
					tipologia: tipo || undefined,
				});
			}
		};
		prefetchData().catch((err) => {
			console.error("Error prefetching next page:", err);
		});
	}, [data, isPlaceholderData, page]);

	useEffect(() => {
		// Reset to page 0 if current page has no data or less than page size
		const checkPage = async () => {
			if (data) {
				if (data.annunci.length === 0 && page !== 0) {
					await setPage(0);
				}
				if (data.annunci.length < 6 || !data.hasMore) {
					await setPage(0);
				}
			}
		};
		checkPage().catch((err) => {
			console.error("Error checking data for page reset:", err);
		});
	}, [data, tipo, comune, consegna, sort, setPage]);

	if (ricercaLoading) return <LoadingPage />;
	if (status === "error") return <Status500 />;

	return (
		<>
			{status === "pending" ? (
				<LoadingPage />
			) : (
				<AnnunciGrid pagedata={data.annunci} />
			)}
			<br />

			<div className="mx-auto grid max-w-sm grid-cols-5 items-center justify-between gap-2">
				<div className="flex items-center justify-center">
					<button
						aria-label="Reset Page"
						className={cn(
							"rounded-lg bg-red-500/80 px-4 py-2 text-white hover:bg-red-500 active:shadow-lg",
							page < 2 ? "invisible" : "visible",
						)}
						disabled={page < 2}
						onClick={async () => {
							await setPage(0);
						}}
						type="button"
					>
						<ChevronsRight className="rotate-180" height={30} />
					</button>
				</div>
				<div className="flex items-center justify-center">
					<button
						aria-label="Previous Page"
						className={cn(
							"rounded-lg bg-red-500/80 px-4 py-2 text-white hover:bg-red-500 active:shadow-lg",
							page < 1 ? "invisible" : "visible",
						)}
						disabled={page === 0}
						onClick={async () => {
							await setPage((old) => (old ? Math.max(old - 1, 0) : 0));
						}}
						type="button"
					>
						<ChevronRight className="rotate-180" height={30} />
					</button>
				</div>
				<div className="flex items-center justify-center">
					<span className="font-semibold text-lg text-neutral-500">
						{page + 1}
					</span>
				</div>
				<div className="flex items-center justify-center">
					<button
						aria-label="Next Page"
						className={cn(
							"rounded-lg bg-red-500/80 px-4 py-2 text-white hover:bg-red-500 active:shadow-lg",
							data?.hasMore ? "visible" : "invisible",
						)}
						disabled={isPlaceholderData || !data?.hasMore}
						onClick={async () => {
							await setPage((old) =>
								old ? (data?.hasMore ? old + 1 : old) : 1,
							);
						}}
						type="button"
					>
						<ChevronRight height={30} />
					</button>
				</div>
			</div>
		</>
	);
};

interface SelectFilterProps<T> {
	label: string;
	options: string[];
	defaultValue?: T;
	value: T | undefined;
	onValueChange: (value: T) => void;
	handleReset: () => void;
	placeholder: string;
}

export const SelectFilter = <T extends string>({
	label,
	options,
	defaultValue,
	value,
	onValueChange,
	placeholder,
	handleReset,
}: SelectFilterProps<T>) => {
	return (
		<div className="flex flex-col gap-2">
			<div className="flex h-4 flex-row gap-4 px-1">
				<Label
					className={cn(
						"font-semibold text-muted-foreground",
						value !== "" && "text-primary",
					)}
				>
					{label}
				</Label>
				{value !== "" && (
					<button onClick={handleReset} type="button">
						<RotateCcwIcon className="size-4" />
					</button>
				)}
			</div>

			<Select
				defaultValue={defaultValue}
				onValueChange={onValueChange}
				value={value}
			>
				<SelectTrigger className="w-full">
					<SelectValue placeholder={placeholder} />
				</SelectTrigger>
				<SelectContent>
					{options.map((option) => (
						<SelectItem className="text-left" key={option} value={option}>
							{option}
						</SelectItem>
					))}
				</SelectContent>
			</Select>
		</div>
	);
};
eslint migration biome 2025-08-28 18:27:07 +02:00			`import { keepPreviousData } from "@tanstack/react-query";`
			`import {`
			`ChevronDown,`
			`ChevronRight,`
			`ChevronsRight,`
			`ChevronUp,`
			`Filter,`
			`FilterX,`
			`MapIcon,`
			`RotateCcwIcon,`
			`Table,`
			`} from "lucide-react";`
init 2025-08-04 17:45:44 +02:00			`import type { GetServerSideProps } from "next";`
			`import Head from "next/head";`
			`import { useEffect, useMemo, useState } from "react";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`import { AccordionComp } from "~/components/accordionComp";`
			`import { AnnunciGrid } from "~/components/annunci_grid";`
			`import { MapSection } from "~/components/annunci_map";`
			`import { CTA_TipologiaModal } from "~/components/annunci_tutorial";`
			`import { CodiceBox } from "~/components/codiceRicerca";`
init 2025-08-04 17:45:44 +02:00			`import { LoadingPage } from "~/components/loading";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`import { Status500 } from "~/components/status-page";`
			`import { Badge } from "~/components/ui/badge";`
init 2025-08-04 17:45:44 +02:00			`import { Button } from "~/components/ui/button";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`import {`
			`DropdownMenu,`
			`DropdownMenuContent,`
			`DropdownMenuTrigger,`
			`} from "~/components/ui/dropdown-menu";`
init 2025-08-04 17:45:44 +02:00			`import { Label } from "~/components/ui/label";`
			`import {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`Select,`
			`SelectContent,`
			`SelectItem,`
			`SelectTrigger,`
			`SelectValue,`
			`} from "~/components/ui/select";`
			`import { cn } from "~/lib/utils";`
init 2025-08-04 17:45:44 +02:00			`import { useTranslation } from "~/providers/I18nProvider";`
			`import {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`type AnnunciOptions,`
			`RicercaProvider,`
			`type SortTypes,`
			`useRicerca,`
init 2025-08-04 17:45:44 +02:00			`} from "~/providers/RicercaProvider";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`import { generateSSGHelper } from "~/server/utils/ssgHelper";`
			`import { api } from "~/utils/api";`
init 2025-08-04 17:45:44 +02:00
			`type AnnunciPageProps = {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`options: AnnunciOptions;`
init 2025-08-04 17:45:44 +02:00			`};`

			`const Annunci = ({ options }: AnnunciPageProps) => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { t } = useTranslation();`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`return (`
			`<RicercaProvider options={options}>`
			`<Head>`
			`<title>{t.heads.annunci_titolo}</title>`
formatt 2025-08-29 16:18:32 +02:00			`<meta content={t.heads.annunci_description} name="description" />`
eslint migration biome 2025-08-28 18:27:07 +02:00			`</Head>`
init 2025-08-04 17:45:44 +02:00
Refactor and enhance UI components across the application - Renamed `AnnunciInConferma` to `AnnunciInConfermaDialog` and `AnnunciSelezionati` to `AnnunciSelezionatiDialog` for clarity. - Simplified button notifications for announcements by always displaying the count. - Introduced `AnnunciInConfermaAccordion` and `AnnunciSelezionatiAccordion` components to manage accordion behavior for announcements. - Updated button styles to remove unnecessary flex properties for better alignment. - Improved form validation logic in `FormNewServizioAcquisto` for better clarity and performance. - Enhanced the `UploadModal` to accept props directly, simplifying the component structure. - Added a new `CardAnnuncio` component for displaying announcements with improved layout and functionality. - Updated global styles to include a new background color variable. - Refactored API routes and controllers for better clarity and maintainability. - Cleaned up various components by removing redundant class names and improving accessibility. 2025-11-03 10:59:45 +01:00			`<main className="mx-auto w-full max-w-7xl space-y-5 bg-background2 px-2 py-5 md:px-8">`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<div className="inline-block rounded-md bg-primary/10 px-3 py-1 text-primary text-sm">`
feat: add video support to AnnunciGrid and CardAnnuncio components 2025-09-01 17:31:19 +02:00			`{t.annunci.titolo}`
			`</div>`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`<Ricerca />`
			`<AccordionComp`
			`className="max-w-6xl px-4 py-4 md:py-8"`
formatt 2025-08-29 16:18:32 +02:00			`texts={t.annunci.accordion_minifaq}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`/>`
			`</main>`
			`</RicercaProvider>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`

			`export default Annunci;`

			`export const getServerSideProps = (async () => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const helper = generateSSGHelper();`
			`const options = await helper.annunci.getAnnunciOptions.fetch();`
			`return {`
			`props: {`
			`options,`
			`},`
			`};`
init 2025-08-04 17:45:44 +02:00			`}) satisfies GetServerSideProps<AnnunciPageProps>;`

			`const Ricerca = () => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { map, page } = useRicerca();`
			`useEffect(() => {`
formatt 2025-08-29 16:18:32 +02:00			`window.scrollTo({ behavior: "smooth", top: 0 });`
eslint migration biome 2025-08-28 18:27:07 +02:00			`}, [page]);`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`return (`
			`<>`
			`<RicercaFilters />`
			`<br />`
			`{map ? <MapSection /> : <AnnunciList />}`
			`</>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`

			`const RicercaFilters = () => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { t } = useTranslation();`
			`const {`
			`map,`
			`setMap,`
			`tipo,`
			`setTipo,`
			`comune,`
			`setComune,`
			`consegna,`
			`setConsegna,`
			`sort,`
			`setSort,`
			`comuniOptions,`
			`tipologieOptions,`
			`consegnaOptions,`
			`ResetParams,`
			`nFiltri,`
			`} = useRicerca();`
			`const [open, setOpen] = useState(false);`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`const mappedConsegnaOptions = useMemo(`
			`// biome-ignore lint/style/noNonNullAssertion: <known lenght>`
			`() => consegnaOptions.map((m) => t.preferenze.mesi[m]!).filter(Boolean),`
			`[consegnaOptions, t.preferenze.mesi],`
			`);`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`return (`
feat: add video support to AnnunciGrid and CardAnnuncio components 2025-09-01 17:31:19 +02:00			`<div className="mx-auto w-full max-w-7xl space-y-5">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<div className="flex w-full flex-col-reverse gap-4 sm:flex-row sm:gap-2">`
			`<div className="flex w-full gap-2 sm:w-auto">`
			`<div className="flex w-full sm:w-auto">`
formatt 2025-08-29 16:18:32 +02:00			`<DropdownMenu onOpenChange={setOpen} open={open}>`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<DropdownMenuTrigger asChild>`
			`<Button`
			`className="group flex w-full flex-row gap-2 sm:w-auto"`
formatt 2025-08-29 16:18:32 +02:00			`variant="default"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<Badge className="w-fit rounded-md bg-secondary px-1.5 py-0.5 text-secondary-foreground dark:group-hover:bg-transparent">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{nFiltri}`
			`</Badge>`
			`<Filter className="size-5" />{" "}`
			`{nFiltri === 1`
			`? t.annunci.filtro_attivo`
			`: t.annunci.filtri_attivi}`
			`{open ? <ChevronUp /> : <ChevronDown />}`
			`</Button>`
			`</DropdownMenuTrigger>`
			`<DropdownMenuContent`
			`align="start"`
formatt 2025-08-29 16:18:32 +02:00			`className="flex w-60 max-w-3xl flex-col gap-2 p-4"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
			`<SelectFilter`
			`defaultValue={tipo}`
formatt 2025-08-29 16:18:32 +02:00			`handleReset={async () => {`
			`await setTipo("");`
			`}}`
			`label={t.annunci.fs_tipologia.titolo}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`onValueChange={async (value: string) => {`
			`await setTipo(value);`
			`}}`
formatt 2025-08-29 16:18:32 +02:00			`options={tipologieOptions}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`placeholder={t.seleziona_placeholder}`
formatt 2025-08-29 16:18:32 +02:00			`value={tipo}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`/>`
			`<SelectFilter`
			`defaultValue={comune}`
formatt 2025-08-29 16:18:32 +02:00			`handleReset={async () => {`
			`await setComune(null);`
			`}}`
			`label={t.annunci.comune}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`onValueChange={async (value: string) => {`
			`await setComune(value);`
			`}}`
formatt 2025-08-29 16:18:32 +02:00			`options={comuniOptions}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`placeholder={t.seleziona_placeholder}`
formatt 2025-08-29 16:18:32 +02:00			`value={comune}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`/>`
			`<SelectFilter`
			`defaultValue={`
			`consegna ? t.preferenze.mesi[consegna] \|\| "" : ""`
			`}`
formatt 2025-08-29 16:18:32 +02:00			`handleReset={async () => {`
			`await setConsegna(null);`
			`}}`
			`label={t.annunci.consegna}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`onValueChange={async (value: string) => {`
			`if (value === "") {`
			`await setConsegna(null);`
			`return;`
			`}`
			`if (t.preferenze.mesi.includes(value)) {`
			`await setConsegna(t.preferenze.mesi.indexOf(value));`
			`return;`
			`}`
refactor: streamline conditional logic and improve readability across multiple components 2025-09-01 16:48:03 +02:00			`console.warn("Value not found in preferenze.mesi");`
			`await setConsegna(null);`
eslint migration biome 2025-08-28 18:27:07 +02:00			`}}`
formatt 2025-08-29 16:18:32 +02:00			`options={mappedConsegnaOptions}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`placeholder={t.seleziona_placeholder}`
formatt 2025-08-29 16:18:32 +02:00			`value={consegna ? t.preferenze.mesi[consegna] \|\| "" : ""}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`/>`
			`<SelectFilter`
			`defaultValue={sort}`
formatt 2025-08-29 16:18:32 +02:00			`handleReset={async () => {`
			`await setSort("");`
			`}}`
			`label={t.ordina_per}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`onValueChange={async (value: SortTypes) => {`
			`await setSort(value);`
			`}}`
formatt 2025-08-29 16:18:32 +02:00			`options={["Recenti", "Prezzo", "Consegna", "Mq"]}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`placeholder={t.seleziona_placeholder}`
formatt 2025-08-29 16:18:32 +02:00			`value={sort}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`/>`
			`<Button`
			`className="flex flex-row gap-2"`
			`disabled={nFiltri === 0}`
formatt 2025-08-29 16:18:32 +02:00			`onClick={ResetParams}`
			`variant="destructive"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
			`<FilterX className="size-5" /> {t.annunci.filtri_reset}`
			`</Button>`
			`</DropdownMenuContent>`
			`</DropdownMenu>`
			`</div>`
			`<Button`
formatt 2025-08-29 16:18:32 +02:00			`className="flex w-fit flex-row gap-2"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`onClick={async () => {`
			`await setMap((v) => !v);`
			`}}`
formatt 2025-08-29 16:18:32 +02:00			`variant="default"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
			`{!map ? (`
			`<>`
			`<MapIcon className="size-5" />{" "}`
			`<span className="hidden sm:block">Mappa</span>`
			`</>`
			`) : (`
			`<>`
			`<Table className="size-5" />`
			`<span className="hidden sm:block">Lista</span>`
			`</>`
			`)}`
			`</Button>`
			`</div>`
			`<div className="flex w-full items-center justify-between gap-2 sm:justify-between">`
fix: adjust z-index values in MapSection and RicercaFilters components 2025-10-20 11:53:21 +02:00			`<div className="relative z-35 flex w-full gap-1 sm:w-auto">`
fix: add inputId prop to CodiceBox in multiple components for improved accessibility 2025-10-20 11:56:54 +02:00			`<CodiceBox`
			`className="h-10 w-full"`
			`inputId="annunci-search"`
			`optionBoxClassName="top-11 "`
			`/>`
eslint migration biome 2025-08-28 18:27:07 +02:00			`</div>`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`<CTA_TipologiaModal />`
			`</div>`
			`</div>`
			`</div>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`

			`const AnnunciList = () => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const {`
			`tipo,`
			`comune,`
			`consegna,`
			`sort,`
			`map,`
			`page,`
			`setPage,`
			`isLoading: ricercaLoading,`
			`} = useRicerca();`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { data, status, isPlaceholderData } =`
			`api.annunci.getWithCursor.useQuery(`
			`{`
			`comune: comune \|\| undefined,`
			`consegna: consegna \|\| undefined,`
formatt 2025-08-29 16:18:32 +02:00			`page,`
			`pageSize: 6,`
eslint migration biome 2025-08-28 18:27:07 +02:00			`sort: sort \|\| undefined,`
formatt 2025-08-29 16:18:32 +02:00			`tipologia: tipo \|\| undefined,`
eslint migration biome 2025-08-28 18:27:07 +02:00			`},`
			`{`
			`enabled: !map,`
formatt 2025-08-29 16:18:32 +02:00			`placeholderData: keepPreviousData,`
eslint migration biome 2025-08-28 18:27:07 +02:00			`staleTime: 5000,`
			`},`
			`);`
			`const utils = api.useUtils();`
			`useEffect(() => {`
			`const prefetchData = async () => {`
			`if (!isPlaceholderData && data?.hasMore) {`
			`await utils.annunci.getWithCursor.prefetch({`
			`comune: comune \|\| undefined,`
			`consegna: consegna \|\| undefined,`
formatt 2025-08-29 16:18:32 +02:00			`page: page + 1,`
			`pageSize: 6,`
eslint migration biome 2025-08-28 18:27:07 +02:00			`sort: sort \|\| undefined,`
formatt 2025-08-29 16:18:32 +02:00			`tipologia: tipo \|\| undefined,`
eslint migration biome 2025-08-28 18:27:07 +02:00			`});`
			`}`
			`};`
			`prefetchData().catch((err) => {`
			`console.error("Error prefetching next page:", err);`
			`});`
			`}, [data, isPlaceholderData, page]);`
init 2025-08-04 17:45:44 +02:00
feat(annunci): Implement page reset logic in AnnunciList based on data availability 2025-11-03 15:50:24 +01:00			`useEffect(() => {`
			`// Reset to page 0 if current page has no data or less than page size`
			`const checkPage = async () => {`
			`if (data) {`
			`if (data.annunci.length === 0 && page !== 0) {`
			`await setPage(0);`
			`}`
			`if (data.annunci.length < 6 \|\| !data.hasMore) {`
			`await setPage(0);`
			`}`
			`}`
			`};`
			`checkPage().catch((err) => {`
			`console.error("Error checking data for page reset:", err);`
			`});`
			`}, [data, tipo, comune, consegna, sort, setPage]);`

eslint migration biome 2025-08-28 18:27:07 +02:00			`if (ricercaLoading) return <LoadingPage />;`
			`if (status === "error") return <Status500 />;`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`return (`
			`<>`
			`{status === "pending" ? (`
			`<LoadingPage />`
			`) : (`
			`<AnnunciGrid pagedata={data.annunci} />`
			`)}`
			`<br />`
Refactor pagination logic in AnnunciList and update API to use page and pageSize parameters for improved data fetching 2025-08-08 16:55:02 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`<div className="mx-auto grid max-w-sm grid-cols-5 items-center justify-between gap-2">`
			`<div className="flex items-center justify-center">`
			`<button`
			`aria-label="Reset Page"`
			`className={cn(`
			`"rounded-lg bg-red-500/80 px-4 py-2 text-white hover:bg-red-500 active:shadow-lg",`
			`page < 2 ? "invisible" : "visible",`
			`)}`
formatt 2025-08-29 16:18:32 +02:00			`disabled={page < 2}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`onClick={async () => {`
			`await setPage(0);`
			`}}`
formatt 2025-08-29 16:18:32 +02:00			`type="button"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
			`<ChevronsRight className="rotate-180" height={30} />`
			`</button>`
			`</div>`
			`<div className="flex items-center justify-center">`
			`<button`
			`aria-label="Previous Page"`
			`className={cn(`
			`"rounded-lg bg-red-500/80 px-4 py-2 text-white hover:bg-red-500 active:shadow-lg",`
			`page < 1 ? "invisible" : "visible",`
			`)}`
formatt 2025-08-29 16:18:32 +02:00			`disabled={page === 0}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`onClick={async () => {`
			`await setPage((old) => (old ? Math.max(old - 1, 0) : 0));`
			`}}`
formatt 2025-08-29 16:18:32 +02:00			`type="button"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
formatt 2025-08-29 16:18:32 +02:00			`<ChevronRight className="rotate-180" height={30} />`
eslint migration biome 2025-08-28 18:27:07 +02:00			`</button>`
			`</div>`
			`<div className="flex items-center justify-center">`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<span className="font-semibold text-lg text-neutral-500">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{page + 1}`
			`</span>`
			`</div>`
			`<div className="flex items-center justify-center">`
			`<button`
			`aria-label="Next Page"`
			`className={cn(`
			`"rounded-lg bg-red-500/80 px-4 py-2 text-white hover:bg-red-500 active:shadow-lg",`
			`data?.hasMore ? "visible" : "invisible",`
			`)}`
formatt 2025-08-29 16:18:32 +02:00			`disabled={isPlaceholderData \|\| !data?.hasMore}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`onClick={async () => {`
			`await setPage((old) =>`
			`old ? (data?.hasMore ? old + 1 : old) : 1,`
			`);`
			`}}`
formatt 2025-08-29 16:18:32 +02:00			`type="button"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
			`<ChevronRight height={30} />`
			`</button>`
			`</div>`
			`</div>`
			`</>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`

			`interface SelectFilterProps<T> {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`label: string;`
			`options: string[];`
			`defaultValue?: T;`
			`value: T \| undefined;`
			`onValueChange: (value: T) => void;`
			`handleReset: () => void;`
			`placeholder: string;`
init 2025-08-04 17:45:44 +02:00			`}`

			`export const SelectFilter = <T extends string>({`
eslint migration biome 2025-08-28 18:27:07 +02:00			`label,`
			`options,`
			`defaultValue,`
			`value,`
			`onValueChange,`
			`placeholder,`
			`handleReset,`
init 2025-08-04 17:45:44 +02:00			`}: SelectFilterProps<T>) => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`return (`
			`<div className="flex flex-col gap-2">`
			`<div className="flex h-4 flex-row gap-4 px-1">`
			`<Label`
			`className={cn(`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`"font-semibold text-muted-foreground",`
eslint migration biome 2025-08-28 18:27:07 +02:00			`value !== "" && "text-primary",`
			`)}`
			`>`
			`{label}`
			`</Label>`
			`{value !== "" && (`
formatt 2025-08-29 16:18:32 +02:00			`<button onClick={handleReset} type="button">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<RotateCcwIcon className="size-4" />`
			`</button>`
			`)}`
			`</div>`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`<Select`
			`defaultValue={defaultValue}`
			`onValueChange={onValueChange}`
formatt 2025-08-29 16:18:32 +02:00			`value={value}`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
			`<SelectTrigger className="w-full">`
			`<SelectValue placeholder={placeholder} />`
			`</SelectTrigger>`
			`<SelectContent>`
			`{options.map((option) => (`
formatt 2025-08-29 16:18:32 +02:00			`<SelectItem className="text-left" key={option} value={option}>`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{option}`
			`</SelectItem>`
			`))}`
			`</SelectContent>`
			`</Select>`
			`</div>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`