Coding template request to api and other fixes

reactapp/src/App.tsx

@@ -2,7 +2,6 @@ import HomePage from "./pages/HomePage";
 import PaymentPage from "./pages/PaymentPage";
 import ProductPage from "./pages/ProductPage";
 import ProfilePage from "./pages/ProfilePage";
-import productImage from './assets/img/product-image-1.webp';
 import ScamPage from "./pages/ScamPage";
 import InfoPage from "./pages/InfoPage";
 import Header from "./components/Header";
@@ -21,17 +20,17 @@ export default function App() {
     isPopupMapVisible: false,
   });
 
-  const [details, setDetails] = useState([]);
-  
+  const [products, setProducts] = useState<Product[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<Category | 'all'>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+
   useEffect(() => {
-    let data;
-    axios.get('http://localhost:8000')
-      .then(res => {
-        data = res.data;
-        setDetails(data);
+    axios.get('http://your-api-endpoint/products')
+      .then(response => {
+        setProducts(response.data);
       })
-      .catch(err => {
-        console.log(err);
+      .catch(error => {
+        console.error('There was an error fetching the products', error);
       });
   }, []);
 
@@ -42,89 +41,13 @@ export default function App() {
     }));
   };
 
-  const [products, setProducts] = useState<Product[]>([
-    {
-      id: 1,
-      name: 'Шоколадка Mr. Beast',
-      category: 'foods',
-      price: 2000,
-      image: {productImage}
-    },
-    {
-      id: 2,
-      name: 'Салат',
-      category: 'foods',
-      price: 200,
-      image: {productImage}
-    },
-    {
-      id: 3,
-      name: 'Футболка',
-      category: 'clothes',
-      price: 1500,
-      image: {productImage}
-    },
-    {
-      id: 4,
-      name: 'Мороженое',
-      category: 'foods',
-      price: 150,
-      image: {productImage}
-    },
-    {
-      id: 5,
-      name: 'Фигурка',
-      category: 'figures',
-      price: 1799,
-      image: {productImage}
-    },
-    {
-      id: 6,
-      name: 'Трансформер',
-      category: 'toys',
-      price: 19999,
-      image: {productImage}
-    },
-    {
-      id: 7,
-      name: 'Старая игрушка Баз-Лайтер',
-      category: 'toys',
-      price: 2564235634563456,
-      image: {productImage}
-    },
-    {
-      id: 8,
-      name: 'Комплект одежды',
-      category: 'clothes',
-      price: 756,
-      image: {productImage}
-    },
-    {
-      id: 9,
-      name: 'Книга про ботанику',
-      category: 'books',
-      price: 2345,
-      image: {productImage}
-    },
-    {
-      id: 10,
-      name: 'Книга белая',
-      category: 'books',
-      price: 150,
-      image: {productImage}
-    },
-  ]);
-  const [selectedCategory, setSelectedCategory] = useState<Category | 'all'>('all');
-
-  const [searchQuery, setSearchQuery] = useState('');
-
   const handleSearchChange = (query: string) => {
     setSearchQuery(query);
   };
 
   const filteredProducts = products.filter(product =>
     (selectedCategory === 'all' || product.category === selectedCategory) &&
-    product.name.toLowerCase().includes(searchQuery.toLowerCase())
+    product.title.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
   const handleSelectCategory = (category: Category | 'all') => {

reactapp/src/assets/icons/profile-avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240.924-268.307q51-37.846 111.115-59.769Q412.154-349.999 480-349.999t127.961 21.923q60.115 21.923 111.115 59.769 37.308-41 59.116-94.923Q800-417.154 800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 62.846 21.808 116.77 21.808 53.923 59.116 94.923Zm239.088-181.694q-54.781 0-92.396-37.603-37.615-37.604-37.615-92.384 0-54.781 37.603-92.396 37.604-37.615 92.384-37.615 54.781 0 92.396 37.603 37.615 37.604 37.615 92.384 0 54.781-37.603 92.396-37.604 37.615-92.384 37.615Zm-.012 350q-79.154 0-148.499-29.77-69.346-29.769-120.654-81.076-51.307-51.308-81.076-120.654-29.77-69.345-29.77-148.499t29.77-148.499q29.769-69.346 81.076-120.654 51.308-51.307 120.654-81.076 69.345-29.77 148.499-29.77t148.499 29.77q69.346 29.769 120.654 81.076 51.307 51.308 81.076 120.654 29.77 69.345 29.77 148.499t-29.77 148.499q-29.769 69.346-81.076 120.654-51.308 51.307-120.654 81.076-69.345 29.77-148.499 29.77ZM480-160q54.154 0 104.423-17.423 50.27-17.423 89.27-48.731-39-30.154-88.116-47Q536.462-290.001 480-290.001q-56.462 0-105.77 16.654-49.308 16.654-87.923 47.193 39 31.308 89.27 48.731Q425.846-160 480-160Zm0-349.999q29.846 0 49.924-20.077 20.077-20.078 20.077-49.924t-20.077-49.924Q509.846-650.001 480-650.001t-49.924 20.077Q409.999-609.846 409.999-580t20.077 49.924q20.078 20.077 49.924 20.077ZM480-580Zm0 355Z" fill="#CCC5B9"/></svg>

reactapp/src/components/ProductCard.tsx

@@ -6,17 +6,17 @@ interface ProductCardProps {
   }
 
 export default function ProductCard({ product }: ProductCardProps) {
-    const PriceAsString = product.price.toString();
+    const priceAsString = product.price.toLocaleString('ru-RU');
     
     return(
         <article className="product-article">
-            <img src={product.image} alt="" className="product-article__img"/>
+            <img src={product.image} alt={product.title} className="product-article__img"/>
             <h5 className="product-article__price-h5">
-                <span>{PriceAsString}</span>
+                <span>{priceAsString}</span>
                 <span>₽</span>
             </h5>
             <h6 className="product-article__name-h6">
-                {product.name}
+                {product.title}
             </h6>
         </article>
     )

reactapp/src/components/ProfileInfo.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import ProfileAvatar from '../assets/img/profile-avatar.png';
+import ProfileAvatar from '../assets/icons/profile-avatar.svg';
 import '../ProfileStyle.scss';
 
 export default function ProfileInfo() {
     return(
-        <div className="profile-section__info-div">
+        <div className="profile-page__info-div">
             <img src={ProfileAvatar} alt="" className="info-div__img"/>
             <span>Роман Константинов</span>
         </div>

reactapp/src/utils/types.ts

@@ -2,7 +2,7 @@ export type Category = 'toys' | 'clothes' | 'figures' | 'foods' | 'books';
 
 export interface Product {
   id: number;
-  name: string;
+  title: string;
   category: Category;
   price: number;
   image: any;