Changeset e5b84dc for phonelux-frontend/src

Timestamp:

09/11/22 18:03:58 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

775e15e

Parents:

527b93f

Message:

Prototype version

Location:

phonelux-frontend/src

Files:

• App.js (modified) (2 diffs)
• components/DataManager.js (added)
• components/FiltersComponents/FilterPriceComponent.js (modified) (1 diff)
• components/FiltersComponents/SortByComponent.css (modified) (1 diff)
• components/GroupedFiltersComponent/GroupedFiltersComponent.js (modified) (1 diff)
• components/HeaderComponent/HeaderComponent.css (modified) (1 diff)
• components/HeaderComponent/HeaderComponent.js (modified) (3 diffs)
• components/HomepageComponent.js (modified) (5 diffs)
• components/LoginRegisterComponents/LoginFormComponent.css (modified) (4 diffs)
• components/LoginRegisterComponents/LoginFormComponent.js (modified) (4 diffs)
• components/LoginRegisterComponents/RegisterFormComponent.css (modified) (2 diffs)
• components/LoginRegisterComponents/RegisterFormComponent.js (modified) (4 diffs)
• components/NavbarComponent/NavbarComponent.css (added)
• components/NavbarComponent/NavbarComponent.js (added)
• components/PaginationComponent/PaginationComponent.css (deleted)
• components/PaginationComponent/PaginationComponent.js (deleted)
• components/PhoneCardComponent/PhoneCardComponent.css (modified) (3 diffs)
• components/PhoneCardComponent/PhoneCardComponent.js (modified) (1 diff)
• components/PhoneCardGridComponent/PhoneCardGridComponent.css (modified) (1 diff)
• components/PhoneCardGridComponent/PhoneCardGridComponent.js (modified) (7 diffs)
• components/PhoneOfferComponent/PhoneOfferComponent.css (modified) (1 diff)
• components/PhoneOfferComponent/PhoneOfferComponent.js (modified) (3 diffs)
• components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css (added)
• components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js (added)
• components/PhoneWithOffersComponent/PhoneWithOffersComponent.css (modified) (2 diffs)
• components/PhoneWithOffersComponent/PhoneWithOffersComponent.js (modified) (3 diffs)
• index.js (modified) (1 diff)

phonelux-frontend/src/App.js

@@ -1 +1 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import './App.css';
-import GroupedFiltersComponent from "./components/GroupedFiltersComponent/GroupedFiltersComponent";
-import HeaderComponent from "./components/HeaderComponent/HeaderComponent";
-import InputFormComponent from "./components/LoginRegisterComponents/InputFormComponent";
-import LoginFormComponent from "./components/LoginRegisterComponents/LoginFormComponent";
-import RegisterFormComponent from "./components/LoginRegisterComponents/RegisterFormComponent";
-import PaginationComponent from "./components/PaginationComponent/PaginationComponent"
-import PhoneCardComponent from "./components/PhoneCardComponent/PhoneCardComponent";
-import PhoneCardGridComponent from "./components/PhoneCardGridComponent/PhoneCardGridComponent";
 import HomepageComponent from "./components/HomepageComponent"
 import PhonePageComponent from "./components/PhonePageComponent";
-import SortByComponent from "./components/FiltersComponents/SortByComponent";
 import LoginPageComponent from "./components/LoginPageComponent"
 import RegisterPageComponent from "./components/RegisterPageComponent";
+import PhoneOfferDetailsComponent from "./components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent";
+
 
 
@@ -21 +14 @@
     <BrowserRouter>
       <Routes>
-        {/* { <Route path="/" element={<PhoneCardComponent 
-        image_url='https://admin.ledikom.mk/uploads/items/411/1641668143apple-iphone-13-pro-max-1-250x300-pad.jpg?v=1'
-        model='Apple iPhone 13 Pro Max' price='75000'/>}/> } */}
         <Route path="/" element={<HomepageComponent/>}/> 
         <Route path="/login" element={<LoginPageComponent/>}/>
         <Route path="/register" element={<RegisterPageComponent/>}/> 
         <Route path="/phones/:phoneId" element={<PhonePageComponent/>} />
+        <Route path="/phoneoffer/:offerId" element={<PhoneOfferDetailsComponent/>} />
 
       </Routes>

phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js

@@ -18 +18 @@
 
   componentDidMount(){
-
 
   axios.get('/lowestPrice')

phonelux-frontend/src/components/FiltersComponents/SortByComponent.css

@@ -10 +10 @@
     width: 15%;
     background-color: #e6f8ef;
+    margin-right: 15px;
 }

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

@@ -21 +21 @@
   }
   
-
-  componentDidMount(){
-  
-  }
 
   render() {

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

@@ -8 +8 @@
     width: 310px;
     height: 200px;
+    margin-top: -65px;
 }
+
+.homepage-navbar-component{
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    background-color: #B6E2C8;
+}

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

@@ -2 +2 @@
 import { Link } from 'react-router-dom'
 import logo from '../../images/logo_phonelux.png'
+import NavbarComponent from '../NavbarComponent/NavbarComponent'
 import './HeaderComponent.css'
 
@@ -7 +8 @@
   render() {
     return (
+      <>
+      <div className='homepage-navbar-component'>
+        <NavbarComponent/>
+      </div>
       <div className='header-component'>
           <Link style={{ textDecoration: 'none' }} to={"/"}>
@@ -12 +17 @@
         </Link>
       </div>
+      </>
     )
   }

phonelux-frontend/src/components/HomepageComponent.js

@@ -3 +3 @@
 import HeaderComponent from './HeaderComponent/HeaderComponent'
 import PhoneCardGridComponent from './PhoneCardGridComponent/PhoneCardGridComponent'
+
 
 export class HomepageComponent extends Component {
@@ -10 +11 @@
 
   this.state = {
-    shops: null,
-    brands: null,
-    priceRange: null,
-    searchValue: null,
-    sortBy: null
+    shops: '',
+    brands: '',
+    priceRange: '',
+    searchValue: '',
+    sortBy: 'mostPopular'
   }
 }
@@ -46 +47 @@
       searchValue: e.searchValue
     })
+
   }
 
@@ -56 +58 @@
 }
 
+
   render() {
     return (
@@ -61 +64 @@
         <HeaderComponent/>
         <GroupedFiltersComponent passFilters={this.changeFilters}/>
-        <PhoneCardGridComponent/>
+        <PhoneCardGridComponent {...this.state}/>
         </>
     )

phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css

@@ -16 +16 @@
   width: fit-content;
   box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
-  padding-top: 30px;
+  padding-top: 20px;
   border-radius: 60px; 
   background-color: white;
@@ -23 +23 @@
 }
 .loginform-imgs-div {
-    padding-top: 20px;
+    padding-top: 10px;
     justify-content: center;
     display: flex;
@@ -43 +43 @@
 
 .loginform-sub-main-div > div{
-  margin-bottom: 50px;
+  margin-bottom: 30px;
   margin-left: 80px;
   margin-right: 80px;
@@ -137 +137 @@
     color: blue;
 }
- .register-link > a{
-     color: rgb(53, 99, 70);
-     text-decoration: none;
+
+
+
+ .registerform-link{
+  color: rgb(53, 99, 70);
+  text-decoration: none;
  }
 
- .register-link > a:hover{
-  color: blue;
+ .registerform-link:hover{
+   color: blue;
  }
+
+ .loginform-message-wrapper{
+  display: flex;
+  justify-content: center;
+ }
+
+ .loginform-error-message{
+  color: red;
+  border: 1px solid red;
+  width: fit-content;
+  padding: 10px;
+  border-radius: 50px;
+  background-color: rgb(251, 224, 224);
+ }

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

@@ -17 +17 @@
       email: '',
       password: '',
+      serverResponse: ''
     }
   }
@@ -42 +43 @@
 
       axios(config)
-      .then(function (response) {
-        console.log(response.data);
+      .then((response) => {
+       // store access token in local storage, redirect to homepage
+       console.log(response.data)
       })
-      .catch(function (error) {
-        console.log(error);
+      .catch((error) => {
+        this.setState({
+          serverResponse: 'error'
+        })
       });
 
@@ -67 +71 @@
        <div className="loginform-sub-main-div">
          <div>
-
+          {this.state.serverResponse == 'error' ? <div className='loginform-message-wrapper'>
+                          <h5 className='loginform-error-message'>Невалидна е-маил адреса или лозинка!</h5></div> : <></>}
            <div className="loginform-imgs-div">
              <div className="loginform-image-container">
@@ -93 +98 @@
             </div>  
            </form>
-           <p className='register-link'><Link to={"/register"}><a>Регистрирај се</a></Link></p>
+           <p className='register-link'><Link className='registerform-link' to={"/register"}>Регистрирај се</Link></p>
   
          </div>

phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css

@@ -23 +23 @@
   }
   .registerform-imgs-div {
-      padding-top: 20px;
+      padding-top: 5px;
       justify-content: center;
       display: flex;
@@ -158 +158 @@
   }
 
+  .registerform-message-wrapper{
+    display: flex;
+    justify-content: center;
+  }
+
+  .registerform-error-message{
+    color: red;
+    border: 1px solid red;
+    width: fit-content;
+    padding: 10px;
+    border-radius: 50px;
+    background-color: rgb(251, 224, 224);
+  }
+
+  .registerform-success-message{
+    color: green;
+    border: 1px solid green;
+    width: fit-content;
+    padding: 10px;
+    border-radius: 50px;
+    background-color: #B6E2C8;
+  }
 
 

phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js

@@ -20 +20 @@
         password: '',
         confirmPassword:'',
+        serverResponse: ''
       }
     }
@@ -43 +44 @@
 
         axios(config)
-        .then(function (response) {
-          console.log(response);
+        .then((response) => {
+          this.setState({
+            serverResponse: response.data
+          })
         })
-        .catch(function (error) {
-          console.log(error);
+        .catch((error) => {
+          this.setState({
+            serverResponse: error.response.data
+          })
         });
 
@@ -59 +64 @@
 
 
-    
-
   render() {
 
@@ -69 +72 @@
          <div className="registerform-sub-main-div">
            <div>
+
+            {(() => {
+              if(this.state.serverResponse == '')
+              {
+                return <></> 
+              }
+
+              if(this.state.serverResponse != '' && this.state.serverResponse.includes('Error'))
+              {
+                return <div className='registerform-message-wrapper'>
+                          <h5 className='registerform-error-message'>{this.state.serverResponse.split(':')[1]}</h5> </div>
+              }
+
+              if(this.state.serverResponse != '' && this.state.serverResponse.includes('token'))
+              {
+                return <div className='registerform-message-wrapper'>
+                          <h5 className='registerform-success-message'>Вашата регистрација е во тек. Потврдете на вашата е-маил адреса!</h5> </div>
+              }
+
+            })()}
 
              <div className="registerform-imgs-div">

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

@@ -1 +1 @@
 .phonecard{
-    background-color: #B6E2C8;
+    /* background-color: #B6E2C8; */
     padding:15px;
     justify-items: center;
+    padding-top: 35px;
     width: 250px;
     height: 400px;
     border-radius: 25px;
+    border: 3px solid #B6E2C8;
+    border-radius: 50px;
 }
 
 .phonecard:hover{
-    background-color: #84c69f;
+    /* background-color: #B6E2C8; */
     cursor: pointer;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+    border-radius: 50px;
 }
 
@@ -26 +32 @@
 
 .phonecard-lowestprice-header, .phonecard-totaloffers-header{
-    margin-top: -10px;
-    color: rgb(34, 106, 106);
-    text-align: center;
+    margin-top: 20px;
+    text-align: right;
+}
+
+.phonecard-totaloffers-header{
+    margin-top: -15px;
 }
 
 .phonecard-model-header{
     text-align: center;
+    border: 1px solid rgb(161, 165, 163);
+    border-radius: 20px 100px;
+    background-color: rgb(222, 228, 225);
+    padding: 5px;
+    padding-right: 10px;
+    
 }
 
@@ -44 +59 @@
 }
 
+.phonecard-lowestprice-header{
+    /* color: rgb(24, 117, 24); */
+}
+
+.phonecard-totaloffers-header{
+    /* color: rgb(24, 117, 24); */
+}
+
 .phonecard > h5 > p{
     display: inline;

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

@@ -24 +24 @@
         <h3 className='phonecard-model-header'>{this.props.model}</h3>
         <h5 className='phonecard-lowestprice-header'>Најниска цена: <p className='phonecard-lowestprice'>{this.props.lowestPrice}</p> ден.</h5>
-        <h6 className='phonecard-totaloffers-header'>Вкупно понуди: <p className='phonecard-totaloffers'>{this.props.total_offers}</p></h6>
+        <h5 className='phonecard-totaloffers-header'>Вкупно понуди: <p className='phonecard-totaloffers'>{this.props.total_offers}</p></h5>
       </div>
       </Paper>

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

@@ -15 +15 @@
 }
 
+.pagination-wrapper{
+    margin-top: 40px;
+    padding-bottom: 40px;
+    display: flex;
+    justify-content: center;
+}
 
+
+

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

@@ -1 @@
-import { Grid } from '@mui/material'
+import { Grid, Pagination } from '@mui/material'
 import axios from 'axios'
 import React, { Component } from 'react'
-import PaginationComponent from '../PaginationComponent/PaginationComponent'
 import '../PhoneCardComponent/PhoneCardComponent'
 import PhoneCardComponent from '../PhoneCardComponent/PhoneCardComponent'
@@ -15 +14 @@
     this.state = {
       phones: [],
-      loading: true,
       currentPage: 1,
       phonesPerPage: 12,
@@ -24 +22 @@
   }
 
+  componentDidUpdate(prevProps) {
+    if(JSON.stringify(prevProps) != JSON.stringify(this.props)){
+      let filters = '?'
+
+      if(this.props.shops)
+      {
+        filters += 'shops='+this.props.shops+'&'
+      }
+      if(this.props.brands)
+      {
+        filters += 'brands='+this.props.brands+'&'
+      }
+      if(this.props.priceRange)
+      {
+        filters += 'priceRange='+this.props.priceRange+'&'
+      }
+      if(this.props.searchValue)
+      {
+        filters += 'searchValue='+this.props.searchValue+'&'
+      }
+
+      if(this.props.sortBy)
+      {
+        filters += 'sortBy='+this.props.sortBy+'&'
+      }
+
+      axios.get('/phones'+filters)
+      .then(response => {
+        this.setState({
+          phones: response.data,
+          numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
+        },(e) => this.setNewPage(e,this.state.currentPage))
+      }
+      )
+      .catch(error => console.log(error))
+      console.log(filters)
+    }
+  }
+
   componentDidMount() {
-
     axios.get('/phones')
       .then(response => {
         this.setState({
           phones: response.data,
-          loading: false,
           numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
-        },() => this.setNewPage(this.state.currentPage))
+        },(e) => this.setNewPage(e,this.state.currentPage))
       }
       )
@@ -38 +73 @@
   }
 
-  setNewPage = (newPage) => {
-    if(newPage == '')
-    {
-      newPage = this.state.currentPage-1
-    }
 
-    if(newPage == '')
-    {
-      newPage = this.state.currentPage+1
-    }
+  setNewPage = (event,page) => {
 
-
-    const indexOfLastPhone = parseInt(newPage) * this.state.phonesPerPage;
+    const indexOfLastPhone = parseInt(page) * this.state.phonesPerPage;
     const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
 
@@ -56 +82 @@
 
     this.setState({
-      currentPage: parseInt(newPage),
+      currentPage: parseInt(page),
       currentPhones: currPhones
     })
@@ -63 +89 @@
 
   render() {
+
     return (
       <div className='phonecardgrid-wrapper'>
@@ -71 +98 @@
        spacing={2}>
 
-        {this.state.currentPhones.map((phone) => <Grid className='phonecardgrid-item' item md={3}>
-          <PhoneCardComponent key={phone.id} id={phone.id} brand={phone.brand}
+        {this.state.currentPhones.map((phone,idx) => <Grid key={idx} className='phonecardgrid-item' item md={3}>
+          <PhoneCardComponent id={phone.id} brand={phone.brand}
           model={phone.model} image_url={phone.image_url == null ? phoneImage : phone.image_url} total_offers={phone.total_offers} lowestPrice={phone.lowestPrice}/></Grid>)}
 
-        {/* <Grid item xs={12} md={12}>
-        <PaginationComponent
-          currentPage={this.state.currentPage}
-          changePageHandler={this.setNewPage}
-          numberOfPages={this.state.numberOfPages} />
-          </Grid> */}
       </Grid>
-      <PaginationComponent
-          currentPage={this.state.currentPage}
-          changePageHandler={this.setNewPage}
-          numberOfPages={this.state.numberOfPages} />
+
+      <div className='pagination-wrapper'>
+         <Pagination className='paginationcomponent-pagination' onChange={this.setNewPage} page={this.state.currentPage}
+          count={this.state.numberOfPages} color="primary" />
+      </div>
+
       </div>
     )

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

@@ +1 @@
+.phone-with-offers-table-row{
+    font-size: 18px;
+}
+
+.phone-with-offers-table-row > td:first-of-type {
+    font-weight: bold;
+}
+
+.phone-offer-specifications-button{
+    font-size: 17px;
+    padding: 10px;
+    background-color: #B6E2C8;
+    border-radius: 20px;
+    border: 1px solid black;
+}
+
+.phone-with-offers-table-row td:last-of-type{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.phone-offer-specifications-button:hover{
+    cursor: pointer;
+    background-color: rgb(166, 201, 171);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}

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

@@ -1 +1 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import './PhoneOfferComponent.css'
 
 export class PhoneOfferComponent extends Component {
@@ -13 +15 @@
     
   render() {
-    console.log(this.props)
+    // console.log(this.props)
     return (
       <tr className='phone-with-offers-table-row'>
       <td>{this.props.offer_shop}</td>
-      <td><a href={this.props.offer_url}>{this.props.offer_name}</a></td>
+      <td><a style={{ textDecoration: 'none' }} href={this.props.offer_url}>{this.props.offer_name}</a></td>
       <td>{this.props.price} ден.</td>
-      <td></td>
+      <td>
+        <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
+          <button className='phone-offer-specifications-button'>Спецификации</button>
+        </Link>
+        </td>
       </tr>
     )
@@ -27 +33 @@
 export default PhoneOfferComponent
 
-
-
-
-// back_camera: null
-// battery: null
-// chipset: null
-// color: null
-// cpu: null
-// front_camera: null
-// id: 486
-// image_url: "https://setec.mk/image/cache/catalog/Product/51841_0-228x228.jpg"
-// is_validated: false
-// last_updated: "2022-07-26T22:00:00.000+00:00"
-// offer_description: "Apple iPhone 13 128GB Midnight, GSM/CDMA/HSPA/EVDO/LTE/ 5G, Display: Super Retina XDR OLED; HDR10; Dolby Vision; 800 nits (HBM); 1200 nit…"
-// offer_name: "Apple iPhone 13 128GB Midnight"
-// offer_shop: "Setec"
-// offer_shop_code: "51841"
-// offer_url: "https://setec.mk/index.php?route=product/product&path=10066_10067&product_id=51841"
-// operating_system: null
-// price: 63990
-// ram_memory: null
-// rom_memory: null

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

@@ -23 +23 @@
 
 .phone-with-offers-table-row:nth-of-type(even){
-    background-color: #DEE4E1;
+    background-color: #eef2f0;
 }
 
@@ -51 +51 @@
     font-size: 22px;
 }
+
+.phone-with-offers-model-header{
+    border: 1px solid gray;
+    padding: 10px;
+    padding-left: 50px;
+    padding-right: 50px;
+    border-radius: 10px 60px;
+    box-shadow: inset 0px 0px 25px 0px rgb(120, 190, 139);
+    outline: none;
+    background-color: #c4f3d8;
+}
+
+.phone-with-offers-totaloffers-header{
+    padding: 10px;
+    border: 1px solid rgb(199, 193, 193);
+    background-color: #B6E2C8;
+    border-radius: 50px;
+}

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

@@ -31 +31 @@
         <div className='phone-with-offers-sub-main'>
             <div className='phone-with-offers-totaloffers-div'>
-                <h3>Понуди: {this.props.total_offers}</h3>
+                <h3 className='phone-with-offers-totaloffers-header'>Понуди: {this.props.total_offers}</h3>
             </div>
 
@@ -41 +41 @@
 
             <div className='phone-with-offers-model-wrapper'>
-            <h1>{this.props.model}</h1>
+            <h1 className='phone-with-offers-model-header'>{this.props.model}</h1>
             </div>
         </div>
@@ -58 +58 @@
             <tbody>
               {
-                this.state.phone_offers.map((offer) => <PhoneOfferComponent key={offer.offer_id} id={offer.id}
+                this.state.phone_offers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
                 is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
                 price={offer.price} offer_url={offer.offer_url}

phonelux-frontend/src/index.js

@@ -4 +4 @@
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import Data from './components/DataManager';
 
+window.Data = Data;
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(