diff --git a/reactapp/src/App.tsx b/reactapp/src/App.tsx index 5161f20..f0c2a8f 100644 --- a/reactapp/src/App.tsx +++ b/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([]); + const [selectedCategory, setSelectedCategory] = useState('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([ - { - 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('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') => { diff --git a/reactapp/src/assets/icons/profile-avatar.svg b/reactapp/src/assets/icons/profile-avatar.svg new file mode 100644 index 0000000..5bfb508 --- /dev/null +++ b/reactapp/src/assets/icons/profile-avatar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/reactapp/src/assets/img/profile-avatar.png b/reactapp/src/assets/img/profile-avatar.png deleted file mode 100644 index ac55c7a..0000000 Binary files a/reactapp/src/assets/img/profile-avatar.png and /dev/null differ diff --git a/reactapp/src/components/ProductCard.tsx b/reactapp/src/components/ProductCard.tsx index e0f9946..3d6d257 100644 --- a/reactapp/src/components/ProductCard.tsx +++ b/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(
- + {product.title}
- {PriceAsString} + {priceAsString}
- {product.name} + {product.title}
) diff --git a/reactapp/src/components/ProfileInfo.tsx b/reactapp/src/components/ProfileInfo.tsx index 87b1555..fcbdb9f 100644 --- a/reactapp/src/components/ProfileInfo.tsx +++ b/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( -
+
Роман Константинов
diff --git a/reactapp/src/utils/types.ts b/reactapp/src/utils/types.ts index 5196dd7..f18a445 100644 --- a/reactapp/src/utils/types.ts +++ b/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;