Апрацоўка DELETE запыту ў NextJS

Для выдалення даных трэба выкарыстоўваць апрацоўшчыкі для DELETE запыту.

Давайце зробім так, каб пры пераходзе па адрасе users/delete/1, з'явілася форма, па націсканні на кнопку якой будзе выдалены з масіву першы юзер.

Спачатку ствараем папку users/[id]/delete, усярэдзіне якой размясцім файл page.jsx. А файл з апрацоўшчыкам роўта для пазбягання канфлікту размясцім у папцы users/[id]/delete/api.

Пропісваем у users/[id]/update/page.jsx дырэктыву 'use client і імпартуем хукі useState, useEffect і useParams. Далей экспартуем функцыю DeleteUserPage. У зменную handleSubmit запішам асінхронную стрэлачную функцыю. Яна будзе працаваць з элементамі формы і будзе захоўваць нават пры перазагрузцы старонкі. Сваім вынікам функцыя таксама будзе вяртаць форму з інпутам. Па націсканні на кнопку будзе выконвацца DELETE запыт:

'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';

export default function DeleteUserPage() {
	const [name, setName] = useState('');
	const [responseMessage, setResponseMessage] = useState('');
	const { id } = useParams();
	
	useEffect(() => {
		const fetchUser = async () => {
			try {
				const response = await fetch(`/users/delete/${id}/api`);
				if (response.ok) {
					const user = await response.json();
					setName(user.name);
				} else {
					throw new Error('Error fetching user');
				}
			} catch (error) {
				setResponseMessage('Error fetching user');
			}
		};
		
		fetchUser();
	}, [id]);
	
	const handleDelete = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
	
		try {
			const response = await fetch(`/users/delete/${id}/api`, {
				method: 'DELETE',
				headers: {
				'Content-Type': 'application/json',
				},
			});
	
			if (!response.ok) {
				throw new Error('Error deleting user');
			}
		
			setResponseMessage(`User with ID: ${id} deleted!`);
		} catch (error) {
			setResponseMessage('Error deleting user');
		}
	};
	
	return (
		<div>
		<h1>Delete User</h1>
		<form onSubmit={handleDelete}>
			<input
			value={name}
			readOnly
			required
			/>
			<button type="submit">Delete User</button>
		</form>
		{responseMessage && <p>{responseMessage}</p>}
		</div>
	);
}

Цяпер пераходзім да роўту users/[id]/delete/api/route.js. Імпартуем у яго зменную users з файла users/data.js. Каб рэндарыць форму на старонцы браўзера аб'яўляем асінхронную функцыю для апрацоўкі GET запыту. Задаем для дынамічнай параметра id радковы тып даных. У зменную userId запішам вынік пераўтварэння радка id у лік. А зменная user будзе захоўваць інфармацыю аб юзеры, id якога супадае з параметрам, зададзеным у маршруце. Таксама зададзім умову, якая будзе выдаваць памылку, калі юзер з зададзеным id не будзе знойдзены:

import { users } from "../../../data";

// апрацоўка GET запыту для атрымання даных карыстальніка:
export async function GET(_request: Request, { params }: { params: { id: string } }) {
const userId = parseInt(params.id, 10);
const user = users.find(user => user.id === userId);

if (!user) {
		return new Response(JSON.stringify({ message: 'User not found' }), {
		headers: { 'Content-Type': 'application/json' },
		status: 404,
	});
}

return new Response(JSON.stringify(user), {
	headers: { 'Content-Type': 'application/json' },
	status: 200,
});
}
	}

Цяпер давайце апішам функцыю для апрацоўкі DELETE запыту. Ёй таксама будзе перададзены дынамічны параметр id радковага тыпу. у зменнай userId пераўтворым id у лік. Далей атрымліваем цела запыту, у нашым выпадку гэта будзе імя, і запісваем яго ў зменную body. Далей з дапамогай стрэлачнай функцыі знаходзім у масіве users індэкс юзера з зададзеным у параметры маршруту id і запісваем вынік у зменную userIndex. Таксама пропішам умову, якая будзе выдаваць памылку, у выпадку, калі юзер не будзе знойдзены. Знойдзенага юзера выдаляем з масіву з дапамогай метаду splice. І затым вяртаем абноўлены аб'ект карыстальніка:

export async function DELETE(_request: Request, { params }: { params: { id: string } }) {
const userId = parseInt(params.id);

const userIndex = users.findIndex(user => user.id === userId);

if (userIndex === -1) {
	return new Response(JSON.stringify({ message: 'User not found' }), {
	headers: { 'Content-Type': 'application/json' },
	status: 404,
	});
}

// Выдаленне карыстальніка
users.splice(userIndex, 1);

return new Response(JSON.stringify({ message: `User ${userId} deleted` }), {
	headers: { 'Content-Type': 'application/json' },
	status: 200,
});

Рэалізуйце выдаленне горада апісаным у ўроке спосабам.