mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
Zone deletion
This commit is contained in:
Timothy Armes
@@ -1,16 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useFormatter, useTranslations } from "next-intl";
|
||||
import dynamic from "next/dynamic";
|
||||
import { IoAdd } from "react-icons/io5";
|
||||
|
||||
import InfoMessage, { clearMessage } from "@/components/InfoMessage";
|
||||
import { Modal } from "@/components/Modal";
|
||||
import { Spinner } from "@/components/Spinner";
|
||||
import { myZones } from "@/server/myZones";
|
||||
import { useZones } from "@/hooks/useZones";
|
||||
import { deleteZone } from "@/server/deleteZone";
|
||||
import { TimeControl } from "@/types";
|
||||
import { Link } from "@/utils/navigation";
|
||||
import { Link, useRouter } from "@/utils/navigation";
|
||||
|
||||
const ZoneThumbnail = dynamic(() => import("./components/ZoneThumbnail"), {
|
||||
ssr: false,
|
||||
@@ -20,103 +22,149 @@ const ZoneThumbnail = dynamic(() => import("./components/ZoneThumbnail"), {
|
||||
const Zones = () => {
|
||||
const t = useTranslations("Zones");
|
||||
const at = useTranslations("App");
|
||||
const router = useRouter();
|
||||
const format = useFormatter();
|
||||
|
||||
const { data, isFetching, error } = useQuery({
|
||||
queryKey: ["zones"],
|
||||
queryFn: async () => myZones(),
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: Infinity,
|
||||
gcTime: 10 * 60 * 1000,
|
||||
retry: false,
|
||||
const [deletingZoneId, setDeletingZoneId] = useState<string | null>(null);
|
||||
const [responseMessage, setResponseMessage] = useState({
|
||||
isSuccessful: false,
|
||||
message: "",
|
||||
});
|
||||
|
||||
const zones = data?.data ?? [];
|
||||
const { zones, isFetching, refetch } = useZones();
|
||||
|
||||
const onDelete = async () => {
|
||||
try {
|
||||
if (!deletingZoneId) return;
|
||||
|
||||
await deleteZone({ id: deletingZoneId });
|
||||
await refetch();
|
||||
setDeletingZoneId(null);
|
||||
|
||||
router.push("/zones");
|
||||
} catch (err: unknown) {
|
||||
console.log(err);
|
||||
setResponseMessage({
|
||||
isSuccessful: false,
|
||||
message: t("createFailure"),
|
||||
});
|
||||
|
||||
clearMessage(setResponseMessage);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2
|
||||
className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
||||
data-test="header2"
|
||||
>
|
||||
{t("title")}
|
||||
</h2>
|
||||
<p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
|
||||
{t("info")}
|
||||
</p>
|
||||
<>
|
||||
<div>
|
||||
<h2
|
||||
className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
||||
data-test="header2"
|
||||
>
|
||||
{t("title")}
|
||||
</h2>
|
||||
<p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
|
||||
{t("info")}
|
||||
</p>
|
||||
|
||||
{isFetching ? (
|
||||
<div className="mt-8 flex justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-8">
|
||||
{zones?.map((zone) => {
|
||||
const notifications = [
|
||||
...(zone.classicNotifications ? [TimeControl.Classic] : []),
|
||||
...(zone.rapidNotifications ? [TimeControl.Rapid] : []),
|
||||
...(zone.blitzNotifications ? [TimeControl.Blitz] : []),
|
||||
];
|
||||
{isFetching ? (
|
||||
<div className="mt-8 flex justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-8">
|
||||
{zones?.map((zone) => {
|
||||
const notifications = [
|
||||
...(zone.classicNotifications ? [TimeControl.Classic] : []),
|
||||
...(zone.rapidNotifications ? [TimeControl.Rapid] : []),
|
||||
...(zone.blitzNotifications ? [TimeControl.Blitz] : []),
|
||||
];
|
||||
|
||||
const notificationsList = format.list(
|
||||
notifications.map((tc) => at("timeControlEnumInline", { tc })),
|
||||
{ type: "conjunction" },
|
||||
);
|
||||
const notificationsList = format.list(
|
||||
notifications.map((tc) => at("timeControlEnumInline", { tc })),
|
||||
{ type: "conjunction" },
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex gap-4 text-gray-900 dark:text-white"
|
||||
key={zone.id}
|
||||
>
|
||||
<ZoneThumbnail features={zone.features} size={200} />
|
||||
<div className="flex flex-1 flex-col justify-between">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{zone.name}
|
||||
</h3>
|
||||
return (
|
||||
<div
|
||||
className="flex gap-4 text-gray-900 dark:text-white"
|
||||
key={zone.id}
|
||||
>
|
||||
<ZoneThumbnail features={zone.features} size={200} />
|
||||
<div className="flex flex-1 flex-col justify-between">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{zone.name}
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
{notifications.length === 0
|
||||
? t("noNotifications")
|
||||
: t.rich("withNotifications", {
|
||||
list: notificationsList,
|
||||
b: (str) => <b>{str}</b>,
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
{notifications.length === 0
|
||||
? t("noNotifications")
|
||||
: t.rich("withNotifications", {
|
||||
list: notificationsList,
|
||||
b: (str) => <b>{str}</b>,
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
href={{
|
||||
pathname: "/zones/edit/[id]",
|
||||
params: { id: zone.id },
|
||||
}}
|
||||
className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{t("editButton")}
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{t("deleteButton")}
|
||||
</button>
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
href={{
|
||||
pathname: "/zones/edit/[id]",
|
||||
params: { id: zone.id },
|
||||
}}
|
||||
className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{at("editButton")}
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDeletingZoneId(zone.id)}
|
||||
className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{at("deleteButton")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-12 flex justify-center gap-4">
|
||||
<Link
|
||||
href={`/zones/create`}
|
||||
className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
<IoAdd className="mr-2 inline-block h-5 w-5" />
|
||||
{t("addZoneButton")}
|
||||
</Link>
|
||||
<div className="mt-12 flex justify-center gap-4">
|
||||
<Link
|
||||
href={`/zones/create`}
|
||||
className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
<IoAdd className="mr-2 inline-block h-5 w-5" />
|
||||
{t("addZoneButton")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
open={deletingZoneId !== null}
|
||||
onClose={() => setDeletingZoneId(null)}
|
||||
title={t("deleteZoneTitle")}
|
||||
subTitle={t("deleteZoneInfo")}
|
||||
>
|
||||
<InfoMessage responseMessage={responseMessage} />
|
||||
|
||||
<div className="flex items-center justify-between space-x-4 text-sm font-bold">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDeletingZoneId(null)}
|
||||
className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{at("cancelButton")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete()}
|
||||
className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{at("deleteButton")}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user