Merge pull request 'исправил клиент, пути в функциях, добавил переменную окружения' (#10) from dev into main

Reviewed-on: https://git.rustprogersteam.ru/PVHProject/PVHFrontend/pulls/10

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env.production
 
 # Editor directories and files
 .vscode/*

README.md

@@ -114,7 +114,6 @@ GET /products?categoryId=1&page=1&limit=9&size=110х2,2х500,110х2,2х1500&colo
       "id": 101,
       "name": "Труба ПВХ",
       "description": "бля бля",
-      "price": 799,
       "categoryId": 1,
       "images": ["/images/s23-1.jpg", "/images/s23-2.jpg"],
       "attributes": {
@@ -148,7 +147,6 @@ GET /api/products/101
   "id": 101,
   "name": "ПВХ труба",
   "description": "бля бля",
-  "price": 799,
   "categoryId": 1,
   "images": [
     "/images/s23-1.jpg",

src/api/client.ts

@@ -1,9 +1,42 @@
-import axios from "axios";
+import axios, { AxiosInstance } from 'axios';
 
-export const API_BASE =  "";
+class ApiClient {
-const client = axios.create({
+  private axiosInstance: AxiosInstance;
-  baseURL: API_BASE,
+
-  headers: { "Content-Type": "application/json" },
+  constructor(baseURL: string = import.meta.env.VITE_API_URL) {
+    this.axiosInstance = axios.create({
+      baseURL,
+      timeout: 10000,
+      headers: {
+        'Content-Type': 'application/json',
+      },
     });
 
-export default client;
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response?.status === 404) {
+          console.error('Resource not found:', error.config?.url);
+        } else if (error.response?.status === 500) {
+          console.error('Server error:', error.response?.data);
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  async get<T>(url: string): Promise<{ data: T }> {
+    const response = await this.axiosInstance.get<T>(url);
+    return { data: response.data };
+  }
+
+  async post<T>(
+    url: string,
+    data?: any,
+  ): Promise<{ data: T }> {
+    const response = await this.axiosInstance.post<T>(url, data);
+    return { data: response.data };
+  }
+}
+
+export const client = new ApiClient('/api');

src/components/PriceLisForm/PriceLisForm.tsx

@@ -7,10 +7,11 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import styles from "./ModalRequestForm.module.css";
 import Button from "../Button/Button";
 import axios from "axios";
+import { client } from "../../api/client";
 
 // ✅ Схема валидации
 const schema = yup.object().shape({
-  name: yup.string().required("Введите имя"),
+  name: yup.string().required("Введите ФИО"),
   email: yup.string().email("Некорректный Email").required("Введите Email"),
   phone: yup.string().min(18, "Введите корректный номер").required("Введите номер"),
 });
@@ -62,10 +63,8 @@ const PriceLisForm: React.FC<Props> = ({ open, onClose }) => {
 
   const sendToBackend = async (data: FormData): Promise<boolean> => {
     try{
-      const response = await axios.post("/api/requests", {
+      const response = await client.post<{success: boolean}>("/api/email", {
       ...data,
-      source: "website-form",
-      timestamp: new Date().toISOString(),
     })
 
       return response.data.success;
@@ -121,7 +120,7 @@ const PriceLisForm: React.FC<Props> = ({ open, onClose }) => {
           <div className={styles.field}>
             <input 
               className={styles.input} 
-              placeholder="Введите имя *" 
+              placeholder="Введите ФИО *" 
               {...register("name")}
               disabled={isSubmitting}
             />

src/features/catalog/categoriesSlice.ts

@@ -1,11 +1,11 @@
 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import type { Category } from "../../types/categories";
-import axios from "axios";
+import {client} from "../../api/client";
 
 export const fetchCategories = createAsyncThunk<Category[]>(
   "categories/fetchCategories",
   async () => {
-    const res = await axios.get<Category[]>("/api/categories");
+    const res = await client.get<Category[]>("/categories");
     return res.data;
   }
 );

src/features/catalog/productsSlice.ts

@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import type {PayloadAction} from "@reduxjs/toolkit";
-import client from "../../api/client";
+import {client} from "../../api/client";
 import type { Product } from "../../types/product";
 import axios from "axios";
 
@@ -42,7 +42,7 @@ export const fetchProductsByCategory = createAsyncThunk(
 export const fetchProductById = createAsyncThunk(
   "product/fetchById",
   async (id: string) => {
-    const response = await axios.get(`/api/products/${id}`);
+    const response = await client.get<Product>(`/products/${id}`);
     return response.data;
   }
 );

src/vite-env.d.ts

@@ -0,0 +1,8 @@
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string
+  readonly VITE_API_KEY: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

tsconfig.app.json

@@ -11,7 +11,7 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
+    "verbatimModuleSyntax": false,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",

vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     host: '0.0.0.0', // Слушаем все интерфейсы
     port: 5173,
-    allowedHosts: ['rustprogersteam.ru'],
+    allowedHosts: ['pvh.projects.rustprogersteam.ru'],
     strictPort: true, // Запрещаем автоматический выбор порта
     hmr: {
       clientPort: 5173, // Важно для HMR в Docker