Tag: update

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)