[dbd4834] | 1 | import { Grid } from '@mui/material'
|
---|
| 2 | import axios from 'axios'
|
---|
| 3 | import React, { Component } from 'react'
|
---|
| 4 | import PaginationComponent from '../PaginationComponent/PaginationComponent'
|
---|
| 5 | import '../PhoneCardComponent/PhoneCardComponent'
|
---|
| 6 | import PhoneCardComponent from '../PhoneCardComponent/PhoneCardComponent'
|
---|
| 7 | import './PhoneCardGridComponent.css'
|
---|
| 8 | import phoneImage from '../../images/phone.png'
|
---|
| 9 |
|
---|
| 10 | export class PhoneCardGridComponent extends Component {
|
---|
| 11 |
|
---|
| 12 | constructor(props) {
|
---|
| 13 | super(props)
|
---|
| 14 |
|
---|
| 15 | this.state = {
|
---|
| 16 | phones: [],
|
---|
| 17 | loading: true,
|
---|
| 18 | currentPage: 1,
|
---|
| 19 | phonesPerPage: 12,
|
---|
| 20 | numberOfPages: 0,
|
---|
| 21 | currentPhones: []
|
---|
| 22 | }
|
---|
| 23 |
|
---|
| 24 | }
|
---|
| 25 |
|
---|
| 26 | componentDidMount() {
|
---|
| 27 |
|
---|
| 28 | axios.get('/phones')
|
---|
| 29 | .then(response => {
|
---|
| 30 | this.setState({
|
---|
| 31 | phones: response.data,
|
---|
| 32 | loading: false,
|
---|
| 33 | numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
|
---|
| 34 | },() => this.setNewPage(this.state.currentPage))
|
---|
| 35 | }
|
---|
| 36 | )
|
---|
| 37 | .catch(error => console.log(error))
|
---|
| 38 | }
|
---|
| 39 |
|
---|
| 40 | setNewPage = (newPage) => {
|
---|
| 41 | if(newPage == '')
|
---|
| 42 | {
|
---|
| 43 | newPage = this.state.currentPage-1
|
---|
| 44 | }
|
---|
| 45 |
|
---|
| 46 | if(newPage == '')
|
---|
| 47 | {
|
---|
| 48 | newPage = this.state.currentPage+1
|
---|
| 49 | }
|
---|
| 50 |
|
---|
| 51 |
|
---|
| 52 | const indexOfLastPhone = parseInt(newPage) * this.state.phonesPerPage;
|
---|
| 53 | const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
|
---|
| 54 |
|
---|
| 55 | const currPhones = this.state.phones.slice(indexOfFirstPhone, indexOfLastPhone)
|
---|
| 56 |
|
---|
| 57 | this.setState({
|
---|
| 58 | currentPage: parseInt(newPage),
|
---|
| 59 | currentPhones: currPhones
|
---|
| 60 | })
|
---|
| 61 |
|
---|
| 62 | }
|
---|
| 63 |
|
---|
| 64 | render() {
|
---|
| 65 | return (
|
---|
| 66 | <div className='phonecardgrid-wrapper'>
|
---|
| 67 | <Grid className='phonecardgrid-grid-container'
|
---|
| 68 | container
|
---|
| 69 | alignItems="center"
|
---|
| 70 | justifyItems="center"
|
---|
| 71 | spacing={2}>
|
---|
| 72 |
|
---|
| 73 | {this.state.currentPhones.map((phone) => <Grid className='phonecardgrid-item' item md={3}>
|
---|
| 74 | <PhoneCardComponent key={phone.id} id={phone.id} brand={phone.brand}
|
---|
| 75 | model={phone.model} image_url={phone.image_url == null ? phoneImage : phone.image_url} total_offers={phone.total_offers} lowestPrice={phone.lowestPrice}/></Grid>)}
|
---|
| 76 |
|
---|
| 77 | {/* <Grid item xs={12} md={12}>
|
---|
| 78 | <PaginationComponent
|
---|
| 79 | currentPage={this.state.currentPage}
|
---|
| 80 | changePageHandler={this.setNewPage}
|
---|
| 81 | numberOfPages={this.state.numberOfPages} />
|
---|
| 82 | </Grid> */}
|
---|
| 83 | </Grid>
|
---|
| 84 | <PaginationComponent
|
---|
| 85 | currentPage={this.state.currentPage}
|
---|
| 86 | changePageHandler={this.setNewPage}
|
---|
| 87 | numberOfPages={this.state.numberOfPages} />
|
---|
| 88 | </div>
|
---|
| 89 | )
|
---|
| 90 | }
|
---|
| 91 | }
|
---|
| 92 |
|
---|
| 93 | export default PhoneCardGridComponent
|
---|