api requests

NosatskyiK · Jun 16, 2024 · b8a1bd0 · b8a1bd0
1 parent bdf15f2
commit b8a1bd0
Show file tree

Hide file tree

Showing 17 changed files with 446 additions and 146 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,9 +3,8 @@ import { Route, Routes } from 'react-router-dom';
 import { AboutMe } from '@/components/aboutMe/AboutMe.component.tsx';
 import { LayoutPage } from '@/components/layoutComponent/Layout.component.tsx';
 import { PageNotFound } from '@/components/pageNotFound/PageNotFound.component.tsx';
-import { ProductList } from '@/components/productList/ProductList.component.tsx';
 import { ProductPage } from '@/components/productPage/ProductPage.component.tsx';
-import { products } from '@/data/ProductsData.ts';
+import { Products } from '@/components/products/Products.component.tsx';
 
 import './App.css';
 
@@ -14,7 +13,7 @@ function App() {
         <Routes>
             <Route path={'/'} element={<LayoutPage />}>
                 <Route index element={<AboutMe />} />
-                <Route path={'/product_list'} element={<ProductList products={products} />} />
+                <Route path={'/products'} element={<Products />} />
                 <Route path={'/product_page/:id'} element={<ProductPage />} />
                 <Route path={'/*'} element={<PageNotFound />} />
             </Route>

diff --git a/src/components/filtersBar/FiltersBar.component.tsx b/src/components/filtersBar/FiltersBar.component.tsx
@@ -2,29 +2,62 @@ import React from 'react';
 
 import searchIcon from '@/assets/img/searchIcon.svg?url';
 import { SortList } from '@/components/sortList/SortList.components.tsx';
-import type { FiltersBarProps } from '@/interface/interfaceProductFilters.ts';
+import type { FiltersBarProps, FiltersButtons } from '@/interface/interfaceProductFilters.ts';
 
 import styles from './filtersBar.module.css';
 
-export const FiltersBar: React.FC<FiltersBarProps> = ({ onCategoryChange, onSortChange }) => (
-    <section className={styles.filtersBar}>
-        <div className={styles.searchBar}>
-            <input className={styles.searchInput} type="text" placeholder="Search..." />
-            <button className={styles.searchButton}>
-                <img className={styles.searchIcon} src={searchIcon} alt="search icon" />
-            </button>
-        </div>
-        <div className={styles.filterButtons}>
-            <button className={styles.filterButton} onClick={() => onCategoryChange('Electronics')}>
-                Electronics
-            </button>
-            <button className={styles.filterButton} onClick={() => onCategoryChange('Shoes')}>
-                Shoes
-            </button>
-            <button className={styles.filterButton} onClick={() => onCategoryChange('Clothes')}>
-                Clothes
-            </button>
-        </div>
-        <SortList onSortChange={onSortChange} />
-    </section>
-);
+export const FiltersBar: React.FC<FiltersBarProps> = ({
+    query,
+    handleQueryParameter,
+    setFilter,
+    setCurrentPage,
+    handleSearchButtonClick,
+    searchInput,
+    onSortChange,
+}) => {
+    const filterButtonsObject: FiltersButtons[] = [
+        {
+            name: 'Shoes',
+            categoryId: 3,
+        },
+        {
+            name: 'Electronics',
+            categoryId: 2,
+        },
+        {
+            name: 'Clothes',
+            categoryId: 1,
+        },
+    ];
+    return (
+        <section className={styles.filtersBar}>
+            <div className={styles.searchBar}>
+                <input
+                    className={styles.searchInput}
+                    onChange={handleQueryParameter}
+                    type="text"
+                    value={searchInput}
+                    placeholder="Search..."
+                />
+                <button className={styles.searchButton} onClick={() => handleSearchButtonClick()}>
+                    <img className={styles.searchIcon} src={searchIcon} alt="search icon" />
+                </button>
+            </div>
+            <div className={styles.filterButtons}>
+                {filterButtonsObject.map((filterButton: FiltersButtons) => (
+                    <button
+                        key={filterButton.categoryId}
+                        onClick={() => {
+                            setFilter(filterButton.categoryId);
+                            setCurrentPage(1);
+                        }}
+                        className={styles.filterButton}
+                    >
+                        {filterButton.name}
+                    </button>
+                ))}
+            </div>
+            <SortList onSortChange={onSortChange} />
+        </section>
+    );
+};
diff --git a/src/components/filtersBar/filtersBar.module.css b/src/components/filtersBar/filtersBar.module.css
@@ -41,6 +41,10 @@
   box-sizing: border-box;
 }
 
+.searchInput:focus {
+  outline: none;
+}
+
 .searchButton {
   position: absolute;
   top: 0;
@@ -51,6 +55,7 @@
   height: 38px;
   border: none;
   padding: 0;
+  cursor: pointer;
 }
 
 /* filter buttons */

diff --git a/src/components/header/Header.component.tsx b/src/components/header/Header.component.tsx
@@ -18,14 +18,20 @@ export const HeaderComponent: React.FC<InterfacePageChange> = ({ changeTheme, ac
         <div className={styles.switcherTheme}>
             <button
                 className={clsx(styles.themeDayBtn, { [styles.activeTheme]: activeTheme === 'light' })}
-                onClick={() => changeTheme('light')}
+                onClick={() => {
+                    changeTheme('light');
+                    localStorage.setItem('themeUser', 'light');
+                }}
             >
                 <SvgLightThemeIcon activeTheme={activeTheme} />
             </button>
             <div className={styles.vertLine}></div>
             <button
                 className={clsx(styles.themeNightBtn, { [styles.activeTheme]: activeTheme === 'dark' })}
-                onClick={() => changeTheme('dark')}
+                onClick={() => {
+                    changeTheme('dark');
+                    localStorage.setItem('themeUser', 'dark');
+                }}
             >
                 <SvgDarkThemeIcon activeTheme={activeTheme} />
             </button>
@@ -38,7 +44,7 @@ export const HeaderComponent: React.FC<InterfacePageChange> = ({ changeTheme, ac
                     </NavLink>
                 </li>
                 <li className={styles.menuItem}>
-                    <NavLink className={({ isActive }) => clsx(styles.menuBtn, { [styles.activePage]: isActive })} to="/product_list">
+                    <NavLink className={({ isActive }) => clsx(styles.menuBtn, { [styles.activePage]: isActive })} to="/products">
                         Products
                     </NavLink>
                 </li>

diff --git a/src/components/layoutComponent/Layout.component.tsx b/src/components/layoutComponent/Layout.component.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { clsx } from 'clsx';
@@ -8,8 +8,14 @@ import { HeaderComponent } from '@/components/header/Header.component.tsx';
 
 export const LayoutPage = () => {
     const [theme, setTheme] = useState('light');
-    const themeClass = clsx(`${theme}Theme`);
 
+    useEffect(() => {
+        const themeUser = localStorage.getItem('themeUser');
+        if (themeUser) {
+            setTheme(themeUser);
+        }
+    }, []);
+    const themeClass = clsx(`${theme}Theme`);
     return (
         <div className={themeClass}>
             <HeaderComponent changeTheme={setTheme} activeTheme={theme} />

diff --git a/src/components/loading/Loading.component.tsx b/src/components/loading/Loading.component.tsx
@@ -0,0 +1,8 @@
+import styles from '@/components/loading/loading.module.css';
+
+export const Loading = () => (
+    <div className={styles.containerLoader}>
+        <span className={styles.loader}>Loading...</span>
+        <div className={styles.loadingLine}></div>
+    </div>
+);