Removing Items
Async Removal
removeAsync(itemId, remove)
List views often have a control that allows users to delete an item. To support this, violet-paginator
exposes a removeAsync
action. This accepts the id of the item to remove, and a remove
promise representing the call to the server to delete. It then performs the following operations:
- Call
removingItem
to indicate that the item is waiting for removal. You can react to this state with theisRemoving
function. This is useful if you want to show some in-progress state or filter the item out prematurely. - If the
remove
promise succeeds, callremoveItem
which will remove the item from the list. - If the
remove
promise fails:- Revert the item using
resetItem
. If you were reacting to theisRemoving
state in step 1, this step will revert that state. That means that your item will come back if you were filtering it out prematurely. - Rethrow the exception for the caller to handle
- Revert the item using
Example usage:
import api from 'ROOT/api'
import { composables } from 'violet-paginator'
import * as actionTypes from './actionTypes'
const pageActions = composables({ listId: 'recipes' })
export function deleteRecipe(recipe) {
const id = recipe.get('id')
return pageActions.removeAsync(
id,
api.recipes.delete(id)
)
}
Removal in Progress
If you want to check for a removal in progress, use the isRemoving
function:
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { isRemoving } from 'violet-paginator'
export function ListItem({ isRemoving }) {
...
})
export default connect(
(state, ownProps) => ({ isRemoving: isRemoving(state, 'myList', ownProps.itemId })
)(ListItem)