source: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js@ d66b8eb

Last change on this file since d66b8eb was d66b8eb, checked in by Marko <Marko@…>, 2 years ago

Component for editing offers added

  • Property mode set to 100644
File size: 3.9 KB
Line 
1import { Grid, Pagination } from '@mui/material'
2import axios from 'axios'
3import React, { Component } from 'react'
4import '../PhoneCardComponent/PhoneCardComponent'
5import PhoneCardComponent from '../PhoneCardComponent/PhoneCardComponent'
6import './PhoneCardGridComponent.css'
7import phoneImage from '../../images/phone.png'
8import SortByComponent from '../FiltersComponents/SortByComponent'
9
10export 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
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
51 componentDidUpdate(prevProps) {
52 if(JSON.stringify(prevProps) != JSON.stringify(this.props)){
53 let filters = '?'
54
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+'&'
75 }
76
77 // dodaj gi i filtrite za specifikacija
78
79 // izdvoj metod da ti pravi querystring
80
81 axios.get('/phones'+filters)
82 .then(response => {
83 this.setState({
84 phones: response.data,
85 numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
86 },(e) => this.setNewPage(e,this.state.currentPage))
87 }
88 )
89 .catch(error => console.log(error))
90 console.log(filters)
91 }
92 }
93
94 componentDidMount() {
95 axios.get('/phones'+this.getQueryString())
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 }
105
106
107 setNewPage = (event,page) => {
108
109 const indexOfLastPhone = parseInt(page) * this.state.phonesPerPage;
110 const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
111
112 const currPhones = this.state.phones.slice(indexOfFirstPhone, indexOfLastPhone)
113
114 this.setState({
115 currentPage: parseInt(page),
116 currentPhones: currPhones
117 })
118
119 }
120
121 render() {
122
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
131 {this.state.currentPhones.map((phone,idx) => <Grid key={idx} className='phonecardgrid-item' item md={3}>
132 <PhoneCardComponent id={phone.id} brand={phone.brand}
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>
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
142 </div>
143 )
144 }
145}
146
147export default PhoneCardGridComponent
Note: See TracBrowser for help on using the repository browser.