Added new functional

NosatskyiK · Jun 8, 2024 · c1be127 · c1be127
1 parent 693c22c
commit c1be127
Show file tree

Hide file tree

Showing 19 changed files with 750 additions and 407 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,37 +1,24 @@
-import { useState } from 'react';
-
-import { clsx } from 'clsx';
+import { Route, Routes } from 'react-router-dom';
 
 import { AboutMe } from '@/components/aboutMe/AboutMe.component.tsx';
-import { FiltersBar } from '@/components/filtersBar/FiltersBar.component.tsx';
-import { FooterComponent } from '@/components/footer/Footer.component.tsx';
-import { HeaderComponent } from '@/components/header/Header.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 './App.css';
 
 function App() {
-    const [activePage, setActivePage] = useState('about');
-    const [theme, setTheme] = useState('light');
-    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-    const [sortCriteria, setSortCriteria] = useState('Price (High - Low)');
-    const themeClass = clsx(`${theme}Theme`);
-
     return (
-        <div className={themeClass}>
-            <HeaderComponent changeTheme={setTheme} activeTheme={theme} onPageChange={setActivePage} activePage={activePage} />
-            <>
-                {activePage === 'about' && <AboutMe />}
-                {activePage === 'products' && (
-                    <>
-                        <FiltersBar onCategoryChange={setSelectedCategory} onSortChange={setSortCriteria} />
-                        <ProductList products={products} selectedCategory={selectedCategory} sortCriteria={sortCriteria} />
-                    </>
-                )}
-            </>
-            <FooterComponent />
-        </div>
+        <Routes>
+            <Route path={'/'} element={<LayoutPage />}>
+                <Route index element={<AboutMe />} />
+                <Route path={'/product_list'} element={<ProductList products={products} />} />
+                <Route path={'/product_page/:id'} element={<ProductPage />} />
+                <Route path={'/*'} element={<PageNotFound />} />
+            </Route>
+        </Routes>
     );
 }
 

diff --git a/src/components/header/Header.component.tsx b/src/components/header/Header.component.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 
 import { clsx } from 'clsx';
 
@@ -11,7 +12,7 @@ import type { InterfacePageChange } from '@/interface/interfacePageChange.ts';
 
 import styles from './header.module.css';
 
-export const HeaderComponent: React.FC<InterfacePageChange> = ({ onPageChange, activePage, changeTheme, activeTheme }) => (
+export const HeaderComponent: React.FC<InterfacePageChange> = ({ changeTheme, activeTheme }) => (
     <header className={styles.header}>
         <img className={styles.logoMA} src={logoMA} alt="Logo Masters academy" />
         <div className={styles.switcherTheme}>
@@ -32,20 +33,14 @@ export const HeaderComponent: React.FC<InterfacePageChange> = ({ onPageChange, a
         <nav>
             <ul className={styles.navMenu}>
                 <li className={styles.menuItem}>
-                    <button
-                        className={clsx(styles.menuBtn, { [styles.activePage]: activePage === 'about' })}
-                        onClick={() => onPageChange('about')}
-                    >
+                    <NavLink className={({ isActive }) => clsx(styles.menuBtn, { [styles.activePage]: isActive })} to="/">
                         About
-                    </button>
+                    </NavLink>
                 </li>
                 <li className={styles.menuItem}>
-                    <button
-                        className={clsx(styles.menuBtn, { [styles.activePage]: activePage === 'products' })}
-                        onClick={() => onPageChange('products')}
-                    >
+                    <NavLink className={({ isActive }) => clsx(styles.menuBtn, { [styles.activePage]: isActive })} to="/product_list">
                         Products
-                    </button>
+                    </NavLink>
                 </li>
             </ul>
         </nav>

diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
@@ -52,16 +52,16 @@
   font-size: 16px;
   font-weight: 500;
   line-height: 20px;
-  background-color: unset;
   border: none;
   cursor: pointer;
+  text-decoration: none;
 }
 
 .activePage {
   font-weight: 700;
 }
 
-/* Store user authorization and cart */
+/* Store productPage authorization and cart */
 
 .accountOptions {
   display: flex;

diff --git a/src/components/layoutComponent/Layout.component.tsx b/src/components/layoutComponent/Layout.component.tsx
@@ -0,0 +1,20 @@
+import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import { clsx } from 'clsx';
+
+import { FooterComponent } from '@/components/footer/Footer.component.tsx';
+import { HeaderComponent } from '@/components/header/Header.component.tsx';
+
+export const LayoutPage = () => {
+    const [theme, setTheme] = useState('light');
+    const themeClass = clsx(`${theme}Theme`);
+
+    return (
+        <div className={themeClass}>
+            <HeaderComponent changeTheme={setTheme} activeTheme={theme} />
+            <Outlet />
+            <FooterComponent />
+        </div>
+    );
+};
diff --git a/src/components/pageNotFound/PageNotFound.component.tsx b/src/components/pageNotFound/PageNotFound.component.tsx
@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+
+import styles from './pageNotFound.module.css';
+
+export const PageNotFound = () => (
+    <section className={styles.errorText}>
+        <h2>Oops!</h2>
+        <h3>404 - page not found!</h3>
+        <span>Maybe we are just working on this page, or maybe it doesn&apos;t exist at all...( </span>
+        <span>let&apos;s start all over shall we? </span>
+        <Link className={styles.backButton} to={'/'}>
+            start all over again
+        </Link>
+    </section>
+);
diff --git a/src/components/pageNotFound/pageNotFound.module.css b/src/components/pageNotFound/pageNotFound.module.css
@@ -0,0 +1,27 @@
+.errorText, .backButton {
+  font-family: inherit;
+}
+
+.errorText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 70vh;
+  margin: auto 20px;
+  text-align: center;
+}
+
+.backButton {
+  padding: 10px 20px;
+  margin-top: 30px;
+  border: 1px solid var(--color-border-button);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--txt-secondary);
+}
+
+.backButton:hover {
+  background-color: var(--background-button);
+  color: var(--bg-primary);
+}
diff --git a/src/components/productCard/ProductCard.component.tsx b/src/components/productCard/ProductCard.component.tsx
@@ -1,17 +1,23 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { Cart } from '@/components/cart/Cart.component.tsx';
 import type { Product } from '@/interface/interfaceProductCategory.ts';
 
 import styles from './productCard.module.css';
 
-export const ProductCard: React.FC<{ product: Product }> = ({ product }) => (
-    <div className={styles.card}>
-        <img className={styles.cardImage} src={product.images} alt="Product" />
-        <h2 className={styles.cardTitle}>{product.title}</h2>
-        <div className={styles.cardBuy}>
-            <span className={styles.cardPrice}>{product.price} </span>
-            <Cart />
+export const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
+    const navigate = useNavigate();
+    return (
+        <div className={styles.card}>
+            <img className={styles.cardImage} src={product.images[0]} alt="Product" />
+            <button className={styles.cardButton} onClick={() => navigate(`/product_page/${product.id}`)}>
+                <h2 className={styles.cardTitle}>{product.title}</h2>
+            </button>
+            <div className={styles.cardBuy}>
+                <span className={styles.cardPrice}>{product.price} </span>
+                <Cart />
+            </div>
         </div>
-    </div>
-);
+    );
+};
diff --git a/src/components/productCard/productCard.module.css b/src/components/productCard/productCard.module.css
@@ -7,7 +7,7 @@
   border-radius: 20px;
   border: solid 1px var(--color-border-button);
   padding: 20px 15px 0;
-  color: var(--cart);
+  color: var(--txt-primary);
 }
 
 .cardImage {
@@ -21,6 +21,7 @@
   font-weight: 600;
   line-height: 25px;
   margin: 0;
+  color: var(--txt-primary);
 }
 
 .cardPrice {
@@ -40,3 +41,12 @@
   display: flex;
   justify-content: space-between;
 }
+
+.cardButton {
+  border: none;
+  background: none;
+  font-family: inherit;
+  font-weight: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
diff --git a/src/components/productList/ProductList.component.tsx b/src/components/productList/ProductList.component.tsx
@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 
+import { FiltersBar } from '@/components/filtersBar/FiltersBar.component.tsx';
 import { ProductCard } from '@/components/productCard/ProductCard.component.tsx';
 import type { ProductListProps } from '@/interface/interfaceProductFilters.ts';
 
 import styles from './productList.module.css';
 
-export const ProductList: React.FC<ProductListProps> = ({ products, selectedCategory, sortCriteria }) => {
+export const ProductList: React.FC<ProductListProps> = ({ products }) => {
     const [currentPage, setCurrentPage] = useState(1);
     const itemsPerPage = 8;
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+    const [sortCriteria, setSortCriteria] = useState('Price (High - Low)');
 
     const filteredProducts = selectedCategory ? products.filter((product) => product.category.name === selectedCategory) : products;
 
@@ -38,6 +41,7 @@ export const ProductList: React.FC<ProductListProps> = ({ products, selectedCate
 
     return (
         <>
+            <FiltersBar onCategoryChange={setSelectedCategory} onSortChange={setSortCriteria} />
             <section className={styles.productList}>
                 {currentItems.map((product, index) => (
                     <ProductCard key={index} product={product} />
@@ -52,7 +56,11 @@ export const ProductList: React.FC<ProductListProps> = ({ products, selectedCate
                     &#60;
                 </button>
                 {Array.from({ length: totalPages }, (_, index) => (
-                    <button className={styles.paginationButton} key={index} onClick={() => setCurrentPage(index + 1)}>
+                    <button
+                        className={`${styles.paginationButton} ${index + 1 === currentPage ? styles.activePage : ''}`}
+                        key={index}
+                        onClick={() => setCurrentPage(index + 1)}
+                    >
                         {index + 1}
                     </button>
                 ))}

diff --git a/src/components/productList/productList.module.css b/src/components/productList/productList.module.css
@@ -29,6 +29,11 @@
   color: #FFF;
 }
 
+.activePage {
+  background-color: var(--background-button);
+  color: #FFF;
+}
+
 @media (max-width: 768px) {
 
   .productList {