Ignore:
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
Files:
11 added
1 deleted
15 edited

Legend:

Unmodified
Added
Removed

  • phonelux-frontend/src/App.js

    r775e15e r7e88e46  
    66import RegisterPageComponent from "./components/RegisterPageComponent";
    77import PhoneOfferDetailsComponent from "./components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent";
    8 
     8import { UserProvider } from "./context/UserContext";
     9import UserFavouriteOffersComponent from "./components/UserFavouriteOffersComponent/UserFavouriteOffersComponent";
     10import SuperAdminComponent from "./components/SuperAdminComponent/SuperAdminComponent";
     11import EditOfferComponent from "./components/EditOfferComponent/EditOfferComponent";
    912
    1013
    … …  
    1215function App() { 
    1316  return (
     17    <UserProvider>
    1418    <BrowserRouter>
    1519      <Routes>
    … …  
    1923        <Route path="/phones/:phoneId" element={<PhonePageComponent/>} />
    2024        <Route path="/phoneoffer/:offerId" element={<PhoneOfferDetailsComponent/>} />
    21 
     25        <Route path="/user/:userId/favouriteoffers" element={<UserFavouriteOffersComponent/>} />
     26        <Route path="/management/users" element={<SuperAdminComponent/>}/>
     27        <Route path="/admin/editoffer/:offerId" element={<EditOfferComponent/>}/>
    2228      </Routes>
    2329    </BrowserRouter>
    24 
     30    </UserProvider>
    2531  );
    2632}

  • phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js

    r775e15e r7e88e46  
    77import IconButton from '@mui/material/IconButton';
    88import Typography from '@mui/material/Typography';
    9 import InputBase from '@mui/material/InputBase';
    109import Badge from '@mui/material/Badge';
    1110import MenuItem from '@mui/material/MenuItem';
    1211import Menu from '@mui/material/Menu';
    1312import MenuIcon from '@mui/icons-material/Menu';
     13import InputBase from '@mui/material/InputBase';
    1414import SearchIcon from '@mui/icons-material/Search';
    1515import AccountCircle from '@mui/icons-material/AccountCircle';

  • phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css

    r775e15e r7e88e46  
    99    height: 200px;
    1010    margin-top: -65px;
     11    cursor: pointer;
    1112}
    1213

  • phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js

    r775e15e r7e88e46  
    66
    77export default class HeaderComponent extends Component {
     8
     9
     10  redirectToHomepage = () =>{
     11    window.location.href = "/"
     12  }
    813  render() {
    914    return (
    … …  
    1318      </div>
    1419      <div className='header-component'>
    15           <Link style={{ textDecoration: 'none' }} to={"/"}>
    16         <img src={logo}></img>
    17         </Link>
     20          {/* <Link style={{ textDecoration: 'none' }} to={"/"}> */}
     21        <img className='phonelux-logo' onClick={this.redirectToHomepage} src={logo}></img>
     22        {/* </Link> */}
    1823      </div>
    1924      </>

  • phonelux-frontend/src/components/HomepageComponent.js

    r775e15e r7e88e46  
    11import React, { Component } from 'react'
     2import UserContext from '../context/UserContext'
    23import GroupedFiltersComponent from './GroupedFiltersComponent/GroupedFiltersComponent'
    34import HeaderComponent from './HeaderComponent/HeaderComponent'
    … …  
    4950
    5051  }
    51 
     52 
    5253  if(e.hasOwnProperty('sortBy'))
    5354  {
    … …  
    6061
    6162  render() {
     63    console.log(this.context)
     64    console.log(localStorage.getItem('token'))
    6265    return (
    6366        <>
    … …  
    7073}
    7174
     75HomepageComponent.contextType = UserContext
     76
     77
    7278export default HomepageComponent

  • phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js

    r775e15e r7e88e46  
    66import { Link } from 'react-router-dom';
    77import axios from 'axios';
    8 
    9 
    108
    119export class LoginFormComponent extends Component {
    … …  
    4442      axios(config)
    4543      .then((response) => {
     44        const {access_token} = response.data
    4645       // store access token in local storage, redirect to homepage
    47        console.log(response.data)
     46      localStorage.setItem('token', access_token)
     47      window.location.href="/"
    4848      })
    4949      .catch((error) => {
    … …  
    6464
    6565render() {
    66 
    67   const {email,password} = this.state
    6866
    6967  return (
    … …  
    108106}
    109107
     108
    110109export default LoginFormComponent

  • phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css

    r775e15e r7e88e46  
    99}
    1010
     11.navbar-logout-box-icon{
     12    font-size: 40px;
     13    margin-top: 10px;
     14}
     15
    1116.navbar-account-box-icon:hover{
    1217    cursor: pointer;
    1318}
    1419
     20.navbar-logout-box-icon:hover{
     21    cursor: pointer;
     22}
    1523
    16 /* style={{ fontSize: '50px', marginTop: '10px' }} */
     24.navbar-favouriteoffers-icon:hover{
     25    cursor: pointer;
     26}
     27
     28.navbar-superadmin-icon:hover{
     29    cursor: pointer;
     30}
     31

  • phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js

    r775e15e r7e88e46  
    88import PersonIcon from '@mui/icons-material/Person';
    99import LogoutIcon from '@mui/icons-material/Logout';
     10import StarsIcon from '@mui/icons-material/Stars';
     11import UserContext from '../../context/UserContext';
     12import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
    1013
    1114export class NavbarComponent extends Component {
    … …  
    1518   
    1619      this.state = {
    17          profileSectionOpen: false
     20       
    1821      }
     22    }
     23
     24    logOut = () => {
     25      localStorage.clear()
     26      window.location.href = "/"
    1927    }
    2028   
    … …  
    2230    return (
    2331      <div className='phonelux-navbar'>
     32         {
     33          localStorage.getItem('token') && this.context.role == 'SUPERADMIN' ?
     34          <Tippy placement='bottom' content='Менаџмент со корисници'>
     35            <Link style={{color: 'black'}} to={"/management/users"}>
     36              <SupervisorAccountIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-superadmin-icon'/>
     37            </Link>
     38          </Tippy> : <></>
     39        }
     40        {
     41          localStorage.getItem('token') ?
     42          <Tippy placement='bottom' content='Омилени понуди'>
     43            <Link style={{color: 'black'}} to={"/user/"+this.context.userId+"/favouriteoffers"}>
     44              <StarsIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-favouriteoffers-icon'/>
     45            </Link>
     46          </Tippy> : <></>
     47        }
     48
     49        { localStorage.getItem('token') ?
     50        <Tippy placement='bottom' content='Одјави се'>
     51        <LogoutIcon onClick={this.logOut} style={{fontSize: '40px', marginTop: '10px' }} className='navbar-logout-box-icon'/>
     52        </Tippy>
     53        :
    2454        <Tippy placement='bottom' content='Најави се'>
    2555        <Link style={{color: 'black'}} to={"/login"}> <PersonIcon  style={{fontSize: '50px', marginTop: '10px' }} className='navbar-account-box-icon'/></Link>
    2656        </Tippy>
     57        }
    2758
    28         {/* favourite offers icon goes here */}
    2959
    3060      </div>
    … …  
    3363}
    3464
     65NavbarComponent.contextType = UserContext
     66
    3567export default NavbarComponent

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

    r775e15e r7e88e46  
    2727    transition: box-shadow 0.5s, background-color 0.5s ;
    2828}
     29
     30.phone-offer-favouriteoffer-icon:hover{
     31    cursor: pointer;
     32}
     33
     34.phone-offer-cheaperoffers-icon{
     35    cursor: pointer;
     36}

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

    r775e15e r7e88e46  
    22import { Link } from 'react-router-dom'
    33import './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';
    411
    512export class PhoneOfferComponent extends Component {
    … …  
    1219      }
    1320    }
     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    }
    1474   
    1575   
    1676  render() {
    17     // console.log(this.props)
    1877    return (
    1978      <tr className='phone-with-offers-table-row'>
    … …  
    2281      <td>{this.props.price} ден.</td>
    2382      <td>
     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
    24106        <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
    25107          <button className='phone-offer-specifications-button'>Спецификации</button>
    … …  
    31113}
    32114
     115PhoneOfferComponent.contextType = UserContext
    33116export default PhoneOfferComponent
    34117

  • phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css

    r775e15e r7e88e46  
    1919.phone-offer-details-table-row{
    2020    border: 1px solid gainsboro;
    21 
    2221}
    2322
    … …  
    6766.phone-offer-details-last-updated-wrapper{
    6867    display: flex;
     68    width: 100%;
    6969    justify-content: start;
     70    align-items: center;
     71}
     72
     73.phone-offer-details-edit-header{
     74    width: 100%;
     75    margin-left: 20px;
     76    padding-top: 10px;
     77    border: 1px solid black;
     78    background-color:  rgb(232, 243, 121);
     79    border-radius: 30px;
     80    text-align: center;
     81    padding: 10px;
     82}
     83
     84.phone-offer-details-edit-header:hover{
     85    cursor: pointer;
     86    background-color: rgb(212, 219, 140);
     87    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
     88    transition: box-shadow 0.5s, background-color 0.5s ;   
     89}
     90
     91.link-offer-edit{
     92    width: 15%;
     93    height: fit-content;
     94    text-decoration: none;
     95    display: flex;
    7096}
    7197

  • phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js

    r775e15e r7e88e46  
    33import './PhoneOfferDetailsComponent.css'
    44import HeaderComponent from '../HeaderComponent/HeaderComponent'
     5import UserContext from '../../context/UserContext'
     6import { Link } from 'react-router-dom'
    57
    68
    … …  
    2628
    2729  render() {
    28     console.log(this.state)
    2930    return (
    3031      <div className='phone-offer-details-main'>
    … …  
    3334          <h3 className='phone-offer-details-last-updated-header'>Последно ажурирана: {this.state.offer == null ||
    3435          this.state.offer.last_updated == null ? '#' : this.state.offer.last_updated.split('T')[0]}</h3>
     36          {
     37            localStorage.getItem('token') && (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN') ?
     38            <Link className='link-offer-edit' style={{color:'black'}} to={'/admin/editoffer/'+this.state.offerId}>
     39              <h3 className='phone-offer-details-edit-header'>Измени понуда</h3>
     40              </Link> : <></>
     41          }
    3542        </div>
    3643        <div className='phone-offer-details-table-wrapper'>
    … …  
    116123}
    117124
     125PhoneOfferDetailsComponent.contextType = UserContext
     126
    118127export default PhoneOfferDetailsComponent

  • phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css

    r775e15e r7e88e46  
    6969    border-radius: 50px;
    7070}
     71
     72

  • phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js

    r775e15e r7e88e46  
    55import './PhoneWithOffersComponent.css'
    66import phoneImg from '../../images/phone.png'
     7import UserContext from '../../context/UserContext'
     8
    79
    810export class PhoneWithOffersComponent extends Component {
    … …  
    1214   
    1315      this.state = {
    14          phone_offers: []
     16         phone_offers: [],
     17         loggedUserFavouriteOffers: []
    1518      }
    1619    }
    … …  
    2124          this.setState({
    2225              phone_offers: response.data
     26          }, this.getFavouriteOffersForLoggedUser)
     27      }).catch(error => console.log(error))
     28    }
     29
     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
    2345          })
    24       }).catch(error => console.log(error))
     46        })
     47        .catch(error => {
     48          console.log(error);
     49        });
     50      }
    2551    }
    2652
    … …  
    6086                this.state.phone_offers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
    6187                is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
    62                 price={offer.price} offer_url={offer.offer_url}
     88                price={offer.price} offer_url={offer.offer_url} loggedUserFavouriteOffers={this.state.loggedUserFavouriteOffers}
     89                getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser}
    6390                />)
    6491              }
    … …  
    73100}
    74101
     102PhoneWithOffersComponent.contextType = UserContext
     103
    75104export default PhoneWithOffersComponent

  • phonelux-frontend/src/index.js

    r775e15e r7e88e46  
    44import App from './App';
    55import reportWebVitals from './reportWebVitals';
    6 import Data from './components/DataManager';
    76
    8 window.Data = Data;
    97const root = ReactDOM.createRoot(document.getElementById('root'));
    108root.render(
Note: See TracChangeset for help on using the changeset viewer.