I am using a custom document panel component which opens a modal and displays a list of posts and allows the user to make some updates to their terms.
I’m using getEntityRecords
to load the set of posts. I’m using editEntityRecord
to make the edits and then saveEditedEntityRecord
to save the edits.
I would like to update the state with a new call to getEntityRecords
, but can’t figure out the proper way to force a refresh of the second component.
Alternatively, perhaps there is a way to update the state using the entities I get back after editEntityRecord
rather than trying to re-render the second component?
Component 1 – Provides the Edit and Save handlers. Component works nicely as does the edit/save process, although I don’t know if I’m using these methods as intended
import _ from 'lodash';
import CurrentItemList from './current-item-list';
const { useState } = wp.element;
const { Button } = wp.components;
const { withDispatch } = wp.data;
const { compose } = wp.compose;
const CurrentCollectionItems = props => {
const { postType, editEntityRecord, saveEditedEntityRecord, collection_term } = props;
const [selected, setSelected] = useState([]);
// Select or deselect the items that will receive the edit
const onChange = selectedItem => {
if (selected.includes(selectedItem)) {
setSelected(_.filter(selected, item => item !== selectedItem))
} else {
setSelected([...selected, selectedItem])
}
}
// Edit handler
const editSelected = () => {
// Loop over selected items and apply the edit by calling editEntityRecord
const editedEntities = selected.map(item => {
return editEntityRecord(
'postType',
postType.slug,
item.id,
{
"artwork_collection_id": _.filter(item.artwork_collection_id, termId => termId !== collection_term.id),
}
)
});
// When all editing calls are complete pass the edited entities to the save handler
Promise.all(editedEntities).then(entity => {
console.log("All Edited. Save entities")
saveEdited(entity);
})
}
// Save handler
const saveEdited = (editedEntities) => {
// Loop the edited entities and call saveEditedEntityRecord
const results = editedEntities.map(entity => {
// first remove the item from the selected list
setSelected(_.filter(selected, si => si.id !== entity.recordId))
// dispatch to save the entity
return saveEditedEntityRecord('postType', entity.name, entity.recordId);
})
// All entities have been saved
Promise.all(results).then(response => {
console.log("All Saved");
/* TODO: update date with edited entities or trigger another call to getEntityRecords */
});
}
return <div>
<Button
isPrimary
disabled={selected.length ? false : true}
onClick={editSelected}
>
Edit Selected
</Button>
<CurrentItemList
selected={selected}
onChange={onChange}
/>
</div>
}
export default compose([
withDispatch(dispatch => {
return {
editEntityRecord: dispatch('core').editEntityRecord,
saveEditedEntityRecord: dispatch('core').saveEditedEntityRecord,
}
})
])(CurrentCollectionItems)
Component 2 – uses withSelect to get entities. I Want to update these entities either in state or re-render this component
import ItemListing from './edit-item-listing';
const { withSelect } = wp.data;
const { compose } = wp.compose;
const CurrentItemList = props => {
const { entities, selected, onChange } = props;
//
const items = entities && entities.length ? entities : [];
// Displays a list of items, each has a checkbox for
// and calls onChange when it's selected
return <div>
{items.map((item, index) => <ItemListing
item={item}
index={index}
onChange={onChange}
selected={selected.includes(item)}
/>)}
</div>
}
export default compose([
withSelect((select, ownProps) => {
return {
/**
* this property needs to be updated following a save
*/
entities: select('core').getEntityRecords('postType', ownProps.collection.meta.artwork_collection_post_type, {
per_page: 10,
artwork_collection_id: ownProps.collection_term.id
})
}
})
])(CurrentItemList)