надо сделать это: Form submission:
● Values are sent to the server and stored in memory.
● The request payload should contain only what the user
filled/changed.
○ On create: if a user filled 4 fields, the request payload must
contain only 4 fields.
○ On edit: if a user changed only one field, the request
payload must contain 1 field. Как мне проверить в запросах что передаётся 
import { useEffect, useState } from 'react';
import { getItems } from '../api';
import { ItemTable } from '../components/ItemTable';
import { Link } from 'react-router-dom';

export const ListItemsPage = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    getItems().then(response => setItems(response.data));
  }, []);

  return (
    <div>
      <h1>Warehouse Items</h1>
      <ItemTable items={items} />
      <Link to="/create">Create New Item</Link>
    </div>
  );
};
import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useEffect } from 'react';
const schema = yup.object({
  name: yup.string().required('Name is required').max(50, 'Max length is 50'),
  category: yup.string().required('Category is required'),
  quantity: yup
    .number()
    .typeError('Quantity must be a number')
    .required('Quantity is required')
    .min(1, 'Quantity must be at least 1'),
  location: yup.string().notRequired(),
  supplier: yup.string().notRequired(),
  supplierLocation: yup.string().notRequired(),
  showPriceDetails: yup
    .string()
    .oneOf(['yes', 'no'], 'Please select an option')
    .required('Please select an option'),

  priceType: yup
    .string()
    .when('showPriceDetails', {
      is: 'yes',
      then: schema => schema.required('Price Type is required'),
      otherwise: schema => schema.notRequired(),
    }),

  price: yup
    .number()
    .transform((value, originalValue) => (originalValue === '' ? undefined : value))
    .when('showPriceDetails', {
      is: 'yes',
      then: schema =>
        schema
          .required('Price is required')
          .typeError('Price must be a number')
          .min(1, 'Price must be at least 1'),
      otherwise: schema => schema.notRequired(),
    }),

  endpoints: yup.array().of(
    yup.object({
      endpoint: yup.string().required('Endpoint is required'),
      status: yup.string().required('Status is required'),
    })
  ),
});
export const ItemForm = ({ defaultValues, onSubmit }) => {
  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors },
    reset,
  } = useForm({
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'endpoints',
  });

  const showPriceDetails = watch('showPriceDetails', 'no') === 'yes';

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  const handleFormSubmit = (data) => {
    // Создаем объект для хранения только измененных значений
    const changes = {};

    // Проверяем каждое поле на наличие изменений
    Object.keys(data).forEach((key) => {
      if (JSON.stringify(data[key]) !== JSON.stringify(defaultValues[key])) {
        changes[key] = data[key];
      }
    });

    // Отправляем только измененные данные
    onSubmit(changes);
  };

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit(handleFormSubmit)} className="form-wrapper">
        {/* Сетка для имени, категории и количества */}
        <div className="form-grid grid-3">
          <div className="form-group">
            <label>Name:</label>
            <input
              {...register('name')}
              className={errors.name ? 'input-error' : ''}
            />
            {errors.name && <p className="error-message">{errors.name.message}</p>}
          </div>

          <div className="form-group">
            <label>Category:</label>
            <select
              {...register('category')}
              className={errors.category ? 'input-error' : ''}
            >
              <option value="">Select category</option>
              <option value="Electronics">Electronics</option>
              <option value="Furniture">Furniture</option>
              <option value="Clothing">Clothing</option>
              <option value="Food">Food</option>
              <option value="Toys">Toys</option>
              <option value="Books">Books</option>
              <option value="Sports">Sports</option>
            </select>
            {errors.category && (
              <p className="error-message">{errors.category.message}</p>
            )}
          </div>

          <div className="form-group">
            <label>Quantity:</label>
            <input
              type="number"
              {...register('quantity')}
              className={errors.quantity ? 'input-error' : ''}
            />
            {errors.quantity && (
              <p className="error-message">{errors.quantity.message}</p>
            )}
          </div>
        </div>

        {/* Сетка для поставщика и его локации */}
        <div className="form-grid grid-2">
          <div className="form-group">
            <label>Supplier (Optional):</label>
            <input
              {...register('supplier')}
              className={errors.supplier ? 'input-error' : ''}
            />
            {errors.supplier && (
              <p className="error-message">{errors.supplier.message}</p>
            )}
          </div>

          <div className="form-group">
            <label>Supplier Location (Optional):</label>
            <input
              {...register('supplierLocation')}
              className={errors.supplierLocation ? 'input-error' : ''}
            />
            {errors.supplierLocation && (
              <p className="error-message">{errors.supplierLocation.message}</p>
            )}
          </div>
        </div>

        {/* Сетка для ценовых данных */}
        <div className="form-group">
          <label>Show Price Details?</label>
          <div className="radio-group">
            <label>
              <input
                type="radio"
                value="yes"
                {...register('showPriceDetails')}
                defaultChecked={defaultValues?.showPriceDetails === 'yes'}
              />
              Yes
            </label>
            <label>
              <input
                type="radio"
                value="no"
                {...register('showPriceDetails')}
                defaultChecked={defaultValues?.showPriceDetails !== 'yes'}
              />
              No
            </label>
          </div>
          {errors.showPriceDetails && (
            <p className="error-message">{errors.showPriceDetails.message}</p>
          )}
        </div>

        {showPriceDetails && (
          <div className="form-grid grid-2">
            <div className="form-group">
              <label>Type:</label>
              <select
                {...register('priceType')}
                className={errors.priceType ? 'input-error' : ''}
              >
                <option value="">Select type</option>
                <option value="For Sale">For Sale</option>
                <option value="For Buying">For Buying</option>
              </select>
              {errors.priceType && (
                <p className="error-message">{errors.priceType.message}</p>
              )}
            </div>

            <div className="form-group">
              <label>Price:</label>
              <input
                type="number"
                {...register('price')}
                className={errors.price ? 'input-error' : ''}
                placeholder="Enter price"
              />
              {errors.price && (
                <p className="error-message">{errors.price.message}</p>
              )}
            </div>
          </div>
        )}

        {/* Сетка для Endpoints */}
        <div className="form-group full-width">
          <h3>Endpoints</h3>
          {fields.map((endpoint, index) => (
            <div key={endpoint.id} className="form-grid grid-2">
              <div className="form-group">
                <label>Endpoint {index + 1}:</label>
                <input
                  {...register(`endpoints.${index}.endpoint`)}
                  placeholder={`Endpoint ${index + 1}`}
                  className={errors.endpoints?.[index]?.endpoint ? 'input-error' : ''}
                />
                {errors.endpoints?.[index]?.endpoint && (
                  <p className="error-message">
                    {errors.endpoints[index].endpoint.message}
                  </p>
                )}
              </div>

              <div className="form-group">
                <label>Status:</label>
                <select
                  {...register(`endpoints.${index}.status`)}
                  className={errors.endpoints?.[index]?.status ? 'input-error' : ''}
                >
                  <option value="">Select status</option>
                  <option value="Delivering">Delivering</option>
                  <option value="Delivered">Delivered</option>
                  <option value="Pending">Pending</option>
                  <option value="Delayed">Delayed</option>
                  <option value="Canceled">Canceled</option>
                </select>
                {errors.endpoints?.[index]?.status && (
                  <p className="error-message">
                    {errors.endpoints[index].status.message}
                  </p>
                )}
              </div>

              <button
                type="button"
                className="remove-endpoint-button"
                onClick={() => remove(index)}
              >
                Remove Endpoint
              </button>
            </div>
          ))}
          <button
            type="button"
            onClick={() => append({ endpoint: '', status: '' })}
            className="add-endpoint-button"
          >
            Add Endpoint
          </button>
        </div>

        <div className="form-actions">
          <button type="submit" className="action-button">Save</button>
          <button type="button" className="action-button">Back to List</button>
        </div>
      </form>
    </div>
  );
}; import express from "express";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json());

let warehouseItems = [
 {
  id: 1,
  name: "Laptop",
  category: "Electronics",
  quantity: 5,
  location: "Warehouse A",
  supplier: "TechCorp",
  supplierLocation: "New York",
  price: 1200,
  endpoints: [
   { endpoint: "Endpoint 1", status: "Pending" },
   { endpoint: "Endpoint 2", status: "Delivered" },
  ],
 },
 {
  id: 2,
  name: "Office Chair",
  category: "Furniture",
  quantity: 15,
  location: "Warehouse B",
  supplier: "FurniturePro",
  supplierLocation: "San Francisco",
  price: 350,
  endpoints: [
   { endpoint: "Endpoint 1", status: "Delivering" },
   { endpoint: "Endpoint 2", status: "Delayed" },
  ],
 },
 {
  id: 3,
  name: "Tennis Racket",
  category: "Sports",
  quantity: 20,
  location: "Warehouse C",
  supplier: "SportingGoods",
  supplierLocation: "Chicago",
  price: 150,
  endpoints: [
   { endpoint: "Endpoint 1", status: "Pending" },
   { endpoint: "Endpoint 2", status: "Canceled" },
  ],
 },
];

app.get("/items", (req, res) => {
 res.json(warehouseItems);
});

app.post("/items", (req, res) => {
 const newItem = { id: warehouseItems.length + 1, ...req.body };
 warehouseItems.push(newItem);
 res.status(201).json(newItem);
});

app.put("/items/:id", (req, res) => {
 const id = parseInt(req.params.id);
 const updatedFields = req.body;
 warehouseItems = warehouseItems.map((item) => (item.id === id ? { ...item, ...updatedFields } : item));
 res.json({ message: "Item updated" });
});

const PORT = 5000;
app.listen(PORT, () => {
 console.log(`Server running on port ${PORT}`);
});