No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
.gitignore
README.md
package.json
yarn.lock

README.md

Inventory Widget

This simple site allows a user to view, search, and filter a sample inventory set.

Github Link:

Inventory widget

Technologies used:

Languages

  • JavaScript
  • HTML5
  • CSS

Frameworks

  • React
  • Bootstrap

Code snippets:

Format less-than ideal data file:

	formatData(){
		var tempProducts = {};
		this.products.data.map((product)=>{
			if(tempProducts[product.category] === undefined){
				tempProducts[product.category] = [];
			}
			tempProducts[product.category].push(product);
			return null;
		});
		this.setState({
			productsByCategory: tempProducts
		});
	}

Real time search functionality as the user types:

	componentWillReceiveProps(newProps){
		const searchTerm = newProps.searchTerm.toLowerCase();
		var tempProducts = [];
		const inStock = newProps.inStock;
		if(inStock){
			this.safeProductData.data.map((item)=>{
				if(item.inStock){
					var itemName = item.name.toLowerCase();
					if(itemName.indexOf(searchTerm) !== -1){
						tempProducts.push(item);
					}
				}
				return null
			});
		}else{this.safeProductData.data.map((item)=>{
				var itemName = item.name.toLowerCase();
				if(itemName.indexOf(searchTerm) !== -1){
					tempProducts.push(item);
				}
				return null
			});
		}
		this.products.data = tempProducts;
		this.formatData();
	}

SearchBar component:

class SearchBar extends Component{
	constructor(){
		super();
		this.handleChange = this.handleChange.bind(this);
		this.checkCheck = this.checkCheck.bind(this);
	}
	handleChange(event){
		this.props.onChange(event.target.value);
	}
	checkCheck(event){
		this.props.onCheck($('#checkbox').prop('checked'));
	}
	render(){
		return(
			<form className="search-bar">
				<input onChange={this.handleChange} id="searchTerm" type="text" placeholder="Search..." />
				<div>
					<input id="checkbox" onChange={this.checkCheck} type="checkbox" />Only show products in stock.
				</div>
			</form>
		);
	}
}

export default SearchBar;

Screenshots

All items: All items Search: Search Filter: Filter Filter and Search: Filter and Search