1 | import axios from 'axios'
|
---|
2 | import React, { Component } from 'react'
|
---|
3 | import UserContext from '../../context/UserContext'
|
---|
4 | import HeaderComponent from '../HeaderComponent/HeaderComponent'
|
---|
5 | import "./UserFavouriteOffersComponent.css"
|
---|
6 | import StarIcon from '@mui/icons-material/Star';
|
---|
7 | import PhoneOfferComponent from '../PhoneOfferComponent/PhoneOfferComponent'
|
---|
8 | import CheaperOffersComponent from '../CheaperOffersComponent/CheaperOffersComponent'
|
---|
9 |
|
---|
10 | export class UserFavouriteOffersComponent extends Component {
|
---|
11 | constructor(props) {
|
---|
12 | super(props)
|
---|
13 |
|
---|
14 | this.state = {
|
---|
15 | userFavouriteOffers: [],
|
---|
16 | openModal : false,
|
---|
17 | cheaperOffers: [],
|
---|
18 | openedOfferPrice: 0,
|
---|
19 | }
|
---|
20 | }
|
---|
21 |
|
---|
22 | componentDidMount(){
|
---|
23 | this.getFavouriteOffersForLoggedUser()
|
---|
24 | }
|
---|
25 |
|
---|
26 | getFavouriteOffersForLoggedUser = () => {
|
---|
27 | var config = {
|
---|
28 | method: 'get',
|
---|
29 | url: '/user/'+this.context.userId+'/favouriteoffers',
|
---|
30 | headers: {
|
---|
31 | 'Authorization': 'Bearer '+localStorage.getItem('token')
|
---|
32 | }
|
---|
33 | };
|
---|
34 |
|
---|
35 | axios(config)
|
---|
36 | .then(response => {
|
---|
37 | this.setState({
|
---|
38 | userFavouriteOffers: response.data
|
---|
39 | })
|
---|
40 | })
|
---|
41 | .catch(error => {
|
---|
42 | console.log(error)
|
---|
43 | })
|
---|
44 | }
|
---|
45 |
|
---|
46 | handleClose = () =>{
|
---|
47 | this.setState({
|
---|
48 | openModal: false
|
---|
49 | })
|
---|
50 | }
|
---|
51 |
|
---|
52 | handleOpen = (cheaperOffersToShow,offer_price) =>{
|
---|
53 | this.setState({
|
---|
54 | openModal: true,
|
---|
55 | cheaperOffers: cheaperOffersToShow,
|
---|
56 | openedOfferPrice: offer_price
|
---|
57 | })
|
---|
58 | }
|
---|
59 |
|
---|
60 | render() {
|
---|
61 |
|
---|
62 |
|
---|
63 | return (
|
---|
64 | <div className='user-favourite-offers-main'>
|
---|
65 | <HeaderComponent/>
|
---|
66 | <div className='user-favourite-offers-header'>
|
---|
67 | <StarIcon style={{fontSize: '50px', marginTop: '20px', marginRight: '10px'}}/>
|
---|
68 | <h1 className='user-favourite-offers-header-text'>
|
---|
69 | Омилени понуди
|
---|
70 | </h1>
|
---|
71 | <StarIcon style={{fontSize: '50px', marginTop: '20px', marginLeft: '10px'}}/>
|
---|
72 | </div>
|
---|
73 | <table cellPadding={20} className='phone-with-offers-table'>
|
---|
74 | <thead className='phone-with-offers-table-head'>
|
---|
75 | <tr>
|
---|
76 | <th>Продавница</th>
|
---|
77 | <th>Име на понуда</th>
|
---|
78 | <th>Цена</th>
|
---|
79 | <th></th>
|
---|
80 | </tr>
|
---|
81 | </thead>
|
---|
82 | <tbody>
|
---|
83 | {
|
---|
84 | this.state.userFavouriteOffers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
|
---|
85 | is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
|
---|
86 | price={offer.price} offer_url={offer.offer_url} handleOpen={this.handleOpen}
|
---|
87 | loggedUserFavouriteOffers={this.state.userFavouriteOffers}
|
---|
88 | getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser}
|
---|
89 | />)
|
---|
90 | }
|
---|
91 | </tbody>
|
---|
92 | </table>
|
---|
93 | <CheaperOffersComponent
|
---|
94 | cheaperOffers={this.state.cheaperOffers}
|
---|
95 | openModal={this.state.openModal}
|
---|
96 | handleClose={this.handleClose}
|
---|
97 | openedOfferPrice={this.state.openedOfferPrice}/>
|
---|
98 | </div>
|
---|
99 |
|
---|
100 | )
|
---|
101 | }
|
---|
102 | }
|
---|
103 |
|
---|
104 | UserFavouriteOffersComponent.contextType = UserContext
|
---|
105 | export default UserFavouriteOffersComponent
|
---|