Skip to content

Commit

Permalink
fixed filter functionality along with addition of more functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
redoC-A2k committed Oct 11, 2020
1 parent 976f608 commit 286b1d1
Show file tree
Hide file tree
Showing 9 changed files with 243 additions and 161 deletions.
2 changes: 1 addition & 1 deletion client/src/components/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ class Header extends Component {

return (
<div className="header">
<Navbar/>
<Navbar toggleBool={(value)=>{this.props.toggleBool(value)}} applyFilterPrice={(price)=>{this.props.applyFilterPrice(price)}} applyFilterCategory={(category)=>{this.props.applyFilterCategory(category)}}/>
<div>
<div style={{minWidth:"15vh",display:"flex",justifyContent:"center"}}>
<div style={{display:"block",fontSize:"13vh",position:"absolute",top:"10px",color:"white"}}>We Care for you </div>
Expand Down
46 changes: 21 additions & 25 deletions client/src/components/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,30 @@ import { Component } from "react"
import styles from "./navbar.module.css"
import { Link } from 'react-router-dom';
import { MenuOutlined, ArrowLeftOutlined, UserOutlined, ShoppingOutlined } from "@ant-design/icons"
import { filterByPrice, filterByCategory } from "../redux/ActionCreators/filter";
import { connect } from "react-redux";

const { Header, Sider } = Layout;
const { SubMenu } = Menu;

const mapDispatchToProps = (dispatch) => {
return {
filterByPrice: (price) => { dispatch(filterByPrice(price)) },
filterByCategory:(category) => {dispatch(filterByCategory(category))}
}
}

class Navbar extends Component {
constructor(props) {
super(props);
this.state = {
collapsed: true,
priceInput: 10000,
bool:true
price:10000,
bool: true,
category:"all"
}
}

componentDidMount() {
window.onscroll = () => {
let elem = document.getElementById("hider")
if (window.pageYOffset > 150) {
if(elem!==undefined)
elem.style.top = "0";
if (elem !== undefined)
elem.style.top = "0";
}
if ((window.pageYOffset < 150)&&(this.state.bool)) {
if ((window.pageYOffset < 150) && (this.state.bool)) {
elem.style.top = "-55px";
}
}
Expand All @@ -45,6 +38,7 @@ class Navbar extends Component {
this.setState({ collapsed: !this.state.collapsed, })
}
render() {
// this.props.applyFilter(this.state.price,this.state.category)
const menu = (
<Menu style={{ border: "0.2px solid #434343", width: "100%", marginRight: "30px" }}>
<Menu.Item>
Expand All @@ -67,13 +61,14 @@ class Navbar extends Component {
<Menu.Item key="1">
<Row style={{ width: "100%" }}>
<Col span={16}>
<Slider value={this.state.priceInput} tipFormatter={null} onChange={(value) => {
this.setState({ priceInput: value })
this.props.filterByPrice(this.state.priceInput)
<Slider value={this.state.price} tipFormatter={null} onChange={(value) => {
this.props.toggleBool(false)
this.setState({ price: value })
this.props.applyFilterPrice(value)
}} min={100} max={10000} />
</Col>
<Col span={8}>
<input value={this.state.priceInput} onChange={(value) => { this.setState({ priceInput: value.target.value }) }} />
<input value={this.state.price} />
</Col>
</Row>
</Menu.Item>
Expand All @@ -82,8 +77,10 @@ class Navbar extends Component {
{/* <Menu.Item key="2">Masks</Menu.Item>
<Menu.Item key="3">PPE kit</Menu.Item> */}
<Radio.Group onChange={(e) => {
this.props.toggleBool(false)
let category = e.target.value;
this.props.filterByCategory(category)
this.setState({category:category})
this.props.applyFilterCategory(category)
}}>
<br />
<Radio value={"all"}>
Expand All @@ -103,30 +100,29 @@ class Navbar extends Component {
</Radio>
<br />
<Radio value={"disinfectant"}>
disinfectant
Disinfectant
</Radio>
<br />
<Radio value={"sanitizer"}>
sanitizer
Sanitizer
</Radio>
<br />
<Radio value={"thermometer"}>
thermometer
Thermometer
</Radio>
<br />
<Radio value={"other"}>
other
Other
</Radio>
<br />

</Radio.Group>
</SubMenu>
</Menu>
</Sider>
<Layout>
<div id="hider" className={styles.nav} >
<Header className="navHeader" style={{ borderBottom: "4px solid #1890ff" }}>
{this.state.collapsed ? <MenuOutlined className="menuicon" onClick={()=>{this.toggle();this.setState({bool:false})}} /> : <ArrowLeftOutlined className="arrowicon" onClick={()=>{this.toggle();this.setState({bool:true})}} />}
{this.state.collapsed ? <MenuOutlined className="menuicon" onClick={() => { this.toggle(); this.setState({ bool: false }) }} /> : <ArrowLeftOutlined className="arrowicon" onClick={() => { this.toggle(); this.setState({ bool: true }) }} />}
<div style={{ position: "relative", display: "inline-block", fontSize: "3em", paddingBottom: "4px", color: "#1890ff" }}><b>CovidMart<ShoppingOutlined /> </b></div>
<Dropdown arrow placement="bottomCenter" overlay={menu}><UserOutlined className="usericon" /></Dropdown>
</Header>
Expand All @@ -138,4 +134,4 @@ class Navbar extends Component {
}
}

export default connect(null, mapDispatchToProps)(Navbar);
export default Navbar;
53 changes: 0 additions & 53 deletions client/src/redux/ActionCreators/fetchAllProducts.js

This file was deleted.

129 changes: 99 additions & 30 deletions client/src/redux/ActionCreators/filter.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,113 @@
import { FILTER_BY_PRICE ,FILTER_BY_CATEGORY} from "../types";
export const filterByPrice = (price) => {
import { FILTERED_PRODUCTS } from "../types";
// export const filterByPrice = (price,noOfProducts) => {
// return (dispatch) => {
// console.log(noOfProducts)
// let newArray = []
// fetch("http://localhost:4000/filterByPrice", {
// method: "post",
// headers: {
// authorization: "Bearer " + localStorage.getItem("jwt"),
// "Content-Type": "application/json",
// },
// body: JSON.stringify({
// price: price,
// }),
// })
// .then((res) => res.json())
// .then((filteredProducts) => {
// for(let i = 0 ; i < noOfProducts && i < filteredProducts.length; i++){
// // filteredProducts[i] =
// newArray.push(filteredProducts[i])
// }
// dispatch({
// type: FILTER_BY_PRICE,
// payload: newArray,
// });
// });
// };
// };

// export const filterByCategory = (category,noOfProducts) => {
// return (dispatch)=>{
// fetch("http://localhost:4000/filterByCategory",{
// method:"post",
// headers:{
// authorization:"Bearer "+localStorage.getItem("jwt"),
// "Content-Type":"application/json"
// },
// body:JSON.stringify({
// category:category
// })
// })
// .then(res => res.json())
// .then(filteredProducts =>{
// dispatch({
// type:FILTER_BY_CATEGORY,
// payload:filteredProducts
// })
// } )
// }
// };

export const applyFilter = (price, category, noOfProducts) => {
return (dispatch) => {
fetch("http://localhost:4000/filterByPrice", {
fetch("http://localhost:4000/filter", {
method: "post",
headers: {
authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
body: JSON.stringify({
price: price,
category: category,
noOfProducts: noOfProducts,
}),
})
.then((res) => res.json())
.then((filteredProducts) => {
dispatch({
type: FILTER_BY_PRICE,
payload: filteredProducts,
.then((products) => {
console.log(products)
// console.log(products);
let newArrayOfProducts = [];
let putInArray = (product) => {
newArrayOfProducts.push(product);
};
new Promise((resolve, rej) => {
products.map((product, ind) => {
if (product.rating.length !== 0) {
let sum = 0;
new Promise((res, rej) => {
let len = product.rating.length
product.rating.map((eachRating, index) => {
sum = sum + eachRating.value;
if(index === len-1){
res()
console.log("resolved")
}
});
sum = sum / len;
product.rating = {
value: sum,
};
}).then(() => {
if(ind === products.length-1)
resolve()
putInArray(product)
});
} else if (ind === products.length - 1) {
product.rating = {
value: 0,
};
putInArray(product);
resolve();
} else {
product.rating = {
value: 0,
};
putInArray(product);
}
});
}).then(() => {
dispatch({ type: FILTERED_PRODUCTS, products: newArrayOfProducts });
});
});
};
};

export const filterByCategory = (category) => {
return (dispatch)=>{
fetch("http://localhost:4000/filterByCategory",{
method:"post",
headers:{
authorization:"Bearer "+localStorage.getItem("jwt"),
"Content-Type":"application/json"
},
body:JSON.stringify({
category:category
})
})
.then(res => res.json())
.then(filteredProducts =>{
dispatch({
type:FILTER_BY_CATEGORY,
payload:filteredProducts
})
} )
}
};
14 changes: 3 additions & 11 deletions client/src/redux/Reducers/dbdataReducer.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
import { FETCH_ALL_PRODUCTS, FILTER_BY_PRICE, FILTER_BY_CATEGORY } from "../types";
import { FILTERED_PRODUCTS } from "../types";
export const dbdataReducer = (state = null, action) => {
if (action.type === FETCH_ALL_PRODUCTS) {
return action.dbdata;
if (action.type === FILTERED_PRODUCTS) {
return action.products;
}

else if (action.type === FILTER_BY_PRICE) {
return action.payload
}

else if(action.type === FILTER_BY_CATEGORY){
return action.payload
}

else return state;
};
5 changes: 3 additions & 2 deletions client/src/redux/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const INCREMENT_PRODUCT_IN_CART = "INCREMENT_PRODUCT_IN_CART";
export const ADD_PRODUCT_IN_CART = "ADD_PRODUCT_IN_CART";
export const DELETE_PRODUCT_FROM_CART = "DELETE_PRODUCT_FROM_CART";
export const FETCH_CART = "FETCH_CART";
export const FILTER_BY_PRICE = "FILTER_BY_PRICE";
export const FILTER_BY_CATEGORY = "FILTER_BY_CATEGORY";
// export const FILTER_BY_PRICE = "FILTER_BY_PRICE";
// export const FILTER_BY_CATEGORY = "FILTER_BY_CATEGORY";
export const FILTERED_PRODUCTS = "FILTERED_PRODUCTS"
export const FETCH_USER = "FETCH_USER"
Loading

0 comments on commit 286b1d1

Please sign in to comment.