Changeset e5b84dc for phonelux-frontend/src/components/PhoneCardGridComponent

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/components/PhoneCardGridComponent

Files:

• PhoneCardGridComponent.css (modified) (1 diff)
• PhoneCardGridComponent.js (modified) (7 diffs)

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>
     )