); }; return (

{click(len)}}> {items}

); }; export default LayoutMode; ================================================ FILE: src/components/LayoutMode/LayoutMode.scss ================================================ .layout-mode { display: flex; flex-direction: row; padding: .3rem; border: 2px solid gray; cursor: pointer; &__item { width: .7rem; height: .7rem; background-color: gray; &--active { background-color: dodgerblue; } } &__item:not(:last-child) { margin-right: .3rem; } &:not(:last-child) { margin-right: .8rem; } &:hover { border: 2px solid #646464; } &--active { border: 2px solid dodgerblue; } } ================================================ FILE: src/components/OrderFilter/OrderFilter.js ================================================ import React, {useState} from 'react'; import {connect} from 'react-redux'; import './OrderFilter.scss'; import {clearOrderBy, ORDER_BY_ASC, ORDER_BY_DESC, orderByAsc, orderByDesc} from "../../actions"; const OrderFilter = ({dispatch}) => { let removeSelected; const [selected, setSelected] = useState(''); const handleRadioChange = (e) => { const value = e.target.value; setSelected(value); if(value === ORDER_BY_ASC) { dispatch(orderByAsc()); } else { dispatch(orderByDesc()); } }; const removeFilter = (e) => { const buttons = document.getElementsByName('orderByPrice'); buttons.forEach(el => { el.checked = false; }); dispatch(clearOrderBy()); setSelected(''); }; if(selected) { removeSelected = Remove filter } return (

Price {removeSelected}

Low to high
High to low

); }; export default connect()(OrderFilter); ================================================ FILE: src/components/OrderFilter/OrderFilter.scss ================================================ .custom-radio-btn { display: block; position: relative; cursor: pointer; padding-left: 2rem; user-select: none; &__input { position: absolute; opacity: 0; cursor: pointer; } &__span { position: absolute; top: 50%; left: 0; height: 1.3rem; width: 1.3rem; background-color: #eeeeee; border-radius: 12px; transform: translateY(-50%); &::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: .7rem; height: .7rem; border-radius: 50%; background-color: dodgerblue; content: ""; display: none; } } &__input:checked ~ &__span::after { display: block; } &:hover &__span { background-color: #dfdfdf; } } .text-remove-selected { font-size: 1rem; font-weight: normal; cursor: pointer; padding-left: 2rem; } ================================================ FILE: src/components/Pagination/Pagination.js ================================================ import React, {Component} from 'react'; import {connect} from "react-redux"; import {goPage, nextPage, prevPage} from "../../actions"; class Pagination extends Component { onPage(n){ this.props.onGoPage(n); } isOnLastPage(){ // console.log(this.props.perPage * this.props.currentPage, this.props.totalItemsCount); return this.props.perPage * this.props.currentPage >= this.props.totalItemsCount; } totalPages() { return Math.ceil(this.props.totalItemsCount / this.props.perPage) || 0; } getMin(){ return ((this.props.perPage * this.props.currentPage) - this.props.perPage) + 1; } getMax() { let max = this.props.perPage * this.props.currentPage; if (max > this.props.totalItemsCount) { max = this.props.totalItemsCount; } return max; } onPrev = () => { this.props.onPrevPage(); } onNext = () => { this.props.onNextPage(); } getPages = () => { const c = Math.ceil(this.props.totalItemsCount / this.props.perPage); const p = this.props.currentPage || 1; const pagesToShow = this.props.pagesToShow || 9; const pages = []; pages.push(p); const times = pagesToShow - 1; for (let i = 0; i < times; i++) { if (pages.length < pagesToShow) { if (Math.min.apply(null, pages) > 1) { pages.push(Math.min.apply(null, pages) - 1); } } if (pages.length < pagesToShow) { if (Math.max.apply(null, pages) < c) { pages.push(Math.max.apply(null, pages) + 1); } } } pages.sort((a, b) => a - b); return pages; } render() { console.log(this.props); const pages =this.getPages().map(pageNum => { let buttonClass = 'page-item'; if(pageNum === this.props.currentPage) { buttonClass += ' active'; } return (

{this.onPage(pageNum)}}>

); }); let prevButtonClass = 'page-item'; if (this.props.currentPage === 1) { prevButtonClass += ' disabled'; } const prevButton = (

); let nextButtonClass = 'page-item'; if(this.isOnLastPage()) { nextButtonClass += ' disabled'; } const nextButton = (

); return ( ); } } const mapStateToProps = (state) => { return { ...state.pagination, totalItemsCount: state.shop.products.length, } }; export default Pagination; ================================================ FILE: src/components/Pagination/Pagination.scss ================================================ ================================================ FILE: src/components/Product/Product.js ================================================ import React, {useState} from 'react'; import {connect} from 'react-redux'; import {Link} from 'react-router-dom'; import {formatMoney} from "../../pipes/priceFormatter"; import {cumulativeOffSet} from "../../utilities/cumulativeOffset"; import './Product.scss'; import SlideDots from "../SlideDots/SlideDots"; import {addProductToCart} from "../../actions"; const Product = (props) => { const { title, price, images, description, id, } = props.product; const imageRef = React.createRef(); const [img, setImg] = useState(images[0]); const [aItem, setAItem] = useState(0); const handleImageChange = (e) => { let clientX; if(e.type === 'touchmove') { clientX = e.touches[0].clientX; } else { clientX = e.clientX; } const currentX = clientX - cumulativeOffSet(imageRef.current).left; // console.dir(imageRef.current); const part = imageRef.current.clientWidth / images.length; // console.log(Math.ceil(currentX / part) - 1); let imgIndex = Math.ceil(currentX / part) - 1; if (imgIndex < 0) { imgIndex = 0; } if (imgIndex >= images.length) { imgIndex = images.length - 1; } setAItem(imgIndex); setImg(images[imgIndex]); }; const handleMouseOut = (e) => { setImg(images[0]); setAItem(0); }; const changeImage = (i) => { setImg(images[i]); setAItem(i); } return (

{title}

${formatMoney(price)}

{description}

); }; export default connect()(Product); ================================================ FILE: src/components/Product/Product.scss ================================================ .product { padding-bottom: 2rem; &__img { width: 100%; height: 100%; } &__text { flex: 0 0 40%; } &__link { flex: 0 0 60%; height: 60%; padding: 1rem; position: relative; } &__title { font-size: .8rem; } &__price { } &__description { font-size: 0.7rem; } &:hover { box-shadow: 0 1rem 2rem rgba(0,0,0, .2); } &__add-to-cart { position: absolute; bottom: .8rem; width: 60%; left: 50%; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: all .2s; padding: 3px 12px; } &:hover &__add-to-cart { visibility: visible; opacity: 1; } &:hover .owl-dots { display: inline-block; } } @media only screen and (max-width: 768px) { .product { height: auto !important; &__add-to-cart { visibility: visible; opacity: 1; } & .owl-dots { display: inline-block; } } } ================================================ FILE: src/components/ProductDetail/ProductDetail.js ================================================ import React from 'react'; import {connect} from 'react-redux'; import {formatMoney} from "../../pipes/priceFormatter"; import {addProductToCart} from "../../actions"; const ProductDetail = (props) => { const { title, images, brand, price, cpu, camera, size, weight, display, battery, memory, description, id } = props.product; const onCart = () => { props.dispatch(addProductToCart(props.product)); }; return (

{title}

${formatMoney(price)}

Description: {description}

Brand: {brand}

Size: {size}

Camera: {camera}

CPU: {cpu}

Memory: {memory}

Display: {display}

Battery: {battery}

); }; export default connect()(ProductDetail); ================================================ FILE: src/components/ProductSlider/ProductSlider.js ================================================ import React, {useState} from 'react'; import {cumulativeOffSet} from "../../utilities/cumulativeOffset" import './ProductSlider.scss'; const ProductSlider = ( { images } ) => { const imageRef = React.createRef(); const [img, setImg] = useState(images[0]); const [aItem, setAItem] = useState(0); const handleImageChange = (e) => { const currentX = e.clientX - cumulativeOffSet(imageRef.current).left; console.dir(imageRef.current); const part = imageRef.current.clientWidth / images.length; console.log(Math.ceil(currentX / part) - 1); let imgIndex = Math.ceil(currentX / part) - 1; if (imgIndex < 0) { imgIndex = 0; } if (imgIndex >= images.length) { imgIndex = images.length - 1; } setAItem(imgIndex); setImg(images[imgIndex]); }; const handleMouseOut = (e) => { setImg(images[0]); setAItem(0); }; const changeImage = (i) => { setImg(images[i]); setAItem(i); } return (

{images.map((img , i ) => (
{changeImage(i)}}>
))}

); }; export default ProductSlider; ================================================ FILE: src/components/ProductSlider/ProductSlider.scss ================================================ .gallery-wrap .img-big-wrap img { height: 450px; width: auto; display: inline-block; } .gallery-wrap .img-small-wrap .item-gallery { width: 60px; height: 60px; border: 1px solid #ddd; margin: 7px 2px; display: inline-block; overflow: hidden; } .gallery-wrap .img-small-wrap { text-align: center; } .gallery-wrap .img-small-wrap img { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 4px; cursor: pointer; } ================================================ FILE: src/components/SlideDots/SlideDots.js ================================================ import React from 'react'; import './SlideDots.scss'; const SlideDots = ( { len, activeItem, changeItem } ) => { const dots = []; for(let i = 0; i < len; i++) { let dotClass = 'owl-dot'; if(activeItem === i) { dotClass += ' active'; } dots.push() } return (
{dots}
); }; export default SlideDots; ================================================ FILE: src/components/SlideDots/SlideDots.scss ================================================ .owl-dots { display: none; position: absolute; bottom: -1rem; left: 0; } .owl-dots { width: 100%; text-align: center; } .owl-dots .active.owl-dot { background-color: #f28b00; border-color: #f28b00; } .owl-dots .owl-dot { display: inline-block; zoom: 1; margin: 8px 4px; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; -ms-webkit-radius: 10px; zoom: 1; background-color: #fff; padding: 3px; border: solid 1px #e9e9e9; cursor: pointer; } ================================================ FILE: src/containers/FilterBar/FilterBar.js ================================================ import React, {Component} from 'react'; import BrandFilter from "../../components/BrandFilter/BrandFilter"; import OrderFilter from "../../components/OrderFilter/OrderFilter"; class FilterBar extends Component { render() { return (

); } } export default FilterBar; ================================================ FILE: src/containers/ProductList/ProductList.js ================================================ import React, {Component} from 'react'; import {connect} from 'react-redux'; import Product from "../../components/Product/Product"; import {brandFilter} from "../../pipes/brandFilter"; import {orderByFilter} from "../../pipes/orderByFilter"; import LayoutMode from "../../components/LayoutMode/LayoutMode"; import {paginationPipe} from "../../pipes/paginationFilter"; import Pagination from "../../components/Pagination/Pagination"; class ProductList extends Component { state = { colValue : 'col-lg-4', perPage: 12, currentPage: 1, pagesToShow: 3, gridValue: 3 }; changeLayout = (n) => { this.setState({gridValue: n}); let realGridValue; if(n === 4) { realGridValue = 3 } else { realGridValue = 4; } this.setState({ colValue: `col-lg-${realGridValue}` }); }; onPrev = () => { const updatedState = {...this.state}; updatedState.currentPage = this.state.currentPage - 1; this.setState(updatedState); }; onNext = () => { this.setState({ ...this.state, currentPage: this.state.currentPage + 1 }); }; goPage = (n) => { this.setState({ ...this.state, currentPage: n }); }; render() { let isActive = this.state.colValue[this.state.colValue.length -1]; return (

Change Layout:

{paginationPipe(this.props.products, this.state).map(product =>{ let classes = `${this.state.colValue} col-md-6 mb-4`; return (

) })}

); } } const mapStateToProps = state => { const brands = state.brandFilter; const orderBy = state.orderBy; const filterByBrandArr = brandFilter(state.shop.products, brands); const filterByOrderArr = orderByFilter(filterByBrandArr, orderBy); return {products: filterByOrderArr } }; export default connect(mapStateToProps, null)(ProductList); ================================================ FILE: src/containers/ProductList/ProductList.scss ================================================ $body-bg: #000; @import '~bootstrap/scss/bootstrap.scss'; ================================================ FILE: src/data/brands.js ================================================ export const brands = ["apple","huawei","meizu","samsung","vestel","xiaomi","asus"]; ================================================ FILE: src/data/getData.js ================================================ var imagesMap = {}; var images = document.querySelectorAll('.product-image'); console.log(images); images.forEach(img => { if(!imagesMap[img.title]) { imagesMap[img.title] = []; imagesMap[img.title].push(img.src); } else { imagesMap[img.title].push(img.src); } }); for (let key in imagesMap) { if(imagesMap[key].length === 0) { delete imagesMap[key]; } if(!imagesMap[key][0]) { imagesMap[key].splice(0,1); } } function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } brand var phones = Object.keys(imagesMap).reduce((acc, key , i) => { if(imagesMap[key].length !== 0) { var newPhone = { price: getRandomArbitrary(1500, 10000), cpu: "1.3GHz Apple A6", camera: "8mp (3264x2448)", size: "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", weight: "132 grams (4.7 ounces) with battery", display: "4.0 326 pixel density", battery: "1480 mAh", memory: "16GB, 32GB and RAM 1 GB" }; newPhone.title = key; newPhone.brand = key.split(' ')[0].toLowerCase(); newPhone.category = 'phone'; newPhone.images = imagesMap[key]; acc.push(newPhone); } return acc; }, []); console.log(JSON.stringify(phones)); ================================================ FILE: src/data/phones.js ================================================ export const phones = [{ "title": "Apple iPhone 7 Plus 32 GB (Apple Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/18/280-413/9801258663986.jpg?v1", "https://productimages.hepsiburada.net/s/18/280-413/9801258696754.jpg?v1", "https://productimages.hepsiburada.net/s/18/280-413/9801258729522.jpg?v1", "https://productimages.hepsiburada.net/s/18/280-413/9801258762290.jpg?v1"], "brand": "apple", "price": 4241.499828399639, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 0, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Huawei Mate 20 Lite 64 GB (Huawei Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/21/280-413/9933217792050.jpg?v1", "https://productimages.hepsiburada.net/s/21/280-413/9933217628210.jpg?v1", "https://productimages.hepsiburada.net/s/21/280-413/9933217660978.jpg?v1", "https://productimages.hepsiburada.net/s/21/280-413/9933217693746.jpg?v1"], "brand": "huawei", "price": 1823.6625483451157, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 1, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Huawei P20 Lite 64 GB (Huawei Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/19/280-413/9826975907890.jpg?v1", "https://productimages.hepsiburada.net/s/19/280-413/9826975940658.jpg?v1", "https://productimages.hepsiburada.net/s/19/280-413/9826975973426.jpg?v1", "https://productimages.hepsiburada.net/s/19/280-413/9826976006194.jpg?v1"], "brand": "huawei", "price": 7429.467511354926, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 2, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Meizu 16TH 64 GB (Meizu Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/24/280-413/10094991409202.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10094991441970.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10094991474738.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10094991507506.jpg?v1"], "brand": "meizu", "price": 5664.265944453384, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 3, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Meizu X8 64 GB (Meizu Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/25/280-413/10108030091314.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10082391818290.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10082391851058.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10082391883826.jpg?v1"], "brand": "meizu", "price": 4596.99884783711, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 4, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Samsung Galaxy A7 2018 64 GB (Samsung Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/22/280-413/9946187399218.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9946187431986.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9946187464754.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9946187497522.jpg?v1"], "brand": "samsung", "price": 4108.082941215698, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 5, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Samsung Galaxy J6 Plus 32 GB (Samsung Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/22/280-413/9941129494578.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9941129527346.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9941129560114.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9941129592882.jpg?v1"], "brand": "samsung", "price": 4260.9529075338505, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 6, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Vestel Venus Z20 (Vestel Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/19/280-413/9841497047090.jpg?v1", "https://productimages.hepsiburada.net/s/19/280-413/9841497079858.jpg?v1", "https://productimages.hepsiburada.net/s/19/280-413/9841497112626.jpg?v1", "https://productimages.hepsiburada.net/s/19/280-413/9841497145394.jpg?v1"], "brand": "vestel", "price": 4730.962860489047, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 7, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Xiaomi Mi 8 Lite 128 GB (İthalatçı Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/22/280-413/9957349523506.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9957349556274.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9957349589042.jpg?v1", "https://productimages.hepsiburada.net/s/22/280-413/9957349621810.jpg?v1"], "brand": "xiaomi", "price": 5565.737301732921, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 8, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Xiaomi Mi 8 Lite 64 GB (İthalatçı Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/23/280-413/10051147202610.jpg?v1", "https://productimages.hepsiburada.net/s/23/280-413/10051147235378.jpg?v1", "https://productimages.hepsiburada.net/s/23/280-413/10051147268146.jpg?v1", "https://productimages.hepsiburada.net/s/23/280-413/10051147300914.jpg?v1"], "brand": "xiaomi", "price": 5830.067673371856, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 9, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Apple iPhone 7 32 GB (Apple Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/1/280-413/9502147641394.jpg?v1", "https://productimages.hepsiburada.net/s/1/280-413/9502147674162.jpg?v1", "https://productimages.hepsiburada.net/s/1/280-413/9502147706930.jpg?v1", "https://productimages.hepsiburada.net/s/1/280-413/9502147739698.jpg?v1"], "brand": "apple", "price": 1525.6236967422828, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 10, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Samsung Galaxy S10 Plus 128 GB (Samsung Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/25/280-413/10107992703026.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107992735794.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107992768562.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107992801330.jpg?v1"], "brand": "samsung", "price": 3429.3471420603028, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 11, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Samsung Galaxy S10 128 GB (Samsung Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/25/280-413/10107307425842.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107307458610.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107307491378.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107307524146.jpg?v1"], "brand": "samsung", "price": 1017.7877018963508, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 12, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Samsung Galaxy S10e 128 GB (Samsung Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/25/280-413/10107307032626.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107307065394.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107307098162.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10107307130930.jpg?v1"], "brand": "samsung", "price": 3235.202225041739, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 13, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Samsung Galaxy M20 32 GB (Samsung Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/25/280-413/10094999240754.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10094999273522.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10094999306290.jpg?v1", "https://productimages.hepsiburada.net/s/25/280-413/10094999339058.jpg?v1"], "brand": "samsung", "price": 5850.5748675199875, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 14, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Samsung Galaxy S8 (Samsung Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/3/280-413/9604775739442.jpg?v1", "https://productimages.hepsiburada.net/s/4/280-413/9665566703666.jpg?v1", "https://productimages.hepsiburada.net/s/4/280-413/9665566736434.jpg?v1", "https://productimages.hepsiburada.net/s/4/280-413/9665566769202.jpg?v1"], "brand": "samsung", "price": 3207.2840718201587, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 15, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Huawei P Smart 2019 64 GB (Huawei Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/23/280-413/10059934859314.jpg?v1", "https://productimages.hepsiburada.net/s/23/280-413/10059934892082.jpg?v1", "https://productimages.hepsiburada.net/s/23/280-413/10059934924850.jpg?v1", "https://productimages.hepsiburada.net/s/23/280-413/10059934957618.jpg?v1"], "brand": "huawei", "price": 5288.552334214134, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 16, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Xiaomi Mi 8 128 GB (İthalatçı Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/20/280-413/9873948540978.jpg?v1", "https://productimages.hepsiburada.net/s/20/280-413/9873948573746.jpg?v1", "https://productimages.hepsiburada.net/s/20/280-413/9873948606514.jpg?v1", "https://productimages.hepsiburada.net/s/20/280-413/9873948639282.jpg?v1"], "brand": "xiaomi", "price": 1354.662450097338, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 17, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Apple iPhone 6S Plus 32 GB (Apple Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/1/280-413/9489589993522.jpg?v1", "https://productimages.hepsiburada.net/s/1/280-413/9489589927986.jpg?v1", "https://productimages.hepsiburada.net/s/1/280-413/9489589960754.jpg?v1"], "brand": "apple", "price": 5467.082548922358, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 18, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Meizu 16 64 GB (Meizu Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/24/280-413/10082399387698.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10082399420466.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10082399453234.jpg?v1", "https://productimages.hepsiburada.net/s/24/280-413/10082399486002.jpg?v1"], "brand": "meizu", "price": 1173.3514841571446, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 19, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Vestel Venüs E3 (Vestel Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/20/280-413/9885707108402.jpg?v1", "https://productimages.hepsiburada.net/s/20/280-413/9885707141170.jpg?v1", "https://productimages.hepsiburada.net/s/20/280-413/9885707173938.jpg?v1"], "brand": "vestel", "price": 2371.8351283872053, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 20, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Asus Zenfone Max Pro ZB602KL 64 GB (Asus Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/21/280-413/9924255121458.jpg?v1", "https://productimages.hepsiburada.net/s/21/280-413/9924255154226.jpg?v1", "https://productimages.hepsiburada.net/s/21/280-413/9924255186994.jpg?v1"], "brand": "asus", "price": 2603.504706144322, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 21, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Samsung Galaxy Note 9 128 GB (Samsung Türkiye Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/20/280-413/9902572142642.jpg?v1", "https://productimages.hepsiburada.net/s/20/280-413/9902572175410.jpg?v1", "https://productimages.hepsiburada.net/s/20/280-413/9902572208178.jpg?v1", "https://productimages.hepsiburada.net/s/20/280-413/9902572240946.jpg?v1"], "brand": "samsung", "price": 1165.0255199945123, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 22, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }, { "title": "Huawei Mate 20 Lite Dual Sim 64 GB (İthalatçı Garantili)", "category": "phone", "images": ["https://productimages.hepsiburada.net/s/21/280-413/9933217792050.jpg?v1", "https://productimages.hepsiburada.net/s/21/280-413/9933217660978.jpg?v1", "https://productimages.hepsiburada.net/s/21/280-413/9933217693746.jpg?v1", "https://productimages.hepsiburada.net/s/21/280-413/9933217726514.jpg?v1"], "brand": "huawei", "price": 2693.4407990587074, "cpu": "1.3GHz Apple A6", "camera": "8mp (3264x2448)", "size": "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)", "weight": "132 grams (4.7 ounces) with battery", "display": "4.0 326 pixel density", "battery": "1480 mAh", "memory": "16GB, 32GB and RAM 1 GB", "id": 23, "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!" }] ================================================ FILE: src/index.js ================================================ import React from 'react'; import ReactDOM from 'react-dom'; import './index.scss'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); serviceWorker.unregister(); ================================================ FILE: src/index.scss ================================================ $body-bg: #fff; @import '~bootstrap/scss/bootstrap.scss'; html{ height:100%; } body{ min-height:100%; padding:0; margin:0; position:relative; } body::after{ content:''; display:block; height:100px; } footer{ position:absolute; bottom:0; width:100%; height:100px; } ================================================ FILE: src/pages/Home/Home.js ================================================ import React from 'react'; import FilterBar from "../../containers/FilterBar/FilterBar"; import ProductList from "../../containers/ProductList/ProductList"; import Pagination from "../../components/Pagination/Pagination"; const Home = () => { return (

); }; export default Home; ================================================ FILE: src/pages/ProductDetail/ProductDetail.js ================================================ import React from 'react'; import {connect} from 'react-redux'; import ProductDetailComponent from '../../components/ProductDetail/ProductDetail'; import ProductSlider from "../../components/ProductSlider/ProductSlider"; const ProductDetail = (props) => { console.log(props); return (

); }; const mapStateToProps = (state, props) => { const product = state.shop.products.find(product => product.id === +props.match.params.id); return { product } }; export default connect(mapStateToProps, null)(ProductDetail); ================================================ FILE: src/pages/ShopingCart/ShoppingCart.js ================================================ import React from 'react'; import {connect} from 'react-redux'; import {formatMoney} from "../../pipes/priceFormatter"; import CartItem from "../../components/CartItem/CartItem"; const ShoppingCart = (props) => { return ( <>

Shipping cart

{props.cartItemCount ? props.cartItems.map(cart => ( )) :
There is no product in your cart
}

Total price: {formatMoney(props.totalPrice)}€

); }; const mapStateToProps = state => { console.log(state, 'state has changed'); return { cartItems: state.shop.cart, cartItemCount: state.shop.cart.reduce((count, curItem) => { return count + curItem.quantity; }, 0), totalPrice: state.shop.cart.reduce((count, curItem) => { return count + (curItem.price * curItem.quantity); }, 0) } } export default connect(mapStateToProps, null)(ShoppingCart); ================================================ FILE: src/pipes/brandFilter.js ================================================ export const brandFilter = (arr, brand) => { if(!brand) return arr; return arr.filter(product => brand.includes(product.brand)); }; ================================================ FILE: src/pipes/orderByFilter.js ================================================ import {ORDER_BY_ASC} from "../actions"; export const orderByFilter = (arr, type ) => { if(!type) return arr; console.log('orderbYmethod', type); if(type === 'asc') { return arr.slice().sort((el1, el2) => el1.price - el2.price); } else { return arr.slice().sort((el1, el2) => el2.price - el1.price); } }; ================================================ FILE: src/pipes/paginationFilter.js ================================================ import {store} from "../App"; import {countItem} from "../actions"; export const paginationPipe = (state,args) => { if (!args || !args.perPage || !args.currentPage) { return state; } const location = (args.perPage * (args.currentPage - 1)) || 0 ; return state.slice(location, location + args.perPage); }; ================================================ FILE: src/pipes/priceFormatter.js ================================================ export const formatMoney = (price) => { return price.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); }; ================================================ FILE: src/pipes/shortenTitle.js ================================================ export const shortenTitle = (title) => { return title.split(' (')[0]; }; ================================================ FILE: src/reducers/brand.filter.reducer.js ================================================ import {ADD_BRAND_TO_FILTER, REMOVE_BRAND_FROM_FILTER} from "../actions"; export const brandFilterReducer = (state = '', action) => { switch (action.type) { case ADD_BRAND_TO_FILTER: if(state.includes(action.brand)) return state; return state += action.brand; case REMOVE_BRAND_FROM_FILTER: console.log('remove brand', action); const reg = new RegExp(action.brand, 'gi'); return state.replace(reg, ''); default: return state; } }; ================================================ FILE: src/reducers/index.js ================================================ import {combineReducers} from 'redux'; import shop from './shop.reducer'; import {brandFilterReducer} from "./brand.filter.reducer"; import {orderByPriceReducer} from "./orderByPrice.filter.reducer"; import {paginationReducer} from "./pagination.reducer"; export default combineReducers({ shop, brandFilter: brandFilterReducer, orderBy: orderByPriceReducer, pagination: paginationReducer }); ================================================ FILE: src/reducers/orderByPrice.filter.reducer.js ================================================ import {CLEAR_ORDER_BY_PRICE, ORDER_BY_ASC, ORDER_BY_DESC} from "../actions"; export const orderByPriceReducer = (state = '', action) => { switch (action.type) { case ORDER_BY_ASC: return 'asc'; case ORDER_BY_DESC: return 'desc'; case CLEAR_ORDER_BY_PRICE: return ''; default: return state; } } ================================================ FILE: src/reducers/pagination.reducer.js ================================================ import {COUNT_ITEM, GO_PAGE, NEXT_PAGE, PREV_PAGE} from "../actions"; const initialState = { perPage: 12, currentPage: 1, pagesToShow: 3, totalItemsCount: 0 }; export const paginationReducer = (state = initialState, action) => { switch (action.type) { case PREV_PAGE: if(state.currentPage === 1) return state; return { ...state, currentPage: state.currentPage - 1 }; case NEXT_PAGE: return { ...state, currentPage: state.currentPage + 1 }; case GO_PAGE: return { ...state, currentPage: action.currentPage }; case COUNT_ITEM: return { ...state, totalItemsCount: action.totalItemsCount }; default: return state; } }; ================================================ FILE: src/reducers/shop.reducer.js ================================================ import { ADD_PRODUCT_TO_CART, DECREMENT_CART_ITEM_QUANTITY, INCREMENT_CART_ITEM_QUANTITY, REMOVE_PRODUCT_FROM_CART } from '../actions'; import {phones} from "../data/phones"; const initialState = { products: phones, cart: [] }; const shopReducer = (state = initialState, action ) => { let updatedCart; let updatedItemIndex; switch (action.type) { case INCREMENT_CART_ITEM_QUANTITY: updatedCart = [...state.cart]; updatedItemIndex = updatedCart.findIndex( item => item.id === action.payload ); const incrementedItem = { ...updatedCart[updatedItemIndex] }; incrementedItem.quantity++; updatedCart[updatedItemIndex] = incrementedItem; return {...state, cart: updatedCart}; case DECREMENT_CART_ITEM_QUANTITY: updatedCart = [...state.cart]; updatedItemIndex = updatedCart.findIndex( item => item.id === action.payload ); const decrementedItem = { ...updatedCart[updatedItemIndex] }; decrementedItem.quantity--; updatedCart[updatedItemIndex] = decrementedItem; return {...state, cart: updatedCart}; case ADD_PRODUCT_TO_CART: updatedCart = [...state.cart]; updatedItemIndex = updatedCart.findIndex(item => item.id === action.payload.id); if(updatedItemIndex < 0) { updatedCart.push({...action.payload, quantity: 1}); } else { const updatedItem = { ...updatedCart[updatedItemIndex] }; updatedItem.quantity++; updatedCart[updatedItemIndex] = updatedItem; } return {...state, cart: updatedCart}; case REMOVE_PRODUCT_FROM_CART: updatedCart = [...state.cart]; updatedItemIndex = updatedCart.findIndex( item => item.id === action.payload ); updatedCart.splice(updatedItemIndex, 1); return {...state, cart: updatedCart}; default: return state; } }; export default shopReducer; ================================================ FILE: src/serviceWorker.js ================================================ // This optional code is used to register a service worker. // register() is not called by default. // This lets the app load faster on subsequent visits in production, and gives // it offline capabilities. However, it also means that developers (and users) // will only see deployed updates on subsequent visits to a page, after all the // existing tabs open on the page have been closed, since previously cached // resources are updated in the background. // To learn more about the benefits of this model and instructions on how to // opt-in, read http://bit.ly/CRA-PWA const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); export function register(config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to // serve assets; see https://github.com/facebook/create-react-app/issues/2374 return; } window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. checkValidServiceWorker(swUrl, config); // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + 'worker. To learn more, visit http://bit.ly/CRA-PWA' ); }); } else { // Is not localhost. Just register service worker registerValidSW(swUrl, config); } }); } } function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) .then(registration => { registration.onupdatefound = () => { const installingWorker = registration.installing; if (installingWorker == null) { return; } installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. console.log( 'New content is available and will be used when all ' + 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' ); // Execute callback if (config && config.onUpdate) { config.onUpdate(registration); } } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. console.log('Content is cached for offline use.'); // Execute callback if (config && config.onSuccess) { config.onSuccess(registration); } } } }; }; }) .catch(error => { console.error('Error during service worker registration:', error); }); } function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type'); if ( response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1) ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { window.location.reload(); }); }); } else { // Service worker found. Proceed as normal. registerValidSW(swUrl, config); } }) .catch(() => { console.log( 'No internet connection found. App is running in offline mode.' ); }); } export function unregister() { if ('serviceWorker' in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); } } ================================================ FILE: src/utilities/cumulativeOffset.js ================================================ export const cumulativeOffSet = (element) => { let top = 0, left = 0; do { top += element.offsetTop || 0; left += element.offsetLeft || 0; element = element.offsetParent; } while(element); return { top: top, left: left }; };

{shortenTitle(title)}

{description}

{formatMoney(price)}$ x

Price {removeSelected}

{title}

${formatMoney(price)}

There is no product in your cart