TypeScript и ООП. Продолжение. Проектирование архитектуры сервиса "Web-ларёк"

README.md

@@ -1,5 +1,5 @@
-# x курс
-# Фамилия Имя Отчество
+# 3 курс
+# Азанов Никита Александрович
 # Проектная работа "Веб-ларек"
 
 Стек: HTML, SCSS, TS, Webpack
@@ -11,11 +11,11 @@
 
 Важные файлы:
 - src/pages/index.html — HTML-файл главной страницы
-- src/types/index.ts — файл с типами
 - src/index.ts — точка входа приложения
 - src/scss/styles.scss — корневой файл стилей
 - src/utils/constants.ts — файл с константами
 - src/utils/utils.ts — файл с утилитами
+- src/types — типы и модели
 
 ## Установка и запуск
 Для установки и запуска проекта необходимо выполнить команды
@@ -42,3 +42,61 @@ npm run build
 ```
 yarn build
 ```
+
+## Структуры данных
+### Типы
+#### IApi
+Описание: интерфейс, который определяет методы для взаимодействия с API:
+- getProducts(): возвращает список продуктов (IProduct[]) с помощью асинхронного метода (Promise).
+- getProductById(id: string): возвращает продукт по его идентификатору (id) с помощью асинхронного метода (Promise).
+- postOrder(order: IOrder): отправляет заказ (order) и возвращает результат асинхронно (Promise).
+
+#### IAppState
+Описание: интерфейс, который определяет структуру состояния приложения:
+- basket: объект типа IBasketModel, который содержит информацию о корзине.
+- order: объект типа IOrderModel, который содержит информацию о заказе.
+- catalog: массив объектов типа ICatalogModel, который содержит информацию о каталоге продуктов.
+
+#### IBasket
+Описание: интерфейс, который определяет структуру корзины:
+- items: объект типа Map<string, number>, который содержит информацию о товарах в корзине и их количествах.
+- totalPrice: число, которое представляет общую стоимость товаров в корзине.
+
+#### IOrder
+Описание: интерфейс, который определяет структуру заказа:
+- payment: строка, которая представляет способ оплаты.
+- email: строка, которая представляет электронную почту покупателя.
+- phone: строка, которая представляет телефон покупателя.
+- address: строка, которая представляет адрес доставки.
+- total: число, которое представляет общую стоимость заказа.
+- items: массив строк, который содержит идентификаторы товаров в заказе.
+
+#### IProduct
+Описание: интерфейс, который определяет структуру товара:
+- id: строка, которая представляет идентификатор товара.
+- description: строка, которая представляет описание товара.
+- image: строка, которая представляет URL изображения товара.
+- title: строка, которая представляет название товара.
+- category: строка, которая представляет категорию товара.
+- price: число, которое представляет цен
+
+### Модели
+#### IBasketModel
+Описание: интерфейс, который определяет методы для работы с корзиной:
+- basket: объект типа IBasket, который содержит информацию о корзине.
+- add(id: string): добавляет товар с указанным id в корзину.
+- changeAmount(id: string, amount: number): изменяет количество товара с указанным id в корзине.
+- remove(id: string): удаляет товар с указанным id из корзины.
+- clear(): очищает корзину.
+
+#### IOrderModel
+Описание: интерфейс, который определяет методы для работы с заказом:
+- updateField(name: string, value: any): обновляет значение поля с указанным name в заказе.
+- clearField(name: string): очищает значение поля с указанным name в заказе.
+- clear(): очищает заказ.
+
+#### ICatalogModel
+Описание: интерфейс, который определяет структуру каталога продуктов и методы для работы с ним:
+- products: массив объектов типа IProduct, который содержит список всех продуктов в каталоге.
+- getAll(): возвращает список всех продуктов в каталоге с помощью асинхронного метода (Promise).
+- getProduct(id: string): возвращает продукт по его идентификатору (id) с помощью асинхронного метода (Promise).

src/types/api.tsx

@@ -0,0 +1,8 @@
+import { IOrder } from './order';
+import {IProduct} from "./product";
+
+export interface IApi {
+	getProducts(): Promise<IProduct[]>;
+	getProductById(id: string): Promise<IProduct>;
+	postOrder(order: IOrder): Promise<any>;
+}

src/types/appState.tsx

@@ -0,0 +1,9 @@
+import { IBasketModel} from './basket';
+import { IOrderModel} from './order';
+import { ICatalogModel } from './product';
+
+export interface IAppState {
+	basket: IBasketModel;
+	order: IOrderModel;
+	catalog: ICatalogModel[];
+}

src/types/basket.tsx

@@ -0,0 +1,12 @@
+export interface IBasket {
+	items: Map<string, number>,
+	totalPrice: number,
+}
+
+export interface IBasketModel {
+	basket: IBasket;
+	add(id: string): void;
+	changeAmount(id: string, amount: number): void;
+	remove(id: string): void;
+	clear(): void;
+}

src/types/order.tsx

@@ -0,0 +1,14 @@
+export interface IOrder {
+	payment: string;
+	email: string;
+	phone: string;
+	address: string;
+	total: number;
+	items: string[];
+}
+
+export interface IOrderModel {
+	updateField(name: string, value: any): void;
+	clearField(name: string): void;
+	clear(): void;
+}

src/types/product.tsx

@@ -0,0 +1,15 @@
+export interface IProduct {
+	id: string;
+	description: string;
+	image: string;
+	title: string;
+	category: string;
+	price: number;
+	inBasket: boolean;
+}
+
+export interface ICatalogModel {
+	products: IProduct[];
+	getAll(): IProduct[];
+	getProduct(id: string): IProduct;
+}