product page

Ig 13

web/src/App.tsx

@@ -10,17 +10,16 @@ import {
 import Views from './Views';
 
 function App() {
-    const [isLoading, setIsLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
 
     const fetchData = async () => {
-        const { pageResource, addPageResource } = useContext(PageResourceContext);
-
-        try {
-            // TO DO
-            addPageResource([]);
-        } finally {
-            setIsLoading(false);
-        }
+        // const { pageResource, addPageResource } = useContext(PageResourceContext);
+        // try {
+        //     // TO DO
+        //     addPageResource([]);
+        // } finally {
+        //     setIsLoading(false);
+        // }
     };
 
     useEffect(() => {

web/src/components/pages/index.ts

@@ -1 +1,2 @@
-export * from './MainPage/MainPage'
+export * from './mainPage/MainPage'
+export * from './productsPage/ProductsPage'

web/src/components/pages/mainPage/MainPage.tsx

@@ -0,0 +1,12 @@
+export const MainPage = () => {
+    return (
+        <main>
+            <h1>Shop Main Page</h1>
+            {/* <Carousel>
+                <div>TEST 1</div>
+                <div>TEST 2</div>
+                <div>TEST 3</div>
+            </Carousel> */}
+        </main>
+    );
+};

web/src/components/pages/productsPage/ProductsPage.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Product } from '../../../interfaces';
+import { ProductItem, SearchInput } from '../../shared';
+import './style.css';
+
+const products: Product[] = [
+    {
+        _id: 'test',
+        name: 'Adidas 2000',
+        description: 'Some description',
+        price: 100,
+        size: 'x1',
+        img: 'https://www.eobuwie.com.pl/media/catalog/product/cache/image/650x650/0/0/0000201282847_01_fp.jpg',
+        productType: '',
+        productCategory: '',
+        brand: '',
+    },
+    {
+        _id: 'test2',
+        name: 'Adidas',
+        description: 'Some description 5e00',
+        price: 125,
+        size: 'l',
+        img: 'https://www.eobuwie.com.pl/media/catalog/product/cache/image/650x650/0/0/0000206708137_1__1.jpg',
+        productType: '',
+        productCategory: '',
+        brand: '',
+    },
+    {
+        _id: 'test3',
+        name: 'Adidas Turbo',
+        description: 'Some description 777',
+        price: 185,
+        size: 'l',
+        img: 'https://www.eobuwie.com.pl/media/catalog/product/cache/image/650x650/0/0/0000209204049_01_rz.jpg',
+        productType: '',
+        productCategory: '',
+        brand: '',
+    },
+];
+
+interface productsPageProps {
+    header: string;
+}
+
+export const ProductsPage = ({ header }: productsPageProps): JSX.Element => {
+    const [filteredProducts, setFilteredProducts] = useState<Product[]>(products);
+
+    const searchProduct = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target;
+        const results: Product[] = products.filter(
+            (product) =>
+                product.name.toLowerCase().includes(value.toLowerCase()) ||
+                product.description.toLowerCase().includes(value.toLowerCase())
+        );
+
+        setFilteredProducts(results);
+    };
+
+    return (
+        <div className="products__page">
+            <h2 className="products__page__title">{header}</h2>
+            <SearchInput onSearch={searchProduct} />
+            <div className="products__page__items">
+                {filteredProducts.map((item) => {
+                    return <ProductItem key={item._id} {...item} />;
+                })}
+            </div>
+        </div>
+    );
+};

web/src/components/pages/productsPage/style.css

@@ -0,0 +1,13 @@
+
+.products__page__title{
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.products__page__items{
+    display: flex;
+    flex-wrap: wrap;
+
+}

web/src/components/shared/index.ts

@@ -2,3 +2,4 @@ export * from './spinner/Spinner';
 export * from './productItem/ProductItem';
 export * from './typing/Typing'
 export * from './saleItem/SaleItem';
+export * from './searchInput/SearchInput'

web/src/components/shared/productItem/ProductItem.tsx

@@ -1,45 +1,31 @@
 import React from 'react';
+import { Product } from '../../../interfaces';
 import './style.css';
 
-export type ProductItemType = {
-    title: string;
-    url?: string;
-    description?: string;
-    price?: number;
-    id?: string;
-};
-
-export const ProductItem = ({
-    url,
-    title,
-    description,
-    price,
-    id,
-}: ProductItemType): JSX.Element => {
+export const ProductItem = ({ img, name, description, price, _id }: Product): JSX.Element => {
     return (
-        <div className="item">
-            <div className="item__header">
-                <img className="item__header__image" src={url} alt={title} />
+        <div className="product__item">
+            <div className="product__header">
+                <img className="product__image" src={img} alt={name}></img>
             </div>
-            <div className="item__body">
-                <div className="item__body__title">
-                    <h4>{title}</h4>
+            <div className="product__body">
+                <div className="product__title">
+                    <h4>{name}</h4>
                 </div>
-                <div className="item__body__description">
+                <div className="product__description">
                     <p className="">{description}</p>
                 </div>
-                <div className="item__body__price">
-                    <h6>${price}</h6>
+                <div className="product__price">
+                    <h4>${price}</h4>
                 </div>
             </div>
-            <hr />
-            <div className="item__buttons">
+            <div className="product__buttons">
                 {/* <Link to={`/products/${id}`}> */}
-                <button className="item__button" type="button">
+                <button className="product__button product__button--view" type="button">
                     VIEW
                 </button>
                 {/* </Link> */}
-                <button className="item__button" type="button">
+                <button className="product__button product__button--cart" type="button">
                     ADD TO CART
                 </button>
             </div>

web/src/components/shared/productItem/style.css

@@ -1,50 +1,60 @@
-.item{
-    width: 400px;
-    height:450x;
+.product__item {
+    height: 500px;
+    width: 350px;
     margin-bottom: 50px;
     margin-top: 50px;
     margin-left: 50px;
-    background-color: grey;
+    border-color: hsl(84, 100%, 59%);
+    border-style: groove;
+    border-width: 3px;
+    -webkit-box-shadow: 8px 8px 24px 0px rgba(25, 119, 25, 1);
+    -moz-box-shadow: 8px 8px 24px 0px rgba(25, 119, 25, 1);
+    box-shadow: 8px 8px 24px 0px rgba(25, 119, 25, 1);
 }
 
-.item__header{
+.product__header {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.item__header__image{
-    width: 350px;
-    margin-top: 30px; 
- }
+.product__image {
+    width: 200px;
+    height: auto;
+    margin-top: 30px;
+}
 
- .item__header__image:hover{
+.product__image:hover {
     opacity: 0.8;
- }
+}
 
- .item__body{
+.product__body {
     width: 100%;
+    height: 60px;
     display: flex;
     flex-direction: column;
-    font-size: 18px; 
-} 
+    font-size: 18px;
+}
 
-.item__body__title{
+.product__title {
     margin: auto;
 }
 
-.item__body__description{
+.product__description {
     margin: auto;
 }
 
-.item__body__price{
+.product__price {
     margin: auto;
+    color: green;
+    font-weight: 500;
 }
 
-.item__buttons{
+.product__buttons {
+    margin-top: 30px;
     min-width: 165px;
     width: auto;
-    height: 50px;
+    height: 70px;
     letter-spacing: 0.5px;
     line-height: 50px;
     padding: 0 35px 0 35px;
@@ -55,11 +65,13 @@
     cursor: pointer;
     border-radius: 3px;
     display: flex;
-    justify-content: center
- }
+    justify-content: center;
+}
 
-.item__button {
-    background-color: black;
+.product__button {
+    width: 110px;
+    margin: 10px 10px 10px 10px;
+    background-color: green;
     color: white;
     opacity: 0.7;
     display: flex;
@@ -70,8 +82,8 @@
     cursor: pointer;
 }
 
-.item__button:hover {
-    background-color: white;
+.product__button:hover {
+    background-color: greenyellow;
     color: black;
     border: 1px solid black;
     transition: all 0.3s ease;

web/src/components/shared/searchInput/SearchInput.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface props {
+    onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const SearchInput = ({ onSearch }: props): JSX.Element => {
+    return (
+        <div className="products__search">
+            <input
+                type="text"
+                onChange={onSearch}
+                className="products__search__input"
+                placeholder="Search..."
+            ></input>
+        </div>
+    );
+};

web/src/contexts/cartProvider/CartProvider.tsx

@@ -1,9 +1,9 @@
 import React, { createContext, useState } from 'react';
-import { ProductItemType } from '../../components';
+import { Product } from '../../interfaces';
 
 export interface cartContextData {
-    cart: ProductItemType[];
-    addItem: (value: ProductItemType) => void;
+    cart: Product[];
+    addItem: (value: Product) => void;
 }
 
 const contextDefaultValues: cartContextData = {
@@ -18,9 +18,9 @@ interface providerProps {
 export const CartContext = createContext<cartContextData>(contextDefaultValues);
 
 export const CartProvider = ({ children }: providerProps) => {
-    const [cart, setCart] = useState<ProductItemType[]>(contextDefaultValues.cart);
+    const [cart, setCart] = useState<Product[]>(contextDefaultValues.cart);
 
-    const addItem = (newItem: ProductItemType) => {
+    const addItem = (newItem: Product) => {
         setCart((cart) => [...cart, newItem]);
     };
 

web/src/contexts/pageResourceProvider/PageResourceProvider.tsx

@@ -1,9 +1,9 @@
 import React, { createContext, useState } from 'react';
-import { ProductItemType } from '../../components';
+import { Product } from '../../interfaces';
 
 export interface pageResourceContextData {
-    pageResource: ProductItemType[];
-    addPageResource: (value: ProductItemType[]) => void;
+    pageResource: Product[];
+    addPageResource: (value: Product[]) => void;
 }
 
 const contextDefaultValues: pageResourceContextData = {
@@ -18,11 +18,9 @@ interface providerProps {
 export const PageResourceContext = createContext<pageResourceContextData>(contextDefaultValues);
 
 export const PageResourceProvider = ({ children }: providerProps) => {
-    const [pageResource, setPageResource] = useState<ProductItemType[]>(
-        contextDefaultValues.pageResource
-    );
+    const [pageResource, setPageResource] = useState<Product[]>(contextDefaultValues.pageResource);
 
-    const addPageResource = (data: ProductItemType[]) => {
+    const addPageResource = (data: Product[]) => {
         setPageResource(data);
     };
 

web/src/interfaces/index.ts

@@ -1,2 +1,3 @@
 export * from './api';
-export * from './notification'
+export * from './notification'
+export * from './product'

web/src/interfaces/product.ts

@@ -0,0 +1,11 @@
+export type Product = {
+    _id: string;
+    name: string;
+    description: string;
+    price: number;
+    size: string;
+    img: string;
+    productType?: string;
+    productCategory?: string;
+    brand?: string;
+};