[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'
|
---|
| 8 |
|
---|
| 9 | export class PhoneCardGridComponent extends Component {
|
---|
| 10 |
|
---|
| 11 | constructor(props) {
|
---|
| 12 | super(props)
|
---|
| 13 |
|
---|
| 14 | this.state = {
|
---|
| 15 | phones: [],
|
---|
| 16 | currentPage: 1,
|
---|
| 17 | phonesPerPage: 12,
|
---|
| 18 | numberOfPages: 0,
|
---|
| 19 | currentPhones: []
|
---|
| 20 | }
|
---|
| 21 |
|
---|
| 22 | }
|
---|
| 23 |
|
---|
[e5b84dc] | 24 | componentDidUpdate(prevProps) {
|
---|
| 25 | if(JSON.stringify(prevProps) != JSON.stringify(this.props)){
|
---|
| 26 | let filters = '?'
|
---|
[dbd4834] | 27 |
|
---|
[e5b84dc] | 28 | if(this.props.shops)
|
---|
| 29 | {
|
---|
| 30 | filters += 'shops='+this.props.shops+'&'
|
---|
| 31 | }
|
---|
| 32 | if(this.props.brands)
|
---|
| 33 | {
|
---|
| 34 | filters += 'brands='+this.props.brands+'&'
|
---|
| 35 | }
|
---|
| 36 | if(this.props.priceRange)
|
---|
| 37 | {
|
---|
| 38 | filters += 'priceRange='+this.props.priceRange+'&'
|
---|
| 39 | }
|
---|
| 40 | if(this.props.searchValue)
|
---|
| 41 | {
|
---|
| 42 | filters += 'searchValue='+this.props.searchValue+'&'
|
---|
| 43 | }
|
---|
| 44 |
|
---|
| 45 | if(this.props.sortBy)
|
---|
| 46 | {
|
---|
| 47 | filters += 'sortBy='+this.props.sortBy+'&'
|
---|
| 48 | }
|
---|
| 49 |
|
---|
| 50 | axios.get('/phones'+filters)
|
---|
[dbd4834] | 51 | .then(response => {
|
---|
| 52 | this.setState({
|
---|
| 53 | phones: response.data,
|
---|
| 54 | numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
|
---|
[e5b84dc] | 55 | },(e) => this.setNewPage(e,this.state.currentPage))
|
---|
[dbd4834] | 56 | }
|
---|
| 57 | )
|
---|
| 58 | .catch(error => console.log(error))
|
---|
[e5b84dc] | 59 | console.log(filters)
|
---|
| 60 | }
|
---|
[dbd4834] | 61 | }
|
---|
| 62 |
|
---|
[e5b84dc] | 63 | componentDidMount() {
|
---|
| 64 | axios.get('/phones')
|
---|
| 65 | .then(response => {
|
---|
| 66 | this.setState({
|
---|
| 67 | phones: response.data,
|
---|
| 68 | numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
|
---|
| 69 | },(e) => this.setNewPage(e,this.state.currentPage))
|
---|
| 70 | }
|
---|
| 71 | )
|
---|
| 72 | .catch(error => console.log(error))
|
---|
| 73 | }
|
---|
[dbd4834] | 74 |
|
---|
| 75 |
|
---|
[e5b84dc] | 76 | setNewPage = (event,page) => {
|
---|
[dbd4834] | 77 |
|
---|
[e5b84dc] | 78 | const indexOfLastPhone = parseInt(page) * this.state.phonesPerPage;
|
---|
[dbd4834] | 79 | const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
|
---|
| 80 |
|
---|
| 81 | const currPhones = this.state.phones.slice(indexOfFirstPhone, indexOfLastPhone)
|
---|
| 82 |
|
---|
| 83 | this.setState({
|
---|
[e5b84dc] | 84 | currentPage: parseInt(page),
|
---|
[dbd4834] | 85 | currentPhones: currPhones
|
---|
| 86 | })
|
---|
| 87 |
|
---|
| 88 | }
|
---|
| 89 |
|
---|
| 90 | render() {
|
---|
[e5b84dc] | 91 |
|
---|
[dbd4834] | 92 | return (
|
---|
| 93 | <div className='phonecardgrid-wrapper'>
|
---|
| 94 | <Grid className='phonecardgrid-grid-container'
|
---|
| 95 | container
|
---|
| 96 | alignItems="center"
|
---|
| 97 | justifyItems="center"
|
---|
| 98 | spacing={2}>
|
---|
| 99 |
|
---|
[e5b84dc] | 100 | {this.state.currentPhones.map((phone,idx) => <Grid key={idx} className='phonecardgrid-item' item md={3}>
|
---|
| 101 | <PhoneCardComponent id={phone.id} brand={phone.brand}
|
---|
[dbd4834] | 102 | model={phone.model} image_url={phone.image_url == null ? phoneImage : phone.image_url} total_offers={phone.total_offers} lowestPrice={phone.lowestPrice}/></Grid>)}
|
---|
| 103 |
|
---|
| 104 | </Grid>
|
---|
[e5b84dc] | 105 |
|
---|
| 106 | <div className='pagination-wrapper'>
|
---|
| 107 | <Pagination className='paginationcomponent-pagination' onChange={this.setNewPage} page={this.state.currentPage}
|
---|
| 108 | count={this.state.numberOfPages} color="primary" />
|
---|
| 109 | </div>
|
---|
| 110 |
|
---|
[dbd4834] | 111 | </div>
|
---|
| 112 | )
|
---|
| 113 | }
|
---|
| 114 | }
|
---|
| 115 |
|
---|
| 116 | export default PhoneCardGridComponent
|
---|