Hello guys. I have some of the product reducers where I add new products every day. Like:
import {v4} from 'node-uuid';
import soap from './img/soap.jpg';
import like from './img/like.svg';
const initialState = {
products: [
{
id: v4(),
title: "Жидкое мыло 250мл.",
description: "TM",
price: 20,
image: soap,
amount: 1000,
cls: "soap",
productName: "Жидкое мыло 250мл.",
heart: like
},
{
id: v4(),
title: "Жидкое мыло турецкое 250мл.",
description: "Turkey soap",
price: 20,
image: soap,
amount: 1000,
cls: "soap",
productName: "Жидкое мыло турецкое 250мл.",
heart: like
},
{
id: v4(),
title: "Жидкое мыло india 250мл.",
description: "India soap",
price: 20,
image: soap,
amount: 1000,
cls: "soap",
productName: "Жидкое мыло india 250мл.",
heart: like
},
{
id: v4(),
title: "asg",
description: "India soap",
price: 20,
image: soap,
amount: 1000,
cls: "soap",
productName: "asfg",
heart: like
},
{
id: v4(),
title: "dsgasg",
description: "India soap",
price: 20,
image: soap,
amount: 1000,
cls: "soap",
productName: "dsgdasfg",
heart: like
},
{
id: v4(),
title: "asdfg123",
description: "India soap",
price: 123,
image: soap,
amount: 1000,
cls: "soap",
productName: "dfgh",
heart: like
},
{
id: v4(),
title: "asdfg123",
description: "India soap",
price: 123,
image: soap,
amount: 1000,
cls: "soap",
productName: "dfgh",
heart: like
}
]
}
const soapReducer = (state = initialState, action) => {
return state;
};
export default soapReducer;
And some others. I combined them all in rootReducer. So this is my header navigation component where I have input that should search those products.
import React, { Component } from 'react';
import Button from '../../UI/Button/Button';
import Input from '../../UI/Input/Input';
import './HeaderNav.scss';
import logo from './logo.svg';
import {Burger, BurgerCatalog} from '../Burger/Burger';
import MenuElems from '../Menu/Menu';
import Backdrop from '../../UI/Backdrop/Backdrop';
import Catalog from '../Catalog/Catalog';
import {NavLink} from 'react-router-dom';
import {connect} from 'react-redux';
class HeaderNav extends Component {
state = {
menu: false,
catalog: false,
openMenu: false,
soap: this.props.soap,
search: ''
}
componentDidMount(){
console.log(this.state.soap);
}
toggleBurgerHandler = () => {
this.setState({
menu: !this.state.menu,
openMenu: !this.state.openMenu
})
}
toggleCatalogHandler = () => {
this.setState({
catalog: !this.state.catalog
})
}
burgerCloseHandler = () => {
this.setState({
menu: false,
openMenu: false
})
}
catalogCloseHandler = () => {
this.setState({
catalog: false
})
}
preventScroll = () => {
document.body.style = "overflow:hidden"
};
searchProductHandler = e => {
console.log(e.target.value);
console.log(this.props.onFindSoap(this.setState({search: e.target.value})));
}
render() {
this.props.cartUpdated();
this.props.likeUpdated();
let total = 0;
this.props.cart.map(item => total += item.product.price * item.quantity);
return (
<>
<header className="header">
<div className="container">
<nav>
<NavLink to="/"><img src={logo} alt="logo"></img></NavLink>
<Button
type={'header'}
onToggle={this.toggleCatalogHandler}
isOpen={this.state.catalog}>
<div className="header__catalog">
<h1>Каталог</h1>
<BurgerCatalog
onToggle={this.toggleCatalogHandler}
isOpen={this.state.catalog}/>
</div>
</Button>
<Input placeholder={'Искать на сайте...'} onChange={this.searchProductHandler} />
<div className="header__items">
<NavLink to="/liked" className="header__heart"><div>
{
this.props.like.length > 0 ? (
<span>{ this.props.like.length }</span>
) : 0
}
</div></NavLink>
<NavLink to="/cart" className="header__cart"><div>
{
this.props.cart.length > 0 ? (
<span>{ this.props.cart.length }</span>
) : 0
}
</div></NavLink>
</div>
<div className="header__menu">
<Burger
onToggle={this.toggleBurgerHandler}
isOpen={this.state.menu}/>
</div>
</nav>
</div>
<MenuElems isOpen={this.state.openMenu} onClose={this.burgerCloseHandler}/>
<Backdrop isOpen={this.state.openMenu} onClick={this.toggleBurgerHandler}/>
<Catalog isOpen={this.state.catalog} />
{this.state.menu ? this.preventScroll() : document.body.style.overflow = ""}
</header>
</>
)
}
}
const mapStateToProps = (state) => {
return {
cart: state.cart.cart,
cartUpdated: () => { return true },
like: state.like.like,
likeUpdated: () => {return true},
soap: state.soap,
}
};
export default connect(mapStateToProps)(HeaderNav);
How Can I make that? Should I create a new searchReducer or what? This is the last piece of the puzzle(website). Thank you in term guys