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
@@ -5,6 +5,7 @@ import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import InfoMessage, { clearMessage } from "@/components/InfoMessage";
|
||||
import { useZones } from "@/hooks/useZones";
|
||||
import { createZone } from "@/server/createZone";
|
||||
import { useRouter } from "@/utils/navigation";
|
||||
|
||||
@@ -19,9 +20,13 @@ const CreateZone = () => {
|
||||
message: "",
|
||||
});
|
||||
|
||||
const { refetch } = useZones();
|
||||
|
||||
const onSubmit = async (data: ZoneFormValues) => {
|
||||
try {
|
||||
await createZone(data);
|
||||
await refetch();
|
||||
|
||||
router.push("/zones");
|
||||
} catch (err: unknown) {
|
||||
console.log(err);
|
||||
|
||||
@@ -2,13 +2,12 @@
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
import InfoMessage, { clearMessage } from "@/components/InfoMessage";
|
||||
import { useZones } from "@/hooks/useZones";
|
||||
import { editZone } from "@/server/editZone";
|
||||
import { myZones } from "@/server/myZones";
|
||||
import { useRouter } from "@/utils/navigation";
|
||||
|
||||
import { ZoneForm, ZoneFormValues } from "../../components/ZoneForm";
|
||||
@@ -23,43 +22,9 @@ const EditZone = () => {
|
||||
message: "",
|
||||
});
|
||||
|
||||
const { data, isFetching, error, refetch } = useQuery({
|
||||
queryKey: ["zones"],
|
||||
queryFn: async () => myZones(),
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: Infinity,
|
||||
gcTime: 10 * 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
const { zones, isFetching, refetch } = useZones();
|
||||
|
||||
const editZoneMutation = useMutation({
|
||||
mutationFn: async (data: ZoneFormValues) => {
|
||||
const updatedZone = await editZone({
|
||||
id: params.id as string,
|
||||
zone: data,
|
||||
});
|
||||
|
||||
if (updatedZone.serverError) {
|
||||
throw new Error(updatedZone.serverError);
|
||||
}
|
||||
|
||||
return updatedZone;
|
||||
},
|
||||
onError: (error) => {
|
||||
setResponseMessage({
|
||||
isSuccessful: false,
|
||||
message: t("createFailure"),
|
||||
});
|
||||
|
||||
clearMessage(setResponseMessage);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await refetch();
|
||||
router.push("/zones");
|
||||
},
|
||||
});
|
||||
|
||||
const zone = (data?.data ?? []).find((zone) => zone.id === params.id);
|
||||
const zone = zones.find((zone) => zone.id === params.id);
|
||||
|
||||
if (isFetching) {
|
||||
return null;
|
||||
@@ -70,7 +35,26 @@ const EditZone = () => {
|
||||
}
|
||||
|
||||
const onSubmit = async (data: ZoneFormValues) => {
|
||||
await editZoneMutation.mutateAsync(data);
|
||||
try {
|
||||
const updatedZone = await editZone({
|
||||
id: params.id as string,
|
||||
zone: data,
|
||||
});
|
||||
|
||||
if (updatedZone.serverError) {
|
||||
throw new Error(updatedZone.serverError);
|
||||
}
|
||||
|
||||
await refetch();
|
||||
router.push("/zones");
|
||||
} catch (error) {
|
||||
setResponseMessage({
|
||||
isSuccessful: false,
|
||||
message: t("createFailure"),
|
||||
});
|
||||
|
||||
clearMessage(setResponseMessage);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -87,6 +71,7 @@ const EditZone = () => {
|
||||
onCancel={() => router.push("/zones")}
|
||||
zone={zone}
|
||||
/>
|
||||
|
||||
<InfoMessage responseMessage={responseMessage} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -6,11 +6,19 @@ import { useSession } from "next-auth/react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { SignInForm } from "@/components/SignInForm";
|
||||
import { Spinner } from "@/components/Spinner";
|
||||
|
||||
export default function ZonesLayout({ children }: { children: ReactNode }) {
|
||||
const { data: sessionData } = useSession();
|
||||
const { data: sessionData, status } = useSession();
|
||||
const t = useTranslations("Zones");
|
||||
|
||||
if (status === "loading")
|
||||
return (
|
||||
<div className="mt-20 flex justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
|
||||
{!sessionData ? (
|
||||
|
||||
@@ -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