source: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.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: 5.5 KB
Line 
1import React, { Component } from 'react'
2import { Link } from 'react-router-dom'
3import './PhoneOfferComponent.css'
4import StarBorderIcon from '@mui/icons-material/StarBorder';
5import StarIcon from '@mui/icons-material/Star';
6import Tippy from '@tippyjs/react';
7import axios from 'axios';
8import UserContext from '../../context/UserContext';
9import VisibilityIcon from '@mui/icons-material/Visibility';
10import CheckIcon from '@mui/icons-material/Check';
11import CompareIcon from '@mui/icons-material/Compare';
12import BookmarkRemoveIcon from '@mui/icons-material/BookmarkRemove';
13
14export class PhoneOfferComponent extends Component {
15
16 constructor(props) {
17 super(props)
18
19 this.state = {
20 }
21 }
22
23 addToFavourite = () => {
24 var config = {
25 method: 'put',
26 url: '/user/'+this.context.userId+'/addoffer/'+this.props.id,
27 headers: {
28 'Authorization': 'Bearer '+localStorage.getItem('token')
29 }
30 };
31
32 axios(config)
33 .then(response => {
34 this.props.getFavouriteOffersForLoggedUser()
35 })
36 .catch(error => {
37 console.log(error)
38 })
39 }
40
41 removeFromFavourite = () => {
42 var config = {
43 method: 'put',
44 url: '/user/'+this.context.userId+'/removeoffer/'+this.props.id,
45 headers: {
46 'Authorization': 'Bearer '+localStorage.getItem('token')
47 }
48 };
49
50 axios(config)
51 .then(response => {
52 this.props.getFavouriteOffersForLoggedUser()
53 })
54 .catch(error => {
55 console.log(error);
56 });
57 }
58
59
60 getCheaperOffers = () =>{
61 var config = {
62 method: 'get',
63 url: '/phoneoffer/'+this.props.id+'/cheaperoffers',
64 headers: { }
65 };
66
67 axios(config)
68 .then(response => {
69 this.props.handleOpen(response.data,this.props.price)
70 })
71 .catch(error => {
72 console.log(error);
73 });
74 }
75
76 handleOfferCompare = () => {
77 let offersToCompare = []
78 if(localStorage.getItem('offersToCompare'))
79 {
80 offersToCompare = JSON.parse(localStorage.getItem('offersToCompare'))
81 }
82
83 if(!offersToCompare.includes(this.props.id) && offersToCompare.length<5)
84 {
85 offersToCompare.push(this.props.id)
86 }
87 else{
88 offersToCompare = offersToCompare.filter(offer => offer != this.props.id)
89 }
90 localStorage.setItem('offersToCompare', JSON.stringify(offersToCompare))
91 this.forceUpdate()
92 }
93
94
95 render() {
96 return (
97 <tr className='phone-with-offers-table-row'>
98 <td>{this.props.offer_shop}</td>
99 <td><a style={{ textDecoration: 'none' }} href={this.props.offer_url}>{this.props.offer_name}</a></td>
100 <td>{this.props.price} ден.</td>
101 <td>
102
103 {/* if else jsx syntax here to add icon */}
104
105 {(() => {
106 if(!localStorage.getItem('token'))
107 {
108 return <></>
109 }
110
111 if(localStorage.getItem('offersToCompare') && localStorage.getItem('offersToCompare').includes(this.props.id))
112 {
113 return <Tippy placement='bottom' content='Избриши понуда за споредба'>
114 <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-selected-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
115 </Tippy>
116 }
117 else{
118 return <Tippy placement='bottom' content='Додади понуда за споредба'>
119 <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
120 </Tippy>
121 }
122 })()}
123 {/* {
124 localStorage.getItem('token') && !localStorage.getItem('offersToCompare').includes(this.props.id)?
125 <Tippy placement='bottom' content='Додади понуда за споредба'>
126 <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
127 </Tippy> : <></>
128 } */}
129 {
130 window.location.href.split('/')[5] == 'favouriteoffers' ?
131 <Tippy placement='bottom' content='Прикажи поевтини понуди'>
132 <VisibilityIcon onClick={this.getCheaperOffers} className='phone-offer-cheaperoffers-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
133 </Tippy> : <></>
134 }
135 {
136 localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length == 0?
137 <Tippy placement='bottom' content='Додади во омилени понуди'>
138 <StarBorderIcon onClick={this.addToFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
139 </Tippy>
140 : <></>
141 }
142
143 {
144 localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length != 0?
145 <Tippy placement='bottom' content='Избриши од омилени понуди'>
146 <StarIcon onClick={this.removeFromFavourite} className='phone-offer-remove-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
147 </Tippy>
148 : <></>
149 }
150
151
152 <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
153 <button className='phone-offer-specifications-button'><b>Спецификации</b></button>
154 </Link>
155 </td>
156 </tr>
157 )
158 }
159}
160
161PhoneOfferComponent.contextType = UserContext
162export default PhoneOfferComponent
163
Note: See TracBrowser for help on using the repository browser.