[dbd4834] | 1 | import { Paper } from '@mui/material'
|
---|
| 2 | import axios from 'axios'
|
---|
| 3 | import React, { Component } from 'react'
|
---|
| 4 | import PhoneOfferComponent from '../PhoneOfferComponent/PhoneOfferComponent'
|
---|
| 5 | import './PhoneWithOffersComponent.css'
|
---|
| 6 | import phoneImg from '../../images/phone.png'
|
---|
[7e88e46] | 7 | import UserContext from '../../context/UserContext'
|
---|
| 8 |
|
---|
[dbd4834] | 9 |
|
---|
| 10 | export class PhoneWithOffersComponent extends Component {
|
---|
| 11 |
|
---|
| 12 | constructor(props) {
|
---|
| 13 | super(props)
|
---|
| 14 |
|
---|
| 15 | this.state = {
|
---|
[7e88e46] | 16 | phone_offers: [],
|
---|
| 17 | loggedUserFavouriteOffers: []
|
---|
[dbd4834] | 18 | }
|
---|
| 19 | }
|
---|
| 20 |
|
---|
| 21 | componentDidMount(){
|
---|
| 22 | axios.get('/phones/offers/'+this.props.phoneId)
|
---|
| 23 | .then(response => {
|
---|
| 24 | this.setState({
|
---|
| 25 | phone_offers: response.data
|
---|
[7e88e46] | 26 | }, this.getFavouriteOffersForLoggedUser)
|
---|
[dbd4834] | 27 | }).catch(error => console.log(error))
|
---|
| 28 | }
|
---|
| 29 |
|
---|
[7e88e46] | 30 | getFavouriteOffersForLoggedUser = () => {
|
---|
| 31 | if(localStorage.getItem('token'))
|
---|
| 32 | {
|
---|
| 33 | var config = {
|
---|
| 34 | method: 'get',
|
---|
| 35 | url: '/user/'+this.context.userId+'/favouriteoffers',
|
---|
| 36 | headers: {
|
---|
| 37 | 'Authorization': 'Bearer '+localStorage.getItem('token')
|
---|
| 38 | }
|
---|
| 39 | };
|
---|
| 40 |
|
---|
| 41 | axios(config)
|
---|
| 42 | .then(response => {
|
---|
| 43 | this.setState({
|
---|
| 44 | loggedUserFavouriteOffers: response.data
|
---|
| 45 | })
|
---|
| 46 | })
|
---|
| 47 | .catch(error => {
|
---|
| 48 | console.log(error);
|
---|
| 49 | });
|
---|
| 50 | }
|
---|
| 51 | }
|
---|
| 52 |
|
---|
[dbd4834] | 53 | render() {
|
---|
| 54 | return (
|
---|
| 55 | <div className='phone-with-offers-main'>
|
---|
| 56 |
|
---|
| 57 | <div className='phone-with-offers-sub-main'>
|
---|
| 58 | <div className='phone-with-offers-totaloffers-div'>
|
---|
[e5b84dc] | 59 | <h3 className='phone-with-offers-totaloffers-header'>Понуди: {this.props.total_offers}</h3>
|
---|
[dbd4834] | 60 | </div>
|
---|
| 61 |
|
---|
| 62 | <div className='phone-with-offers-image-wrapper'>
|
---|
| 63 | <Paper className='phone-with-offers-paper' elevation={5}>
|
---|
| 64 | <img className='phone-with-offers-image' src={this.props.image_url == null ? phoneImg : this.props.image_url}/>
|
---|
| 65 | </Paper>
|
---|
| 66 | </div>
|
---|
| 67 |
|
---|
| 68 | <div className='phone-with-offers-model-wrapper'>
|
---|
[e5b84dc] | 69 | <h1 className='phone-with-offers-model-header'>{this.props.model}</h1>
|
---|
[dbd4834] | 70 | </div>
|
---|
| 71 | </div>
|
---|
| 72 |
|
---|
| 73 | <div className='phone-with-offers-section'>
|
---|
| 74 |
|
---|
| 75 | <table cellPadding={20} className='phone-with-offers-table'>
|
---|
| 76 | <thead className='phone-with-offers-table-head'>
|
---|
| 77 | <tr>
|
---|
| 78 | <th>Продавница</th>
|
---|
| 79 | <th>Име на понуда</th>
|
---|
| 80 | <th>Цена</th>
|
---|
| 81 | <th></th>
|
---|
| 82 | </tr>
|
---|
| 83 | </thead>
|
---|
| 84 | <tbody>
|
---|
| 85 | {
|
---|
[e5b84dc] | 86 | this.state.phone_offers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
|
---|
[dbd4834] | 87 | is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
|
---|
[7e88e46] | 88 | price={offer.price} offer_url={offer.offer_url} loggedUserFavouriteOffers={this.state.loggedUserFavouriteOffers}
|
---|
| 89 | getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser}
|
---|
[dbd4834] | 90 | />)
|
---|
| 91 | }
|
---|
| 92 | </tbody>
|
---|
| 93 | </table>
|
---|
| 94 |
|
---|
| 95 | </div>
|
---|
| 96 |
|
---|
| 97 | </div>
|
---|
| 98 | )
|
---|
| 99 | }
|
---|
| 100 | }
|
---|
| 101 |
|
---|
[7e88e46] | 102 | PhoneWithOffersComponent.contextType = UserContext
|
---|
| 103 |
|
---|
[dbd4834] | 104 | export default PhoneWithOffersComponent
|
---|