Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

chore: add confirmation dialog for removing announcements and refactor mutation handling

Browse source
This commit is contained in:
Marco Pedone 2026-01-16 11:53:10 +01:00
parent 675db60bb9
commit 5391ad00e7
1 changed files with 50 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
apps/infoalloggi/src/components/servizio/main.tsx
View file

@ -1,5 +1,5 @@
import { add } from "date-fns"; import { add } from "date-fns";
import { ArrowRight, Package, PackageCheck } from "lucide-react"; import { ArrowRight, Package, PackageCheck, Trash2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect } from "react"; import { useEffect } from "react";
@ -24,6 +24,7 @@ import {
useServizio, useServizio,
} from "~/providers/ServizioProvider"; } from "~/providers/ServizioProvider";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import { Confirm } from "../confirm";
import { AlarmClockSVG } from "../svgs"; import { AlarmClockSVG } from "../svgs";
import { AnnunciCompatibili } from "./compatibili_dialog"; import { AnnunciCompatibili } from "./compatibili_dialog";
@ -64,17 +65,6 @@ const ServizioCard = ({
export const ServizioContent = () => { export const ServizioContent = () => {
const { servizio, isAdmin, userId, servizioId } = useServizio(); const { servizio, isAdmin, userId, servizioId } = useServizio();
const utils = api.useUtils();
const { mutate: updateServizio } = api.servizio.updateServizio.useMutation({
onError: (error) => {
toast.error(error.message);
},
onSuccess: async () => {
toast.success("Servizio modificato con successo");
await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
await utils.servizio.getPacksSolution.invalidate({ servizioId });
},
});
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
@ -125,6 +115,30 @@ export const ServizioContent = () => {
} }
if (!servizio.isOkAcconto || servizio.decorrenza === null) { if (!servizio.isOkAcconto || servizio.decorrenza === null) {
const utils = api.useUtils();
const { mutate: updateServizio } = api.servizio.updateServizio.useMutation({
onError: (error) => {
toast.error(error.message);
},
onSuccess: async () => {
toast.success("Servizio modificato con successo");
await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
await utils.servizio.getPacksSolution.invalidate({ servizioId });
},
});
const { mutate } = api.servizio.removeAnnuncioServizio.useMutation({
onError: (error) => {
console.error(error);
toast.error("Errore durante la rimozione dell'annuncio");
},
onSuccess: async () => {
await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
await utils.servizio.getCompatibileAnnunci.invalidate({
servizioId,
});
toast.success("Annuncio rimosso");
},
});
return ( return (
<ServizioCard <ServizioCard
content={ content={
@ -170,7 +184,7 @@ export const ServizioContent = () => {
</p> </p>
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
{servizio.annunci.map((data) => ( {servizio.annunci.map((data) => (
<div className="" key={data.id}> <div className="group relative" key={data.id}>
<AnnuncioDisplay <AnnuncioDisplay
className="bg-[#e6e9ec]/50" className="bg-[#e6e9ec]/50"
data={{ data={{
@ -183,10 +197,31 @@ export const ServizioContent = () => {
: null, : null,
}} }}
/> />
{isAdmin && (
<Confirm
description="Sei sicuro di voler rimuovere questo annuncio?"
onConfirm={() => {
mutate({
annuncioId: data.annunci_id,
servizioId: servizio.servizio_id,
});
}}
title="Rimuovi Annuncio"
>
<Button
aria-label="Rimuovi"
className="absolute top-0 right-0 hidden group-hover:flex"
size="sm"
variant="destructive"
>
<Trash2 />
</Button>
</Confirm>
)}
</div> </div>
))} ))}
{servizio.annunci.length % 2 === 1 && ( {servizio.annunci.length % 2 === 1 && (
<div className="hidden size-full rounded-md border border-[var(--pattern-fg)] bg-[repeating-linear-gradient(45deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] sm:block dark:[--pattern-fg:#e1e1e1]" /> <div className="hidden size-full rounded-md border border-(--pattern-fg) bg-[repeating-linear-gradient(45deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] sm:block dark:[--pattern-fg:#e1e1e1]" />
)} )}
</div> </div>
</div> </div>
@ -325,7 +360,7 @@ export const ServizioContent = () => {
); );
})} })}
{servizio.annunci.length % 2 === 1 && ( {servizio.annunci.length % 2 === 1 && (
<div className="size-full rounded-md border border-[var(--pattern-fg)] bg-[repeating-linear-gradient(45deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] dark:[--pattern-fg:#e1e1e1]" /> <div className="size-full rounded-md border border-(--pattern-fg) bg-[repeating-linear-gradient(45deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] dark:[--pattern-fg:#e1e1e1]" />
)} )}
</div> </div>