Changeset 7e88e46 for phonelux-frontend/src/components/PhoneOfferComponent

Timestamp:

09/17/22 01:24:24 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

5201690

Parents:

775e15e

Message:

Added more components

Location:

phonelux-frontend/src/components/PhoneOfferComponent

Files:

• PhoneOfferComponent.css (modified) (1 diff)
• PhoneOfferComponent.js (modified) (4 diffs)

phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css

@@ -27 +27 @@
     transition: box-shadow 0.5s, background-color 0.5s ;
 }
+
+.phone-offer-favouriteoffer-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-cheaperoffers-icon{
+    cursor: pointer;
+}

phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js

@@ -2 +2 @@
 import { Link } from 'react-router-dom'
 import './PhoneOfferComponent.css'
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import StarIcon from '@mui/icons-material/Star';
+import Tippy from '@tippyjs/react';
+import axios from 'axios';
+import UserContext from '../../context/UserContext';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import CheckIcon from '@mui/icons-material/Check';
 
 export class PhoneOfferComponent extends Component {
@@ -12 +19 @@
       }
     }
+
+    addToFavourite = () => {
+      var config = {
+        method: 'put',
+        url: '/user/'+this.context.userId+'/addoffer/'+this.props.id,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+
+      axios(config)
+      .then(response => {
+        this.props.getFavouriteOffersForLoggedUser()
+      })
+      .catch(error => {
+        console.log(error)
+      })
+    }
+
+    removeFromFavourite = () => {
+      var config = {
+        method: 'put',
+        url: '/user/'+this.context.userId+'/removeoffer/'+this.props.id,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+
+      axios(config)
+      .then(response => {
+        this.props.getFavouriteOffersForLoggedUser()
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
+
+
+    getCheaperOffers = () =>{
+      var config = {
+        method: 'get',
+        url: '/phoneoffer/'+this.props.id+'/cheaperoffers',
+        headers: { }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.props.handleOpen(response.data,this.props.price)
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
     
     
   render() {
-    // console.log(this.props)
     return (
       <tr className='phone-with-offers-table-row'>
@@ -22 +81 @@
       <td>{this.props.price} ден.</td>
       <td>
+        {
+          window.location.href.split('/')[5] == 'favouriteoffers' ?   
+          <Tippy placement='bottom' content='Прикажи поевтини понуди'>
+            <VisibilityIcon onClick={this.getCheaperOffers} className='phone-offer-cheaperoffers-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy> : <></>
+        }
+        {
+          localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length == 0? 
+          <Tippy placement='bottom' content='Додади во омилени понуди'>
+          <StarBorderIcon onClick={this.addToFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy>
+          : <></>
+        }
+
+        {
+          localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length != 0? 
+          <Tippy placement='bottom' content='Избриши од омилени понуди'>
+          <StarIcon onClick={this.removeFromFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy>
+          : <></>
+        }
+
+
         <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
           <button className='phone-offer-specifications-button'>Спецификации</button>
@@ -31 +113 @@
 }
 
+PhoneOfferComponent.contextType = UserContext
 export default PhoneOfferComponent