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

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

Хай пры пераходзе па адрасе users/update/1 з'явіцца форма, у інпуце якой можна будзе ўвесці новае імя для першага карыстальніка.

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

Пропісваем у users/[id]/update/page.jsx дырэктыву 'use client' і імпартуем хукі useState, useEffect і useParams:

'use client';

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

Далей экспартуем функцыю UpdateUserPage. Аб'яўляем зменныя name, setName, responseMessage і setResponseMessage. З хука useParams, які апрацоўвае дынамічныя параметры роўта, вывядзем зменную id. А з дапамогай хука useEffect апрацуем роўт, які знаходзіцца па адрасе /users/update/${id}/api. У зменную handleSubmit запішам асінхронную стрэлачную функцыю, якая будзе працаваць з элементамі формы і захоўваць вынік нават пры перазагрузцы старонкі. Для адлову памылак код з унясеннем новага імя карыстальніка размясцім у блоках try-catch. Сваім вынікам функцыя таксама будзе вяртаць форму з інпутам. Пасля націску на кнопку будзе выконвацца PATCH запыт:

export default function UpdateUserPage() {
	let [name, setName] = useState('');
	let [responseMessage, setResponseMessage] = useState('');
	let { id } = useParams();
	
	useEffect(() => {
		let fetchUser = async () => {
			let response = await fetch(`/users/update/${id}/api`);
			if (response.ok) {
				let user = await response.json();
				setName(user.name);
			} else {
				throw new Error('Error fetching user');
			}
		};
		fetchUser();
	}, [id]);
	
	let handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
	
		try {
			let response = await fetch(`/users/update/${id}/api`, {
				method: 'PATCH',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({ name }),
			});
		
			if (!response.ok) {
				throw new Error('Error updating user');
			}
		
			let updatedUser = await response.json();
			setResponseMessage(`User updated! Name: ${updatedUser.name}`);
		} catch (error) {
			setResponseMessage('Error updating user');
		}
	};
	
	return (
		<div>
			<h1>Update User</h1>
			<form onSubmit={handleSubmit}>
				<input
				value={name}
				onChange={(e) => setName(e.target.value)}
				placeholder="Enter new user name"
				required
				/>
				<button type="submit">Update User</button>
			</form>
			{responseMessage && <p>{responseMessage}</p>}
		</div>
	);
}

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

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

export async function GET(_request: Request, { params }: { params: { id: string } }) {
	let userId = parseInt(params.id);
	let 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,
	});
	}
	
	// апрацоўка PATCH запыту для абнаўлення імя карыстальніка:
	export async function PATCH(request: Request, { params }: { params: { id: string } }) {
	try {
		let userId = parseInt(params.id);
		let body = await request.json();
		let updatedName = body.name;
	
		let 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[userIndex].name = updatedName;
	
		// вяртанне абноўленага аб'екта карыстальніка:
		return new Response(JSON.stringify(users[userIndex]), {
			headers: { 'Content-Type': 'application/json' },
			status: 200,
		});
	} catch (error) {
			console.error('Error:', error);
			return new Response(JSON.stringify({ message: 'Error updating user' }), {
				headers: { 'Content-Type': 'application/json' },
				status: 500,
		});
	}
}

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

export async function PATCH(request: Request, { params }: { params: { id: string } })
{
	try {
		let userId = parseInt(params.id); // Пераўтварэнне ID з радка ў лік
		let body = await request.json(); // Атрымліваем цела запыту (імя карыстальніка)
		let updatedName = body.name;
		
		let 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[userIndex].name = updatedName;
		
		// Вяртаем абноўлены аб'ект карыстальніка
		return new Response(JSON.stringify(users[userIndex]), {
			headers: { 'Content-Type': 'application/json' },
			status: 200,
		});
	} catch (error) {
		console.error('Error:', error);
		return new Response(JSON.stringify({ message: 'Error updating user' }), {
			headers: { 'Content-Type': 'application/json' },
			status: 500,
			});
		}
	}

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