React: change order list when button clicked

Question

I am making my first app with Javascript and React and started with a page which views a shopping list. It gets the items from an api call.

If the user clicks on the button 'done' (or should I use an checkbox?) This product should go to the bottom of the list (and be grayed out with css but thats not the problem).

The problem is, I have no clue how to do this. Can anyone help me out a bit?

This is my code:

import React from 'react';
//import image from '../images/header.png';
//import Collapsible from './Collapsible';

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        isLoading: true,
        orders: []
    }
}

componentWillMount() {
    localStorage.getItem('orders') && this.setState({
        orders: JSON.parse(localStorage.getItem('orders')),
        isLoading: false
    })
}

componentDidMount() {
    if (!localStorage.getItem('orders')){
        this.fetchData();
    } else {
        console.log('Using  data from localstorage');
    }
}

fetchData() {
    fetch('http://localhost:54408/api/orders/all/15-03-2018')
        .then(response => response.json())
        .then(parsedJSON => parsedJSON.map(product => (
            {
                productname: `${product.ProductName}`,
                image: `${product.Image}`,
                quantity: `${product.Quantity}`,
                isconfirmed: `${product.IsConfirmed}`,
                orderid: `${product.OrderId}`
            }
        )))
        .then(orders => this.setState({
            orders,
            isLoading: false
        }))
        .catch(error => console.log('parsing failed', error))
}

componentWillUpdate(nextProps, nextState) {
    localStorage.setItem('orders', JSON.stringify(nextState.orders));
    localStorage.setItem('ordersDate', Date.now());
}

render() {
    const {isLoading, orders} = this.state;
    return (
        <div>
            <header>
                <img src="/images/header.jpg"/>
                <h1>Boodschappenlijstje <button className="btn btn-sm btn-danger">Reload</button></h1>
            </header>
            <div className={`content ${isLoading ? 'is-loading' : ''}`}>
                <div className="panel">
                    {
                        !isLoading && orders.length > 0 ? orders.map(order => {
                        const {productname, image, quantity, orderid} = order;
                        return<div className="product" key={orderid}>
                            <div className="plaatjediv">
                                <img className="plaatje" src={image} />
                            </div>
                            <div className="productInfo">
                                <p>{productname}</p>
                                <p>Aantal: {quantity}</p>
                                <p>ID: {orderid}</p>
                            </div>
                            <div className="bdone">
                                <button className="btn btn-sm btn-default btndone">Done</button>
                            </div>
                        </div>
                    }) : null
                    }
                </div>
                <div className="loader">
                    <div className="icon"></div>
                </div>
            </div>
        </div>
    );
}
}
 export default App;

Answer 1

You can achieve by using this :

this.handleDoneAction = event = > {
    let itemIndex = event.target.getAttribute("data-itemIndex");
    let prevOrders = [...this.state.orders];
    var itemToMoveAtLast = prevOrders.splice(itemIndex, 1);
    var updatedOrderList = prevOrders.concat(itemToMoveAtLast);
    this.setState({order: updatedOrderList})

}

I have attach an event handler on the button handleDoneAction.

<button className="btn btn-sm btn-default btndone" data-itemIndex={index} onClick={this.handleDoneAction}>Done</button>

the attribute data-itemIndex is the index of the object in orders array.

And your map function will be like this:

orders.map((order, index) => { 
    //content
})

ANd for the different style effects on the done products, I will suggest you to use different array for all done products.