[dbd4834] | 1 | import React, { Component } from 'react'
|
---|
[e5b84dc] | 2 | import { Link } from 'react-router-dom'
|
---|
| 3 | import './PhoneOfferComponent.css'
|
---|
[7e88e46] | 4 | import StarBorderIcon from '@mui/icons-material/StarBorder';
|
---|
| 5 | import StarIcon from '@mui/icons-material/Star';
|
---|
| 6 | import Tippy from '@tippyjs/react';
|
---|
| 7 | import axios from 'axios';
|
---|
| 8 | import UserContext from '../../context/UserContext';
|
---|
| 9 | import VisibilityIcon from '@mui/icons-material/Visibility';
|
---|
| 10 | import CheckIcon from '@mui/icons-material/Check';
|
---|
[dbd4834] | 11 |
|
---|
| 12 | export class PhoneOfferComponent extends Component {
|
---|
| 13 |
|
---|
| 14 | constructor(props) {
|
---|
| 15 | super(props)
|
---|
| 16 |
|
---|
| 17 | this.state = {
|
---|
| 18 |
|
---|
| 19 | }
|
---|
| 20 | }
|
---|
[7e88e46] | 21 |
|
---|
| 22 | addToFavourite = () => {
|
---|
| 23 | var config = {
|
---|
| 24 | method: 'put',
|
---|
| 25 | url: '/user/'+this.context.userId+'/addoffer/'+this.props.id,
|
---|
| 26 | headers: {
|
---|
| 27 | 'Authorization': 'Bearer '+localStorage.getItem('token')
|
---|
| 28 | }
|
---|
| 29 | };
|
---|
| 30 |
|
---|
| 31 | axios(config)
|
---|
| 32 | .then(response => {
|
---|
| 33 | this.props.getFavouriteOffersForLoggedUser()
|
---|
| 34 | })
|
---|
| 35 | .catch(error => {
|
---|
| 36 | console.log(error)
|
---|
| 37 | })
|
---|
| 38 | }
|
---|
| 39 |
|
---|
| 40 | removeFromFavourite = () => {
|
---|
| 41 | var config = {
|
---|
| 42 | method: 'put',
|
---|
| 43 | url: '/user/'+this.context.userId+'/removeoffer/'+this.props.id,
|
---|
| 44 | headers: {
|
---|
| 45 | 'Authorization': 'Bearer '+localStorage.getItem('token')
|
---|
| 46 | }
|
---|
| 47 | };
|
---|
| 48 |
|
---|
| 49 | axios(config)
|
---|
| 50 | .then(response => {
|
---|
| 51 | this.props.getFavouriteOffersForLoggedUser()
|
---|
| 52 | })
|
---|
| 53 | .catch(error => {
|
---|
| 54 | console.log(error);
|
---|
| 55 | });
|
---|
| 56 | }
|
---|
| 57 |
|
---|
| 58 |
|
---|
| 59 | getCheaperOffers = () =>{
|
---|
| 60 | var config = {
|
---|
| 61 | method: 'get',
|
---|
| 62 | url: '/phoneoffer/'+this.props.id+'/cheaperoffers',
|
---|
| 63 | headers: { }
|
---|
| 64 | };
|
---|
| 65 |
|
---|
| 66 | axios(config)
|
---|
| 67 | .then(response => {
|
---|
| 68 | this.props.handleOpen(response.data,this.props.price)
|
---|
| 69 | })
|
---|
| 70 | .catch(error => {
|
---|
| 71 | console.log(error);
|
---|
| 72 | });
|
---|
| 73 | }
|
---|
[dbd4834] | 74 |
|
---|
| 75 |
|
---|
| 76 | render() {
|
---|
| 77 | return (
|
---|
| 78 | <tr className='phone-with-offers-table-row'>
|
---|
| 79 | <td>{this.props.offer_shop}</td>
|
---|
[e5b84dc] | 80 | <td><a style={{ textDecoration: 'none' }} href={this.props.offer_url}>{this.props.offer_name}</a></td>
|
---|
[dbd4834] | 81 | <td>{this.props.price} ден.</td>
|
---|
[e5b84dc] | 82 | <td>
|
---|
[7e88e46] | 83 | {
|
---|
| 84 | window.location.href.split('/')[5] == 'favouriteoffers' ?
|
---|
| 85 | <Tippy placement='bottom' content='Прикажи поевтини понуди'>
|
---|
| 86 | <VisibilityIcon onClick={this.getCheaperOffers} className='phone-offer-cheaperoffers-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
|
---|
| 87 | </Tippy> : <></>
|
---|
| 88 | }
|
---|
| 89 | {
|
---|
| 90 | localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length == 0?
|
---|
| 91 | <Tippy placement='bottom' content='Додади во омилени понуди'>
|
---|
| 92 | <StarBorderIcon onClick={this.addToFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
|
---|
| 93 | </Tippy>
|
---|
| 94 | : <></>
|
---|
| 95 | }
|
---|
| 96 |
|
---|
| 97 | {
|
---|
| 98 | localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length != 0?
|
---|
| 99 | <Tippy placement='bottom' content='Избриши од омилени понуди'>
|
---|
| 100 | <StarIcon onClick={this.removeFromFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
|
---|
| 101 | </Tippy>
|
---|
| 102 | : <></>
|
---|
| 103 | }
|
---|
| 104 |
|
---|
| 105 |
|
---|
[e5b84dc] | 106 | <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
|
---|
| 107 | <button className='phone-offer-specifications-button'>Спецификации</button>
|
---|
| 108 | </Link>
|
---|
| 109 | </td>
|
---|
[dbd4834] | 110 | </tr>
|
---|
| 111 | )
|
---|
| 112 | }
|
---|
| 113 | }
|
---|
| 114 |
|
---|
[7e88e46] | 115 | PhoneOfferComponent.contextType = UserContext
|
---|
[dbd4834] | 116 | export default PhoneOfferComponent
|
---|
| 117 |
|
---|