[ { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": ".idea/ecommerce.iml", "content": "\n\n \n \n \n \n \n \n \n \n \n" }, { "path": ".idea/inspectionProfiles/Project_Default.xml", "content": "\n \n \n" }, { "path": ".idea/misc.xml", "content": "\n\n \n \n" }, { "path": ".idea/modules.xml", "content": "\n\n \n \n \n \n \n" }, { "path": ".idea/vcs.xml", "content": "\n\n \n \n \n" }, { "path": ".idea/workspace.xml", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n true\n DEFINITION_ORDER\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n \n );\n\n};\n\nconst mapStateToProps = (state) => {\n\n const brandItemsCount = {};\n\n state.shop.products.forEach(p => {\n brandItemsCount[p.brand] = brandItemsCount[p.brand] + 1 || 1;\n });\n\n\n return {\n brandItemsCount\n }\n\n};\n\nexport default connect(mapStateToProps)(BrandFilter);" }, { "path": "src/components/BrandFilter/BrandFilter.scss", "content": ".custom-checkbox {\n display: block;\n position: relative;\n padding-left: 2rem;\n cursor: pointer;\n user-select: none;\n\n &__input {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n\n\n }\n\n &__span {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n height: 1.2rem;\n width: 1.2rem;\n background-color: white;\n border: 2px solid gray;\n\n &::after {\n content: \"\";\n opacity: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n width: .6rem;\n height: .6rem;\n background-color: dodgerblue;\n transform: translate(-50%, -50%);\n }\n }\n\n &:hover &__span {\n background-color: #eeeeee;\n }\n\n &__input:checked + &__span::after {\n opacity: 1;\n }\n}\n\n.flex-50 {\n flex: 0 0 100%;\n}\n\n@media only screen and (max-width: 768px) {\n\n .flex-50 {\n flex: 0 0 50%;\n }\n}" }, { "path": "src/components/CartItem/CartItem.js", "content": "import React, {useState} from 'react';\nimport {connect} from 'react-redux';\nimport {shortenTitle} from \"../../pipes/shortenTitle\";\nimport {formatMoney} from \"../../pipes/priceFormatter\";\nimport './CartItem.scss';\nimport {addProductToCart, decrementCartQuantity, incrementCartQuantity, removeProductToCart} from \"../../actions\";\n\nconst CartItem = (\n {\n title,\n price,\n description,\n quantity,\n id,\n img,\n dispatch\n }\n) => {\n\n console.log(id);\n const [itemQuantity, setItemQuantity] = useState(quantity);\n const removeItem = () => {\n dispatch(removeProductToCart(id));\n };\n\n const handleQuantityChange = (e) => {\n /* const value = e.target.value;\n console.log(value)\n\n if(value > 0 && value <= 10) {\n setItemQuantity(value);\n dispatch(addProductToCart(id));\n } */\n };\n\n const incrementOrDecrement = (e, type) => {\n const value = itemQuantity;\n console.log(type, value);\n\n if(type === 'inc' && value < 10) {\n setItemQuantity(itemQuantity + 1);\n dispatch(incrementCartQuantity(id));\n }\n\n\n if(type === 'desc' && value > 1) {\n setItemQuantity(itemQuantity - 1);\n dispatch(decrementCartQuantity(id));\n }\n\n };\n\n\n return (\n
\n
\n {description}\n\n
\n
\n

{shortenTitle(title)}

\n

\n {description}\n

\n
\n
\n
\n
{formatMoney(price)}$ x
\n
\n
\n
\n {incrementOrDecrement(e, 'inc')}}\n type=\"button\" value=\"+\" className=\"plus\" />\n \n {incrementOrDecrement(e, 'desc')}}\n type=\"button\" value=\"-\" className=\"minus\" />\n
\n
\n
\n \n \n \n
\n
\n
\n );\n};\n\nexport default connect()(CartItem);\n" }, { "path": "src/components/CartItem/CartItem.scss", "content": "\n\n.quantity {\n float: left;\n margin-right: 15px;\n background-color: #eee;\n position: relative;\n width: 80px;\n overflow: hidden\n}\n\n.quantity input {\n margin: 0;\n text-align: center;\n width: 15px;\n height: 15px;\n padding: 0;\n float: right;\n color: #000;\n font-size: 20px;\n border: 0;\n outline: 0;\n background-color: #F6F6F6\n}\n\n.quantity input.qty {\n position: relative;\n border: 0;\n width: 100%;\n height: 40px;\n padding: 10px 25px 10px 10px;\n text-align: center;\n font-weight: 400;\n font-size: 15px;\n border-radius: 0;\n background-clip: padding-box\n}\n\n.quantity .minus, .quantity .plus {\n line-height: 0;\n background-clip: padding-box;\n -webkit-border-radius: 0;\n -moz-border-radius: 0;\n border-radius: 0;\n -webkit-background-size: 6px 30px;\n -moz-background-size: 6px 30px;\n color: #bbb;\n font-size: 20px;\n position: absolute;\n height: 50%;\n border: 0;\n right: 0;\n padding: 0;\n width: 25px;\n z-index: 3\n}\n\n.quantity .minus:hover, .quantity .plus:hover {\n background-color: #dad8da\n}\n\n.quantity .minus {\n bottom: 0\n}\n.shopping-cart {\n margin-top: 20px;\n}\n\n@media only screen and (max-width: 768px) {\n .product-name {\n font-size: 1rem;\n margin-top: .5rem;\n }\n\n .product-description {\n font-size: 1rem;\n }\n\n .product-quantity-container {\n margin-top: .5rem;\n }\n}\n" }, { "path": "src/components/Footer/Footer.js", "content": "import React from 'react';\n\nconst Footer = () => {\n return (\n
\n
\n

Copyright © Emre Baskan 2019

\n
\n
\n );\n};\n\nexport default Footer;" }, { "path": "src/components/Header/Header.js", "content": "import React from 'react';\nimport {connect} from 'react-redux';\nimport {NavLink} from 'react-router-dom';\n\nconst Header = ({cartLength}) => {\n\n return (\n \n );\n};\n\n\nconst mapStateToProps = (state) => {\n return {\n cartLength: state.shop.cart.length\n }\n};\n\nexport default connect(mapStateToProps, null)(Header);\n\n\n/*\n*
  • \n Home\n (current)\n \n
    • \n
  • \n About\n
    • \n
  • \n Services\n
    • \n
  • \n Contact\n
    • \n* */" }, { "path": "src/components/LayoutMode/LayoutMode.js", "content": "import React from 'react';\nimport './LayoutMode.scss';\n\nconst LayoutMode = (\n {\n len,\n click,\n isActive\n }\n) => {\n\n let items = [];\n\n let classess = 'layout-mode__item';\n\n if(isActive) {\n classess += ' layout-mode__item--active'\n }\n\n for(let i = 0; i < len; i ++) {\n items.push(
    );\n };\n\n\n return (\n
    {click(len)}}>\n {items}\n
    \n );\n};\n\nexport default LayoutMode;\n" }, { "path": "src/components/LayoutMode/LayoutMode.scss", "content": ".layout-mode {\n\n display: flex;\n flex-direction: row;\n padding: .3rem;\n border: 2px solid gray;\n cursor: pointer;\n\n &__item {\n width: .7rem;\n height: .7rem;\n background-color: gray;\n\n &--active {\n background-color: dodgerblue;\n }\n\n }\n\n &__item:not(:last-child) {\n margin-right: .3rem;\n }\n\n &:not(:last-child) {\n margin-right: .8rem;\n }\n\n\n\n\n &:hover {\n border: 2px solid #646464;\n }\n\n &--active {\n border: 2px solid dodgerblue;\n }\n}\n" }, { "path": "src/components/OrderFilter/OrderFilter.js", "content": "import React, {useState} from 'react';\nimport {connect} from 'react-redux';\nimport './OrderFilter.scss';\nimport {clearOrderBy, ORDER_BY_ASC, ORDER_BY_DESC, orderByAsc, orderByDesc} from \"../../actions\";\n\nconst OrderFilter = ({dispatch}) => {\n\n let removeSelected;\n const [selected, setSelected] = useState('');\n\n const handleRadioChange = (e) => {\n const value = e.target.value;\n setSelected(value);\n if(value === ORDER_BY_ASC) {\n dispatch(orderByAsc());\n } else {\n dispatch(orderByDesc());\n }\n };\n\n const removeFilter = (e) => {\n\n const buttons = document.getElementsByName('orderByPrice');\n\n buttons.forEach(el => {\n el.checked = false;\n });\n\n dispatch(clearOrderBy());\n setSelected('');\n };\n\n if(selected) {\n removeSelected = Remove filter\n }\n\n\n\n return (\n
    \n
    \n

    Price {removeSelected}

    \n
    \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n
    \n );\n};\n\nexport default connect()(OrderFilter);" }, { "path": "src/components/OrderFilter/OrderFilter.scss", "content": ".custom-radio-btn {\n display: block;\n position: relative;\n cursor: pointer;\n padding-left: 2rem;\n user-select: none;\n\n &__input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n }\n\n &__span {\n position: absolute;\n top: 50%;\n left: 0;\n height: 1.3rem;\n width: 1.3rem;\n background-color: #eeeeee;\n border-radius: 12px;\n transform: translateY(-50%);\n\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: .7rem;\n height: .7rem;\n border-radius: 50%;\n background-color: dodgerblue;\n content: \"\";\n display: none;\n }\n }\n\n &__input:checked ~ &__span::after {\n display: block;\n }\n\n &:hover &__span {\n background-color: #dfdfdf;\n }\n\n\n}\n\n.text-remove-selected {\n font-size: 1rem;\n font-weight: normal;\n cursor: pointer;\n padding-left: 2rem;\n}" }, { "path": "src/components/Pagination/Pagination.js", "content": "import React, {Component} from 'react';\nimport {connect} from \"react-redux\";\nimport {goPage, nextPage, prevPage} from \"../../actions\";\n\nclass Pagination extends Component {\n\n\n onPage(n){\n this.props.onGoPage(n);\n }\n\n isOnLastPage(){\n // console.log(this.props.perPage * this.props.currentPage, this.props.totalItemsCount);\n return this.props.perPage * this.props.currentPage >= this.props.totalItemsCount;\n }\n\n totalPages() {\n return Math.ceil(this.props.totalItemsCount / this.props.perPage) || 0;\n }\n\n getMin(){\n return ((this.props.perPage * this.props.currentPage) - this.props.perPage) + 1;\n }\n\n getMax() {\n let max = this.props.perPage * this.props.currentPage;\n if (max > this.props.totalItemsCount) {\n max = this.props.totalItemsCount;\n }\n return max;\n }\n onPrev = () => {\n this.props.onPrevPage();\n }\n\n onNext = () => {\n this.props.onNextPage();\n }\n\n\n getPages = () => {\n const c = Math.ceil(this.props.totalItemsCount / this.props.perPage);\n const p = this.props.currentPage || 1;\n const pagesToShow = this.props.pagesToShow || 9;\n const pages = [];\n pages.push(p);\n const times = pagesToShow - 1;\n for (let i = 0; i < times; i++) {\n if (pages.length < pagesToShow) {\n if (Math.min.apply(null, pages) > 1) {\n pages.push(Math.min.apply(null, pages) - 1);\n }\n }\n if (pages.length < pagesToShow) {\n if (Math.max.apply(null, pages) < c) {\n pages.push(Math.max.apply(null, pages) + 1);\n }\n }\n }\n pages.sort((a, b) => a - b);\n return pages;\n }\n\n\n\n\n render() {\n\n console.log(this.props);\n\n const pages =this.getPages().map(pageNum => {\n\n let buttonClass = 'page-item';\n\n if(pageNum === this.props.currentPage) {\n buttonClass += ' active';\n }\n\n return (
  • {this.onPage(pageNum)}}>
    • );\n });\n\n let prevButtonClass = 'page-item';\n\n if (this.props.currentPage === 1) {\n prevButtonClass += ' disabled';\n }\n\n const prevButton = (
  • \n Previous\n
    • );\n\n let nextButtonClass = 'page-item';\n\n if(this.isOnLastPage()) {\n nextButtonClass += ' disabled';\n }\n\n const nextButton = (\n
  • \n Next\n
    • \n );\n\n\n\n return (\n \n );\n }\n}\n\n\nconst mapStateToProps = (state) => {\n return {\n ...state.pagination,\n totalItemsCount: state.shop.products.length,\n }\n};\n\nexport default Pagination;\n" }, { "path": "src/components/Pagination/Pagination.scss", "content": "" }, { "path": "src/components/Product/Product.js", "content": "import React, {useState} from 'react';\nimport {connect} from 'react-redux';\nimport {Link} from 'react-router-dom';\nimport {formatMoney} from \"../../pipes/priceFormatter\";\nimport {cumulativeOffSet} from \"../../utilities/cumulativeOffset\";\n\nimport './Product.scss';\nimport SlideDots from \"../SlideDots/SlideDots\";\nimport {addProductToCart} from \"../../actions\";\n\n\nconst Product = (props) => {\n\n const {\n title,\n price,\n images,\n description,\n id,\n } = props.product;\n\n const imageRef = React.createRef();\n const [img, setImg] = useState(images[0]);\n const [aItem, setAItem] = useState(0);\n\n\n const handleImageChange = (e) => {\n\n let clientX;\n\n if(e.type === 'touchmove') {\n clientX = e.touches[0].clientX;\n } else {\n clientX = e.clientX;\n }\n\n const currentX = clientX - cumulativeOffSet(imageRef.current).left;\n\n // console.dir(imageRef.current);\n\n const part = imageRef.current.clientWidth / images.length;\n // console.log(Math.ceil(currentX / part) - 1);\n\n let imgIndex = Math.ceil(currentX / part) - 1;\n if (imgIndex < 0) {\n imgIndex = 0;\n }\n\n if (imgIndex >= images.length) {\n imgIndex = images.length - 1;\n }\n setAItem(imgIndex);\n setImg(images[imgIndex]);\n };\n\n const handleMouseOut = (e) => {\n setImg(images[0]);\n setAItem(0);\n };\n\n const changeImage = (i) => {\n setImg(images[i]);\n setAItem(i);\n }\n\n return (\n
    \n \n \n \n
    \n

    \n {title}\n

    \n
    ${formatMoney(price)}
    \n

    {description}

    \n {\n props.dispatch(addProductToCart({...props.product}))\n }}\n className=\"btn btn-info product__add-to-cart\">Add to cart\n \n
    \n
    \n );\n};\n\nexport default connect()(Product);\n\n" }, { "path": "src/components/Product/Product.scss", "content": ".product {\n padding-bottom: 2rem;\n &__img {\n width: 100%;\n height: 100%;\n }\n\n &__text {\n flex: 0 0 40%;\n }\n\n &__link {\n flex: 0 0 60%;\n height: 60%;\n padding: 1rem;\n position: relative;\n }\n\n &__title {\n font-size: .8rem;\n }\n\n &__price {\n\n }\n\n &__description {\n font-size: 0.7rem;\n }\n\n &:hover {\n box-shadow: 0 1rem 2rem rgba(0,0,0, .2);\n }\n\n &__add-to-cart {\n position: absolute;\n bottom: .8rem;\n width: 60%;\n left: 50%;\n opacity: 0;\n visibility: hidden;\n transform: translateX(-50%);\n transition: all .2s;\n padding: 3px 12px;\n\n }\n\n &:hover &__add-to-cart {\n visibility: visible;\n opacity: 1;\n }\n\n &:hover .owl-dots {\n display: inline-block;\n }\n\n}\n\n@media only screen and (max-width: 768px) {\n .product {\n height: auto !important;\n &__add-to-cart {\n visibility: visible;\n opacity: 1;\n }\n\n & .owl-dots {\n display: inline-block;\n }\n }\n}" }, { "path": "src/components/ProductDetail/ProductDetail.js", "content": "import React from 'react';\nimport {connect} from 'react-redux';\nimport {formatMoney} from \"../../pipes/priceFormatter\";\nimport {addProductToCart} from \"../../actions\";\n\nconst ProductDetail = (props) => {\n\n const {\n title,\n images,\n brand,\n price,\n cpu,\n camera,\n size,\n weight,\n display,\n battery,\n memory,\n description,\n id\n } = props.product;\n\n\n const onCart = () => {\n props.dispatch(addProductToCart(props.product));\n };\n\n return (\n \n );\n};\n\nexport default connect()(ProductDetail);\n" }, { "path": "src/components/ProductSlider/ProductSlider.js", "content": "import React, {useState} from 'react';\nimport {cumulativeOffSet} from \"../../utilities/cumulativeOffset\"\nimport './ProductSlider.scss';\n\nconst ProductSlider = (\n {\n images\n }\n) => {\n const imageRef = React.createRef();\n const [img, setImg] = useState(images[0]);\n const [aItem, setAItem] = useState(0);\n\n\n const handleImageChange = (e) => {\n const currentX = e.clientX - cumulativeOffSet(imageRef.current).left;\n\n console.dir(imageRef.current);\n\n const part = imageRef.current.clientWidth / images.length;\n console.log(Math.ceil(currentX / part) - 1);\n\n let imgIndex = Math.ceil(currentX / part) - 1;\n if (imgIndex < 0) {\n imgIndex = 0;\n }\n\n if (imgIndex >= images.length) {\n imgIndex = images.length - 1;\n }\n setAItem(imgIndex);\n setImg(images[imgIndex]);\n };\n\n const handleMouseOut = (e) => {\n setImg(images[0]);\n setAItem(0);\n };\n\n const changeImage = (i) => {\n setImg(images[i]);\n setAItem(i);\n }\n\n\n return (\n \n );\n};\n\nexport default ProductSlider;" }, { "path": "src/components/ProductSlider/ProductSlider.scss", "content": ".gallery-wrap .img-big-wrap img {\n height: 450px;\n width: auto;\n display: inline-block;\n}\n\n\n\n.gallery-wrap .img-small-wrap .item-gallery {\n width: 60px;\n height: 60px;\n border: 1px solid #ddd;\n margin: 7px 2px;\n display: inline-block;\n overflow: hidden;\n}\n\n.gallery-wrap .img-small-wrap {\n text-align: center;\n}\n.gallery-wrap .img-small-wrap img {\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n border-radius: 4px;\n cursor: pointer;\n}" }, { "path": "src/components/SlideDots/SlideDots.js", "content": "import React from 'react';\nimport './SlideDots.scss';\n\nconst SlideDots = (\n {\n len,\n activeItem,\n changeItem\n }\n) => {\n\n const dots = [];\n for(let i = 0; i < len; i++) {\n let dotClass = 'owl-dot';\n\n if(activeItem === i) {\n dotClass += ' active';\n }\n\n dots.push( {changeItem(i)}}\n role=\"button\"\n className={dotClass}>)\n }\n\n return (\n
    \n {dots}\n
    \n );\n};\n\nexport default SlideDots;" }, { "path": "src/components/SlideDots/SlideDots.scss", "content": ".owl-dots {\n display: none;\n position: absolute;\n bottom: -1rem;\n left: 0;\n\n}\n\n.owl-dots {\n width: 100%;\n text-align: center;\n}\n\n.owl-dots .active.owl-dot {\n background-color: #f28b00;\n border-color: #f28b00;\n}\n\n.owl-dots .owl-dot {\n display: inline-block;\n zoom: 1;\n margin: 8px 4px;\n border-radius: 10px;\n -moz-border-radius: 10px;\n -o-border-radius: 10px;\n -webkit-border-radius: 10px;\n -ms-webkit-radius: 10px;\n zoom: 1;\n background-color: #fff;\n padding: 3px;\n border: solid 1px #e9e9e9;\n cursor: pointer;\n}" }, { "path": "src/containers/FilterBar/FilterBar.js", "content": "import React, {Component} from 'react';\nimport BrandFilter from \"../../components/BrandFilter/BrandFilter\";\nimport OrderFilter from \"../../components/OrderFilter/OrderFilter\";\n\nclass FilterBar extends Component {\n render() {\n return (\n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n );\n }\n}\n\nexport default FilterBar;" }, { "path": "src/containers/ProductList/ProductList.js", "content": "import React, {Component} from 'react';\nimport {connect} from 'react-redux';\nimport Product from \"../../components/Product/Product\";\n\nimport {brandFilter} from \"../../pipes/brandFilter\";\nimport {orderByFilter} from \"../../pipes/orderByFilter\";\nimport LayoutMode from \"../../components/LayoutMode/LayoutMode\";\nimport {paginationPipe} from \"../../pipes/paginationFilter\";\nimport Pagination from \"../../components/Pagination/Pagination\";\n\nclass ProductList extends Component {\n\n state = {\n colValue : 'col-lg-4',\n perPage: 12,\n currentPage: 1,\n pagesToShow: 3,\n gridValue: 3\n };\n\n changeLayout = (n) => {\n this.setState({gridValue: n});\n\n let realGridValue;\n\n if(n === 4) {\n realGridValue = 3\n } else {\n realGridValue = 4;\n }\n\n this.setState({\n colValue: `col-lg-${realGridValue}`\n });\n };\n\n\n onPrev = () => {\n const updatedState = {...this.state};\n updatedState.currentPage = this.state.currentPage - 1;\n this.setState(updatedState);\n };\n\n\n onNext = () => {\n this.setState({\n ...this.state,\n currentPage: this.state.currentPage + 1\n });\n };\n\n goPage = (n) => {\n this.setState({\n ...this.state,\n currentPage: n\n });\n };\n\n\n render() {\n\n let isActive = this.state.colValue[this.state.colValue.length -1];\n\n return (\n
    \n
    \n
    \n
    \n
    \n Change Layout: \n \n \n
    \n
    \n
    \n
    \n
    \n {paginationPipe(this.props.products, this.state).map(product =>{\n let classes = `${this.state.colValue} col-md-6 mb-4`;\n return (
    \n \n
    )\n })}\n
    \n
    \n \n
    \n
    \n );\n }\n}\n\nconst mapStateToProps = state => {\n const brands = state.brandFilter;\n const orderBy = state.orderBy;\n\n const filterByBrandArr = brandFilter(state.shop.products, brands);\n const filterByOrderArr = orderByFilter(filterByBrandArr, orderBy);\n\n\n return {products: filterByOrderArr }\n};\n\nexport default connect(mapStateToProps, null)(ProductList);\n" }, { "path": "src/containers/ProductList/ProductList.scss", "content": "\n$body-bg: #000;\n\n@import '~bootstrap/scss/bootstrap.scss';" }, { "path": "src/data/brands.js", "content": "export const brands = [\"apple\",\"huawei\",\"meizu\",\"samsung\",\"vestel\",\"xiaomi\",\"asus\"];" }, { "path": "src/data/getData.js", "content": "\nvar imagesMap = {};\n\nvar images = document.querySelectorAll('.product-image');\n\nconsole.log(images);\n\nimages.forEach(img => {\n\n if(!imagesMap[img.title]) {\n imagesMap[img.title] = [];\n imagesMap[img.title].push(img.src);\n } else {\n imagesMap[img.title].push(img.src);\n }\n\n});\n\nfor (let key in imagesMap) {\n\n if(imagesMap[key].length === 0) {\n delete imagesMap[key];\n }\n\n if(!imagesMap[key][0]) {\n imagesMap[key].splice(0,1);\n }\n\n\n}\n\nfunction getRandomArbitrary(min, max) {\n return Math.random() * (max - min) + min;\n}\n\nbrand\nvar phones = Object.keys(imagesMap).reduce((acc, key , i) => {\n\n if(imagesMap[key].length !== 0) {\n var newPhone = {\n price: getRandomArbitrary(1500, 10000),\n cpu: \"1.3GHz Apple A6\",\n camera: \"8mp (3264x2448)\",\n size: \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n weight: \"132 grams (4.7 ounces) with battery\",\n display: \"4.0 326 pixel density\",\n battery: \"1480 mAh\",\n memory: \"16GB, 32GB and RAM 1 GB\"\n };\n newPhone.title = key;\n newPhone.brand = key.split(' ')[0].toLowerCase();\n newPhone.category = 'phone';\n newPhone.images = imagesMap[key];\n\n acc.push(newPhone);\n }\n\n return acc;\n}, []);\n\nconsole.log(JSON.stringify(phones));" }, { "path": "src/data/phones.js", "content": "export const phones = [{\n \"title\": \"Apple iPhone 7 Plus 32 GB (Apple Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"apple\",\n \"price\": 4241.499828399639,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 0,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Huawei Mate 20 Lite 64 GB (Huawei Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"huawei\",\n \"price\": 1823.6625483451157,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 1,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Huawei P20 Lite 64 GB (Huawei Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"huawei\",\n \"price\": 7429.467511354926,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 2,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Meizu 16TH 64 GB (Meizu Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"meizu\",\n \"price\": 5664.265944453384,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 3,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Meizu X8 64 GB (Meizu Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"meizu\",\n \"price\": 4596.99884783711,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 4,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Samsung Galaxy A7 2018 64 GB (Samsung Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"samsung\",\n \"price\": 4108.082941215698,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 5,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Samsung Galaxy J6 Plus 32 GB (Samsung Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"samsung\",\n \"price\": 4260.9529075338505,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 6,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Vestel Venus Z20 (Vestel Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"vestel\",\n \"price\": 4730.962860489047,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 7,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Xiaomi Mi 8 Lite 128 GB (İthalatçı Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"xiaomi\",\n \"price\": 5565.737301732921,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 8,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Xiaomi Mi 8 Lite 64 GB (İthalatçı Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"xiaomi\",\n \"price\": 5830.067673371856,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 9,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Apple iPhone 7 32 GB (Apple Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"apple\",\n \"price\": 1525.6236967422828,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 10,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Samsung Galaxy S10 Plus 128 GB (Samsung Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"samsung\",\n \"price\": 3429.3471420603028,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 11,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Samsung Galaxy S10 128 GB (Samsung Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"samsung\",\n \"price\": 1017.7877018963508,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 12,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Samsung Galaxy S10e 128 GB (Samsung Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"samsung\",\n \"price\": 3235.202225041739,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 13,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Samsung Galaxy M20 32 GB (Samsung Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"samsung\",\n \"price\": 5850.5748675199875,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 14,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Samsung Galaxy S8 (Samsung Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"samsung\",\n \"price\": 3207.2840718201587,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 15,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Huawei P Smart 2019 64 GB (Huawei Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"huawei\",\n \"price\": 5288.552334214134,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 16,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Xiaomi Mi 8 128 GB (İthalatçı Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"xiaomi\",\n \"price\": 1354.662450097338,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 17,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Apple iPhone 6S Plus 32 GB (Apple Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"apple\",\n \"price\": 5467.082548922358,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 18,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Meizu 16 64 GB (Meizu Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"meizu\",\n \"price\": 1173.3514841571446,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 19,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Vestel Venüs E3 (Vestel Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"vestel\",\n \"price\": 2371.8351283872053,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 20,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Asus Zenfone Max Pro ZB602KL 64 GB (Asus Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"asus\",\n \"price\": 2603.504706144322,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 21,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Samsung Galaxy Note 9 128 GB (Samsung Türkiye Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"samsung\",\n \"price\": 1165.0255199945123,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 22,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}, {\n \"title\": \"Huawei Mate 20 Lite Dual Sim 64 GB (İthalatçı Garantili)\",\n \"category\": \"phone\",\n \"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\"],\n \"brand\": \"huawei\",\n \"price\": 2693.4407990587074,\n \"cpu\": \"1.3GHz Apple A6\",\n \"camera\": \"8mp (3264x2448)\",\n \"size\": \"124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)\",\n \"weight\": \"132 grams (4.7 ounces) with battery\",\n \"display\": \"4.0 326 pixel density\",\n \"battery\": \"1480 mAh\",\n \"memory\": \"16GB, 32GB and RAM 1 GB\",\n \"id\": 23,\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!\"\n}]" }, { "path": "src/index.js", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.scss';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(, document.getElementById('root'));\n\nserviceWorker.unregister();\n" }, { "path": "src/index.scss", "content": "$body-bg: #fff;\n\n\n\n\n@import '~bootstrap/scss/bootstrap.scss';\n\nhtml{ height:100%; }\nbody{ min-height:100%; padding:0; margin:0; position:relative; }\n\nbody::after{ content:''; display:block; height:100px; }\n\nfooter{\n position:absolute;\n bottom:0;\n width:100%;\n height:100px;\n}\n" }, { "path": "src/pages/Home/Home.js", "content": "import React from 'react';\nimport FilterBar from \"../../containers/FilterBar/FilterBar\";\nimport ProductList from \"../../containers/ProductList/ProductList\";\nimport Pagination from \"../../components/Pagination/Pagination\";\n\nconst Home = () => {\n return (\n \n
    \n
    \n \n \n
    \n
    \n     \n );\n};\n\n\nexport default Home;\n" }, { "path": "src/pages/ProductDetail/ProductDetail.js", "content": "import React from 'react';\nimport {connect} from 'react-redux';\nimport ProductDetailComponent from '../../components/ProductDetail/ProductDetail';\nimport ProductSlider from \"../../components/ProductSlider/ProductSlider\";\n\nconst ProductDetail = (props) => {\n\n console.log(props);\n\n return (\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n );\n};\n\nconst mapStateToProps = (state, props) => {\n\n const product = state.shop.products.find(product => product.id === +props.match.params.id);\n\n return {\n product\n }\n};\n\n\n\nexport default connect(mapStateToProps, null)(ProductDetail);\n" }, { "path": "src/pages/ShopingCart/ShoppingCart.js", "content": "import React from 'react';\nimport {connect} from 'react-redux';\nimport {formatMoney} from \"../../pipes/priceFormatter\";\nimport CartItem from \"../../components/CartItem/CartItem\";\n\nconst ShoppingCart = (props) => {\n return (\n <>\n
    \n
    \n
    \n \n Shipping cart\n
    \n
    \n
    \n {props.cartItemCount ? props.cartItems.map(cart => (\n \n )) :

    There is no product in your cart

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