import { keepPreviousData } from "@tanstack/react-query"; import { ChevronDown, Filter, FilterX, MapIcon, RotateCcwIcon, Table, } from "lucide-react"; import type { GetServerSideProps } from "next"; import dynamic from "next/dynamic"; import Head from "next/head"; import { useCallback, useMemo } from "react"; import { AccordionComp } from "~/components/accordionComp"; import { CTA_TipologiaModal } from "~/components/annunci_tutorial"; import { LazyCardAnnuncio } from "~/components/annuncio_card"; import { CodiceBox } from "~/components/codiceRicerca"; import { NumberInput } from "~/components/custom_ui/InputNumber"; import { Layout } from "~/components/Layout"; import { LoadingPage } from "~/components/loading"; import ScrollToTop from "~/components/scroll_top"; 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 { useMediaQuery } from "~/hooks/use-media-query"; import { cn, debounce } 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"; const MapSection = dynamic( () => import("~/components/annunci_map").then((mod) => ({ default: mod.MapSection, })), { ssr: false, loading: () => , }, ); type AnnunciPageProps = { options: AnnunciOptions; }; const Annunci = ({ options }: AnnunciPageProps) => { const { t } = useTranslation(); return ( {t.heads.annunci_titolo}
{t.annunci.titolo}
); }; 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, isLoading } = useRicerca(); return (
{isLoading ? : map ? : }
); }; const Filters = () => { const { t } = useTranslation(); const { tipo, comune, sort, comuniOptions, tipologieOptions, setAllParams, reset, nFiltri, } = useRicerca(); return ( <> { await setAllParams({ tipo: "", }); }} id="tipologia-filter" label={t.annunci.fs_tipologia.titolo} onValueChange={async (value: string) => { await setAllParams({ tipo: value, }); }} options={tipologieOptions} placeholder={t.seleziona_placeholder} value={tipo} /> { await setAllParams({ comune: null, }); }} id="comune-filter" key={comune} label={t.annunci.comune} onValueChange={async (value: string) => { await setAllParams({ comune: value, }); }} options={comuniOptions} placeholder={t.seleziona_placeholder} value={comune || undefined} /> { await setAllParams({ sort: "Recenti", }); }} id="sort-filter" label={t.ordina_per} onValueChange={async (value: SortTypes) => { await setAllParams({ sort: value, }); }} options={["Recenti", "Prezzo", "Consegna", "Mq"]} placeholder={t.seleziona_placeholder} value={sort} /> ); }; const RicercaSideFilters = () => { const isBigScreen = useMediaQuery("(min-width: 96rem)"); if (!isBigScreen) return null; return (
); }; const DrowdownFilters = () => { const { t } = useTranslation(); const { nFiltri } = useRicerca(); const isBigScreen = useMediaQuery("(min-width: 96rem)"); if (isBigScreen) return null; return (
); }; const RicercaHeader = () => { const { map, setAllParams } = useRicerca(); return (