diff --git a/front/README.md b/front/README.md index 4c83312..9b24cc2 100644 --- a/front/README.md +++ b/front/README.md @@ -1,17 +1,158 @@ -# React + TypeScript + Vite +# API -## fetchCategories: +## Категории -* get запрос по /api/categories +### Получение всех категорий +**Запрос:** `GET /api/categories` -* возвращает массив объектов типа Category +**Получаю:** +```json +[ + { + "id": 1, + "name": "для внутренней канализации", + "image": "/images/hghfghgd.jpg", + "atributes": [ + { + "id": 1, + "name": "цвет", + "vals": [ + { "id": 1001, "val": "оранжевый" }, + { "id": 1002, "val": "серый" }, + ] + }, + { + "id": 2, + "name": "размер", + "vals": [ + { "id": 2001, "val": "..." }, + { "id": 2002, "val": "...." }, + { "id": 2003, "val": "...." } + ] + }, + { + "id": 2, + "name": "кол-во в упаковке", + "vals": [ + { "id": 2001, "val": "2" }, + { "id": 2002, "val": "4" }, + ] + } + ] + }, + { + "id": 1, + "name": "для внешней канализации", + "image": "/images/sfjsjsjf.jpg", + "atributes": [ + { + "id": 1, + "name": "цвет", + "vals": [ + { "id": 1001, "val": "оранжевый" }, + { "id": 1002, "val": "серый" }, + ] + }, + { + "id": 2, + "name": "размер", + "vals": [ + { "id": 2001, "val": "..." }, + { "id": 2002, "val": "...." }, + { "id": 2003, "val": "...." } + ] + }, + { + "id": 2, + "name": "кол-во в упаковке", + "vals": [ + { "id": 2001, "val": "2" }, + { "id": 2002, "val": "4" }, + ] + } + ] + } +] +``` +## Товары (Products) -## fetchProductsByCategory +### Получение товаров по id категории с фильтрацией +**Запрос:** `GET /products` -* параметры: categoryId, page = 1, limit = 9, filters: string | number | (string | number)[] +**Параметры запроса (Query Parameters):** -* ожидаю: { items: Product[], total: number, page: number, limit: number } Сериализация превратит это в query-параметры +| Параметр | Тип | Обязательный | Описание | Пример | +|----------|-----|--------------|----------|---------| +| `categoryId` | number | Да | ID категории | `categoryId=1` | +| `page` | number | Нет | Номер страницы (по умолчанию 1) | `page=2` | +| `limit` | number | Нет | Количество товаров на странице (по умолчанию 9) | `limit=12` | +| `filters` | object | Нет | Фильтры по атрибутам | `size=110х2,2х500&color=оранжевый` | +**Примеры запросов:** +1. **Базовый запрос:** +``` +GET /products?categoryId=1&page=1&limit=9 +``` +2. **С фильтрами (одиночные значения):** +``` +GET /products?categoryId=1&page=1&limit=9&size=110х2,2х500&color=оранжевый +``` + +3. **С фильтрами (массив значений):** +``` +GET /products?categoryId=1&page=1&limit=9&size=110х2,2х500,110х2,2х1500&color=серый +``` + +**Получаю:** +```json +{ + "items": [ + { + "id": 101, + "name": "Труба ПВХ", + "description": "бля бля", + "price": 799, + "categoryId": 1, + "images": ["/images/s23-1.jpg", "/images/s23-2.jpg"], + "attributes": { + "color": "серый", + "amount": "4", + "size": "110х2,2х500" + }, + "inStock": true, + } + ], + "total": 45, + "page": 1, + "limit": 9 +} +``` + +### Получение товаров по id +**Запрос:** `GET/product/fetchById` + +**Параметры запроса:** +- `id` (path parameter) - уникальный идентификатор товара + +**Пример запроса:** +``` +GET /api/products/101 +``` + +**Получаю:** +```json +{ + "id": 101, + "name": "ПВХ труба", + "description": "бля бля", + "price": 799, + "categoryId": 1, + "images": [ + "/images/s23-1.jpg", + "/images/s23-2.jpg", + "/images/s23-3.jpg" + ] +} \ No newline at end of file diff --git a/front/src/features/catalog/categoriesSlice.ts b/front/src/features/catalog/categoriesSlice.ts index 4c38a87..4c0685c 100644 --- a/front/src/features/catalog/categoriesSlice.ts +++ b/front/src/features/catalog/categoriesSlice.ts @@ -5,7 +5,7 @@ import axios from "axios"; export const fetchCategories = createAsyncThunk( "categories/fetchCategories", async () => { - const res = await axios.get("/api/categories"); + const res = await axios.get("/api/categories"); return res.data; } ); diff --git a/front/src/features/catalog/productsSlice.ts b/front/src/features/catalog/productsSlice.ts index acbabd6..45b9af2 100644 --- a/front/src/features/catalog/productsSlice.ts +++ b/front/src/features/catalog/productsSlice.ts @@ -11,6 +11,13 @@ interface FetchParams { filters?: Record; } +interface FetchResponce{ + items: Product[], + total: number, + page: number, + limit: number, +} + export const fetchProductsByCategory = createAsyncThunk( "products/fetchByCategory", async (params: FetchParams) => { @@ -26,7 +33,7 @@ export const fetchProductsByCategory = createAsyncThunk( else qp.append(k, String(v)); }); } - const res = await client.get(`/products?${qp.toString()}`); + const res = await client.get(`/products?${qp.toString()}`); // ожидаем { items: Product[], total: number, page: number, limit: number } return res.data; }