import { keepPreviousData } from "@tanstack/react-query"; import { ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, 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 { MapSection } from "~/components/annunci_map"; import { CTA_TipologiaModal } from "~/components/annunci_tutorial"; import { CardAnnuncio } from "~/components/annuncio_card"; import { CodiceBox } from "~/components/codiceRicerca"; import { Layout } from "~/components/Layout"; 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 ( {t.heads.annunci_titolo} {t.annunci.titolo} ); }; const GoBackButton = () => { const { page, setPage } = useRicerca(); if (page >= 2) { return ( { await setPage(0); }} variant="link" > Torna all'inizio ); } }; export default Annunci; Annunci.getLayout = (page: React.ReactNode) => { return ( {page} ); }; export const getServerSideProps = (async () => { const helper = generateSSGHelper(); const options = await helper.annunci.getAnnunciOptions.fetch(); return { props: { options, }, }; }) satisfies GetServerSideProps; const Ricerca = () => { const { map, page } = useRicerca(); useEffect(() => { window.scrollTo({ behavior: "smooth", top: 0 }); }, [page]); return ( {map ? : } ); }; 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: () => consegnaOptions.map((m) => t.preferenze.mesi[m]!).filter(Boolean), [consegnaOptions, t.preferenze.mesi], ); return ( {nFiltri} {" "} {nFiltri === 1 ? t.annunci.filtro_attivo : t.annunci.filtri_attivi} {open ? : } { await setTipo(""); }} label={t.annunci.fs_tipologia.titolo} onValueChange={async (value: string) => { await setTipo(value); }} options={tipologieOptions} placeholder={t.seleziona_placeholder} value={tipo} /> { await setComune(null); }} label={t.annunci.comune} onValueChange={async (value: string) => { await setComune(value); }} options={comuniOptions} placeholder={t.seleziona_placeholder} value={comune} /> { 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] || "" : ""} /> { await setSort("Recenti"); }} label={t.ordina_per} onValueChange={async (value: SortTypes) => { await setSort(value); }} options={["Recenti", "Prezzo", "Consegna", "Mq"]} placeholder={t.seleziona_placeholder} value={sort} /> {t.annunci.filtri_reset} { await setMap((v) => !v); }} variant="default" > {!map ? ( <> {" "} Mappa > ) : ( <> Lista > )} ); }; 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 ; if (status === "error") return ; return ( <> {status === "pending" ? ( ) : ( {data.annunci.map((annuncio) => ( ))} )} {page >= 2 && ( { await setPage(0); }} title="Go to first page" variant="outline" > )} { await setPage((old) => (old ? Math.max(old - 1, 0) : 0)); }} title="Previous page" variant="outline" > {page + 1} { await setPage((old) => old ? (data?.hasMore ? old + 1 : old) : 1, ); }} title="Next page" variant="outline" > > ); }; interface SelectFilterProps { label: string; options: string[]; defaultValue?: T; value: T | undefined; onValueChange: (value: T) => void; handleReset: () => void; placeholder: string; } export const SelectFilter = ({ label, options, defaultValue, value, onValueChange, placeholder, handleReset, }: SelectFilterProps) => { return ( {label} {value !== defaultValue && ( )} {options.map((option) => ( {option} ))} ); };