Skip to content

Commit

Permalink
Implemented the logic to allow the user to remove items by clicking t…
Browse files Browse the repository at this point in the history
…he 'Remove items...' button.
  • Loading branch information
maratbn committed Aug 5, 2018
1 parent 5871aa5 commit ccb861e
Showing 1 changed file with 31 additions and 1 deletion.
32 changes: 31 additions & 1 deletion webpack_in/entry.jsx
Expand Up @@ -129,6 +129,11 @@ class ListWidget extends React.Component {
)) ))
}); });


this._mutateStateToRemoveItemsChecked = state => ({
...state,
items: state.items.filter(objItem => !objItem.is_checked)
});

const objStateEmpty = { const objStateEmpty = {
items: [], items: [],
total_added: 0 total_added: 0
Expand All @@ -146,6 +151,17 @@ class ListWidget extends React.Component {
render() { render() {
const arrItemsSelected = this.state.items.filter(objItem => objItem.is_checked); const arrItemsSelected = this.state.items.filter(objItem => objItem.is_checked);


const formatListOfNames = (arrNames) => arrNames.reduce(
(strOutput, strName, index) => (
`${strOutput}${index > 0 // Will render either ' and' or ',' before 2nd item.
// Will render ', and' before the 3rd+ last item.
? (`${arrNames.length > 2 ? ',' : ""
}${index === arrNames.length - 1 ? ' and' : ""}`
)
: ""} "${strName}"`
),
"");

return ( return (
<div style={ objStyleCommon }> <div style={ objStyleCommon }>
<div style={ objStyleContent }> <div style={ objStyleContent }>
Expand Down Expand Up @@ -195,7 +211,21 @@ class ListWidget extends React.Component {
}}/> }}/>
<ButtonWidget caption={ arrItemsSelected.length > 1 ? "Remove items..." <ButtonWidget caption={ arrItemsSelected.length > 1 ? "Remove items..."
: "Remove item..." } : "Remove item..." }
isDisabled={ arrItemsSelected.length === 0 }/> isDisabled={ arrItemsSelected.length === 0 }
onClick={() => {
const arrCaptions = arrItemsSelected
.map(objItem => objItem.caption);
const isConfirmed = confirm(
`Are you sure you want to remove item${
arrCaptions.length > 1 ? "s" : ""} ${
formatListOfNames(arrCaptions)
}?`);
if (isConfirmed === false) {
return;
}

this.setState(this._mutateStateToRemoveItemsChecked(this.state));
}}/>
</div> </div>
</div> </div>
); );
Expand Down

0 comments on commit ccb861e

Please sign in to comment.