[e5b84dc] | 1 | import { Grid, Pagination } from '@mui/material'
|
---|
[dbd4834] | 2 | import axios from 'axios'
|
---|
| 3 | import React, { Component } from 'react'
|
---|
| 4 | import '../PhoneCardComponent/PhoneCardComponent'
|
---|
| 5 | import PhoneCardComponent from '../PhoneCardComponent/PhoneCardComponent'
|
---|
| 6 | import './PhoneCardGridComponent.css'
|
---|
| 7 | import phoneImage from '../../images/phone.png'
|
---|
[d66b8eb] | 8 | import SortByComponent from '../FiltersComponents/SortByComponent'
|
---|
[dbd4834] | 9 |
|
---|
| 10 | export class PhoneCardGridComponent extends Component {
|
---|
| 11 |
|
---|
| 12 | constructor(props) {
|
---|
| 13 | super(props)
|
---|
| 14 |
|
---|
| 15 | this.state = {
|
---|
| 16 | phones: [],
|
---|
| 17 | currentPage: 1,
|
---|
| 18 | phonesPerPage: 12,
|
---|
| 19 | numberOfPages: 0,
|
---|
| 20 | currentPhones: []
|
---|
| 21 | }
|
---|
| 22 |
|
---|
| 23 | }
|
---|
| 24 |
|
---|
[d66b8eb] | 25 |
|
---|
| 26 | getQueryString = () => {
|
---|
| 27 | let filters = '?'
|
---|
| 28 | if(localStorage.getItem('shops'))
|
---|
| 29 | {
|
---|
| 30 | filters += 'shops='+localStorage.getItem('shops')+'&'
|
---|
| 31 | }
|
---|
| 32 | if(localStorage.getItem('brands'))
|
---|
| 33 | {
|
---|
| 34 | filters += 'brands='+localStorage.getItem('brands')+'&'
|
---|
| 35 | }
|
---|
| 36 | if(localStorage.getItem('priceRange'))
|
---|
| 37 | {
|
---|
| 38 | filters += 'priceRange='+localStorage.getItem('priceRange')+'&'
|
---|
| 39 | }
|
---|
| 40 |
|
---|
| 41 | if(localStorage.getItem('sortBy'))
|
---|
| 42 | {
|
---|
| 43 | filters += 'sortBy='+localStorage.getItem('sortBy')+'&'
|
---|
| 44 | }
|
---|
| 45 |
|
---|
| 46 | // dodaj filtri za specifikacija i sredi go sortBy
|
---|
| 47 |
|
---|
| 48 | return filters
|
---|
| 49 | }
|
---|
| 50 |
|
---|
[e5b84dc] | 51 | componentDidUpdate(prevProps) {
|
---|
| 52 | if(JSON.stringify(prevProps) != JSON.stringify(this.props)){
|
---|
| 53 | let filters = '?'
|
---|
[dbd4834] | 54 |
|
---|
[e5b84dc] | 55 | if(this.props.shops)
|
---|
| 56 | {
|
---|
| 57 | filters += 'shops='+this.props.shops+'&'
|
---|
| 58 | }
|
---|
| 59 | if(this.props.brands)
|
---|
| 60 | {
|
---|
| 61 | filters += 'brands='+this.props.brands+'&'
|
---|
| 62 | }
|
---|
| 63 | if(this.props.priceRange)
|
---|
| 64 | {
|
---|
| 65 | filters += 'priceRange='+this.props.priceRange+'&'
|
---|
| 66 | }
|
---|
| 67 | if(this.props.searchValue)
|
---|
| 68 | {
|
---|
| 69 | filters += 'searchValue='+this.props.searchValue+'&'
|
---|
| 70 | }
|
---|
| 71 |
|
---|
| 72 | if(this.props.sortBy)
|
---|
| 73 | {
|
---|
| 74 | filters += 'sortBy='+this.props.sortBy+'&'
|
---|
[d66b8eb] | 75 | }
|
---|
| 76 |
|
---|
| 77 | // dodaj gi i filtrite za specifikacija
|
---|
| 78 |
|
---|
| 79 | // izdvoj metod da ti pravi querystring
|
---|
[e5b84dc] | 80 |
|
---|
| 81 | axios.get('/phones'+filters)
|
---|
[dbd4834] | 82 | .then(response => {
|
---|
| 83 | this.setState({
|
---|
| 84 | phones: response.data,
|
---|
| 85 | numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
|
---|
[e5b84dc] | 86 | },(e) => this.setNewPage(e,this.state.currentPage))
|
---|
[dbd4834] | 87 | }
|
---|
| 88 | )
|
---|
| 89 | .catch(error => console.log(error))
|
---|
[e5b84dc] | 90 | console.log(filters)
|
---|
| 91 | }
|
---|
[dbd4834] | 92 | }
|
---|
| 93 |
|
---|
[e5b84dc] | 94 | componentDidMount() {
|
---|
[d66b8eb] | 95 | axios.get('/phones'+this.getQueryString())
|
---|
[e5b84dc] | 96 | .then(response => {
|
---|
| 97 | this.setState({
|
---|
| 98 | phones: response.data,
|
---|
| 99 | numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
|
---|
| 100 | },(e) => this.setNewPage(e,this.state.currentPage))
|
---|
| 101 | }
|
---|
| 102 | )
|
---|
| 103 | .catch(error => console.log(error))
|
---|
| 104 | }
|
---|
[dbd4834] | 105 |
|
---|
| 106 |
|
---|
[e5b84dc] | 107 | setNewPage = (event,page) => {
|
---|
[dbd4834] | 108 |
|
---|
[e5b84dc] | 109 | const indexOfLastPhone = parseInt(page) * this.state.phonesPerPage;
|
---|
[dbd4834] | 110 | const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
|
---|
| 111 |
|
---|
| 112 | const currPhones = this.state.phones.slice(indexOfFirstPhone, indexOfLastPhone)
|
---|
| 113 |
|
---|
| 114 | this.setState({
|
---|
[e5b84dc] | 115 | currentPage: parseInt(page),
|
---|
[dbd4834] | 116 | currentPhones: currPhones
|
---|
| 117 | })
|
---|
| 118 |
|
---|
| 119 | }
|
---|
| 120 |
|
---|
| 121 | render() {
|
---|
[e5b84dc] | 122 |
|
---|
[dbd4834] | 123 | return (
|
---|
| 124 | <div className='phonecardgrid-wrapper'>
|
---|
| 125 | <Grid className='phonecardgrid-grid-container'
|
---|
| 126 | container
|
---|
| 127 | alignItems="center"
|
---|
| 128 | justifyItems="center"
|
---|
| 129 | spacing={2}>
|
---|
| 130 |
|
---|
[e5b84dc] | 131 | {this.state.currentPhones.map((phone,idx) => <Grid key={idx} className='phonecardgrid-item' item md={3}>
|
---|
| 132 | <PhoneCardComponent id={phone.id} brand={phone.brand}
|
---|
[dbd4834] | 133 | model={phone.model} image_url={phone.image_url == null ? phoneImage : phone.image_url} total_offers={phone.total_offers} lowestPrice={phone.lowestPrice}/></Grid>)}
|
---|
| 134 |
|
---|
| 135 | </Grid>
|
---|
[e5b84dc] | 136 |
|
---|
| 137 | <div className='pagination-wrapper'>
|
---|
| 138 | <Pagination className='paginationcomponent-pagination' onChange={this.setNewPage} page={this.state.currentPage}
|
---|
| 139 | count={this.state.numberOfPages} color="primary" />
|
---|
| 140 | </div>
|
---|
| 141 |
|
---|
[dbd4834] | 142 | </div>
|
---|
| 143 | )
|
---|
| 144 | }
|
---|
| 145 | }
|
---|
| 146 |
|
---|
| 147 | export default PhoneCardGridComponent
|
---|