From 8ad8fbabd6b23aed8f14f7846d5056c918dacac5 Mon Sep 17 00:00:00 2001 From: wmashal Date: Fri, 9 Feb 2018 23:28:25 +0200 Subject: [PATCH 1/5] Solution for: 25-multiplecomponents-lab_v16/01-redspotter.jsx --- .../src/01-redspotter.jsx | 71 +++++++++++++++---- 1 file changed, 58 insertions(+), 13 deletions(-) diff --git a/25-multiplecomponents-lab_v16/src/01-redspotter.jsx b/25-multiplecomponents-lab_v16/src/01-redspotter.jsx index 5b19365..7826d94 100644 --- a/25-multiplecomponents-lab_v16/src/01-redspotter.jsx +++ b/25-multiplecomponents-lab_v16/src/01-redspotter.jsx @@ -1,13 +1,58 @@ -/** - * Lab 01: - * - * Write a game that shows 10 squares: 9 gray and 1 red. - * When a user clicks on the red she gets 5 points and red changes its place. - * When a user clicks on any other square nothing happens. - * - */ - -import React from 'react'; - -export default class RedSpotter extends React.Component { -} +import React from 'react'; + +export default class RedSpotter extends React.Component { + + constructor(props) { + super(props); + this.state = { + score: 0, + boxes: [ + { id: 10, color: "#ff0000" }, + { id: 20, color: "#c0c0c0" }, + { id: 30, color: "#c0c0c0" }, + { id: 40, color: "#c0c0c0" }, + { id: 50, color: "#c0c0c0" }, + { id: 60, color: "#c0c0c0" }, + { id: 70, color: "#c0c0c0" }, + { id: 80, color: "#c0c0c0" }, + { id: 90, color: "#c0c0c0" }, + { id: 100, color: "#c0c0c0" } + ] + }; + } + + shuffle = (id) => { + var _ = require('lodash'); + + if (id === "new") { + this.setState({ boxes: _.shuffle(this.state.boxes) }); + this.setState({ score: 0 }); + } else { + (id === 10 ? + this.setState({ score: parseInt([this.state.score]) + 10 }): + this.setState({ score: parseInt([this.state.score]) - 5 }) + ); + + this.setState({ boxes: _.shuffle(this.state.boxes) }); + } + } + + render() { + return ( +
+ this.shuffle("new")} ref={btn => { this.btn = btn }} /> Score : +

+

+ {this.state.boxes.map((element, index) => { + return
this.shuffle(element.id)} ref={(box) => { this.box = box }}>
+ })} +
+
+ ); + + } +} + From 9751b1681bacda2d1959112ebaa9067f4c42dea7 Mon Sep 17 00:00:00 2001 From: wmashal Date: Sun, 11 Feb 2018 18:14:41 +0200 Subject: [PATCH 2/5] Solution for: 25-multiplecomponents-lab_v16/03-shoppinglist-filters.jsx --- .../src/03-shoppinglist-filters.jsx | 170 +++++++++++++++++- 1 file changed, 163 insertions(+), 7 deletions(-) diff --git a/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx b/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx index 101f57a..f9d8ad9 100644 --- a/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx +++ b/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx @@ -1,7 +1,163 @@ -/** - * Lab 03: Shopping List Filters - * - * Add two filters to the shopping list built in previous lab: - * - Ability to show only products matching a given name - * - Ability to show only products that were fully bought - */ +import React from 'react'; + +export default class ShoppingListWithFilters extends React.Component { + constructor(props) { + super(props); + this.state = { + total: 0, + items: [], + fullList:[] + }; + } + + buy = (itemId) => { + let updatedItemIndex = this.state.items.findIndex( el => el.id === itemId); + let updatedItem = this.state.items[updatedItemIndex]; + + if(updatedItem.unit > 0){ + updatedItem.unit = updatedItem.unit-1; + } + + let updatedList = this.state.items + updatedList[updatedItemIndex] = updatedItem; + + this.setState({ + items: updatedList, + fullList: updatedList + }); + + } + + delete = (index) => { + const itemsArr = this.state.items; + this.setState({ + items: [...itemsArr.slice(0,index), ...itemsArr.slice(index+1)], + fullList: [...itemsArr.slice(0,index), ...itemsArr.slice(index+1)] + }); + } + + + filterByName = () => { + let filter = this.nameFilter.value; + + if(filter.length == 0){ + this.setState({ + items: this.state.fullList + }); + }else{ + let filteredItems = this.state.items.filter( el => el.name === filter ); + if(filteredItems.length > 0){ + this.setState({ + items: filteredItems + }); + } + } + } + + isBought = () => { + let filter = this.boughtItems.checked; + + if(!filter){ + this.setState({ + items: this.state.fullList + }); + }else{ + let filteredItems = this.state.items.filter( el => el.unit === 0 ); + if(filteredItems.length > 0){ + this.setState({ + items: filteredItems + }); + } + } + } + + + + add = () => { + let itemName = this.name.value; + let itemImageUrl = this.url.value; + let itemUnit = this.unit.value; + + this.setState({ total:parseInt([this.state.total])+1,items: [...this.state.items, { id:Math.random()*100 , name: itemName , url: itemImageUrl ,unit: itemUnit}], + fullList: [...this.state.items, { id:Math.random()*100 , name: itemName , url: itemImageUrl ,unit: itemUnit}] }) + } + + + render() { + + const style = { + fontFamily: 'Arial', + padding: 10, + color: "#444", + border: "3px solid black", + position: "relative", + width: "700px", + height: "25px", + letterSpacing: 0, + overflow: "hidden", + fontSize: 14, + } + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Name: { this.name = name }} />
Image: { this.url = url }}/> Use full path
Unit: { this.unit = unit }} />

Total Items:{this.state.total}
+ + + + + + + + + + + + + + + + + + {this.state.items.map((element, index) => { + return + + + + + + + })} + +
Item Name this.filterByName()} ref={nameFilter => { this.nameFilter = nameFilter }} />Item ImageItem Unit this.isBought()} ref={boughtItems => { this.boughtItems = boughtItems }}/> Done?
{element.name}{element.unit} this.buy(element.id)} ref={doneBtn => { this.doneBtn = doneBtn }}/> this.delete(index)} />
+ +
+ ); + + } +} + From ce3c70e7f269319e7437eff574073e6db2bcb86b Mon Sep 17 00:00:00 2001 From: wmashal Date: Mon, 12 Feb 2018 09:53:04 +0200 Subject: [PATCH 3/5] Solution for: 25-multiplecomponents-lab_v16/03-shoppinglist-filters.jsx --- .../src/03-shoppinglist-filters.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx b/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx index f9d8ad9..b6f16f6 100644 --- a/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx +++ b/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx @@ -13,9 +13,10 @@ export default class ShoppingListWithFilters extends React.Component { buy = (itemId) => { let updatedItemIndex = this.state.items.findIndex( el => el.id === itemId); let updatedItem = this.state.items[updatedItemIndex]; - + let noOfUnits = this.unitsNo.value + if(updatedItem.unit > 0){ - updatedItem.unit = updatedItem.unit-1; + updatedItem.unit = updatedItem.unit- noOfUnits; } let updatedList = this.state.items @@ -148,7 +149,7 @@ export default class ShoppingListWithFilters extends React.Component { {element.name} {element.unit} - this.buy(element.id)} ref={doneBtn => { this.doneBtn = doneBtn }}/> + { this.unitsNo = unitsNo }} /> this.buy(element.id)} /> this.delete(index)} /> })} From 569cf777b78f57de616283b2bb619652d7d9217a Mon Sep 17 00:00:00 2001 From: wmashal Date: Mon, 12 Feb 2018 14:58:28 +0200 Subject: [PATCH 4/5] Solution for: 25-multiplecomponents-lab_v16/03-shoppinglist-filters.jsx --- .../src/03-shoppinglist-filters.jsx | 86 +++++++------------ 1 file changed, 33 insertions(+), 53 deletions(-) diff --git a/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx b/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx index b6f16f6..7b0e434 100644 --- a/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx +++ b/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx @@ -4,9 +4,8 @@ export default class ShoppingListWithFilters extends React.Component { constructor(props) { super(props); this.state = { - total: 0, - items: [], - fullList:[] + filterText:"", + items: [] }; } @@ -23,8 +22,7 @@ export default class ShoppingListWithFilters extends React.Component { updatedList[updatedItemIndex] = updatedItem; this.setState({ - items: updatedList, - fullList: updatedList + items: updatedList }); } @@ -32,55 +30,18 @@ export default class ShoppingListWithFilters extends React.Component { delete = (index) => { const itemsArr = this.state.items; this.setState({ - items: [...itemsArr.slice(0,index), ...itemsArr.slice(index+1)], - fullList: [...itemsArr.slice(0,index), ...itemsArr.slice(index+1)] + items: [...itemsArr.slice(0,index), ...itemsArr.slice(index+1)] }); } - filterByName = () => { - let filter = this.nameFilter.value; - - if(filter.length == 0){ - this.setState({ - items: this.state.fullList - }); - }else{ - let filteredItems = this.state.items.filter( el => el.name === filter ); - if(filteredItems.length > 0){ - this.setState({ - items: filteredItems - }); - } - } - } - - isBought = () => { - let filter = this.boughtItems.checked; - - if(!filter){ - this.setState({ - items: this.state.fullList - }); - }else{ - let filteredItems = this.state.items.filter( el => el.unit === 0 ); - if(filteredItems.length > 0){ - this.setState({ - items: filteredItems - }); - } - } - } - - add = () => { let itemName = this.name.value; let itemImageUrl = this.url.value; let itemUnit = this.unit.value; - this.setState({ total:parseInt([this.state.total])+1,items: [...this.state.items, { id:Math.random()*100 , name: itemName , url: itemImageUrl ,unit: itemUnit}], - fullList: [...this.state.items, { id:Math.random()*100 , name: itemName , url: itemImageUrl ,unit: itemUnit}] }) + this.setState({ total:parseInt([this.state.total])+1,items: [...this.state.items, { id:Math.random()*100 ,name: itemName , url: itemImageUrl ,unit: itemUnit}] }) } @@ -99,6 +60,24 @@ export default class ShoppingListWithFilters extends React.Component { fontSize: 14, } + let itemsList = this.state.items + let filterTxt = this.state.filterText + + const filterByName = () => { + let filter = this.nameFilter.value + this.setState({ + filterText: filter + }); + } + + + if(filterTxt.length>0){ + + let ischecked = this.boughtItems.checked + + itemsList = itemsList.filter(element => element.name === filterTxt); + } + return (
@@ -119,10 +98,7 @@ export default class ShoppingListWithFilters extends React.Component { - - - - + @@ -131,28 +107,32 @@ export default class ShoppingListWithFilters extends React.Component {

Total Items:{this.state.total}
- + - + - + - {this.state.items.map((element, index) => { + {itemsList.map((element, index) => { return - + })} +
Item Name this.filterByName()} ref={nameFilter => { this.nameFilter = nameFilter }} />Item Name filterByName(itemsList)} ref={nameFilter => { this.nameFilter = nameFilter }} /> Item Image Item Unit this.isBought()} ref={boughtItems => { this.boughtItems = boughtItems }}/> Done?
{element.name} {element.unit} { this.unitsNo = unitsNo }} /> this.buy(element.id)} /> + { this.unitsNo = unitsNo }} /> + this.buy(element.id)} /> + this.delete(index)} />
From 2a79e64d9227c99eb9a745c52dad3b2d2c0d1edc Mon Sep 17 00:00:00 2001 From: wmashal Date: Mon, 12 Feb 2018 22:08:09 +0200 Subject: [PATCH 5/5] Solution for: 25-multiplecomponents-lab_v16/03-shoppinglist-filters.jsx --- .../src/03-shoppinglist-filters.jsx | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx b/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx index 7b0e434..284e104 100644 --- a/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx +++ b/25-multiplecomponents-lab_v16/src/03-shoppinglist-filters.jsx @@ -9,10 +9,10 @@ export default class ShoppingListWithFilters extends React.Component { }; } - buy = (itemId) => { + modifyQuantity(e, itemId){ let updatedItemIndex = this.state.items.findIndex( el => el.id === itemId); let updatedItem = this.state.items[updatedItemIndex]; - let noOfUnits = this.unitsNo.value + let noOfUnits = e.target.closest("td").querySelector("input").value; if(updatedItem.unit > 0){ updatedItem.unit = updatedItem.unit- noOfUnits; @@ -21,8 +21,13 @@ export default class ShoppingListWithFilters extends React.Component { let updatedList = this.state.items updatedList[updatedItemIndex] = updatedItem; + return updatedList; + } + + buy = (e,itemId) => { + this.setState({ - items: updatedList + items: this.modifyQuantity(e,itemId) }); } @@ -44,6 +49,12 @@ export default class ShoppingListWithFilters extends React.Component { this.setState({ total:parseInt([this.state.total])+1,items: [...this.state.items, { id:Math.random()*100 ,name: itemName , url: itemImageUrl ,unit: itemUnit}] }) } + filterByName = () => { + let filter = this.nameFilter.value + this.setState({ + filterText: filter + }); + } render() { @@ -63,18 +74,9 @@ export default class ShoppingListWithFilters extends React.Component { let itemsList = this.state.items let filterTxt = this.state.filterText - const filterByName = () => { - let filter = this.nameFilter.value - this.setState({ - filterText: filter - }); - } - + if(filterTxt.length>0){ - - let ischecked = this.boughtItems.checked - itemsList = itemsList.filter(element => element.name === filterTxt); } @@ -114,7 +116,7 @@ export default class ShoppingListWithFilters extends React.Component { - Item Name filterByName(itemsList)} ref={nameFilter => { this.nameFilter = nameFilter }} /> + Item Name this.filterByName(itemsList)} ref={nameFilter => { this.nameFilter = nameFilter }} /> Item Image Item Unit @@ -127,7 +129,7 @@ export default class ShoppingListWithFilters extends React.Component { {element.unit} { this.unitsNo = unitsNo }} /> - this.buy(element.id)} /> + this.buy(e,element.id)} /> this.delete(index)} />