diff --git a/packages/dataviews/src/dataviews.tsx b/packages/dataviews/src/dataviews.tsx index 875746ceb52c38..601ee23304633c 100644 --- a/packages/dataviews/src/dataviews.tsx +++ b/packages/dataviews/src/dataviews.tsx @@ -38,6 +38,8 @@ interface DataViewsProps< Item extends AnyItem > { totalPages: number; }; supportedLayouts: string[]; + selection?: string[]; + setSelection?: ( selection: string[] ) => void; onSelectionChange?: ( items: Item[] ) => void; } @@ -72,9 +74,22 @@ export default function DataViews< Item extends AnyItem >( { isLoading = false, paginationInfo, supportedLayouts, + selection: selectionProperty, + setSelection: setSelectionProperty, onSelectionChange = defaultOnSelectionChange, }: DataViewsProps< Item > ) { - const [ selection, setSelection ] = useState< string[] >( [] ); + const [ selectionState, setSelectionState ] = useState< string[] >( [] ); + let selection, setSelection; + if ( + selectionProperty !== undefined && + setSelectionProperty !== undefined + ) { + selection = selectionProperty; + setSelection = setSelectionProperty; + } else { + selection = selectionState; + setSelection = setSelectionState; + } const [ openedFilter, setOpenedFilter ] = useState< string | null >( null ); useEffect( () => { diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 0721a9b5d8ffe7..415963de742909 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -315,7 +315,7 @@ export default function ViewList< Item extends AnyItem >( } = props; const baseId = useInstanceId( ViewList, 'view-list' ); const selectedItem = data?.findLast( ( item ) => - selection.includes( item.id ) + selection.includes( getItemId( item ) ) ); const mediaField = fields.find( diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index c20fff8851c829..cd9332bbe9b23f 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -201,11 +201,44 @@ function FeaturedImage( { item, viewType } ) { ); } +function usePostIdLinkInSelection( + selection, + setSelection, + isLoadingItems, + items +) { + const { + params: { postId }, + } = useLocation(); + const [ postIdToSelect, setPostIdToSelect ] = useState( postId ); + useEffect( () => { + if ( postId ) { + setPostIdToSelect( postId ); + } + }, [ postId ] ); + + useEffect( () => { + if ( ! postIdToSelect ) { + return; + } + // Only try to select an item if the loading is complete and we have items. + if ( ! isLoadingItems && items && items.length ) { + // If the item is not in the current selection, select it. + if ( selection.length !== 1 || selection[ 0 ] !== postIdToSelect ) { + setSelection( [ postIdToSelect ] ); + } + setPostIdToSelect( undefined ); + } + }, [ postIdToSelect, selection, setSelection, isLoadingItems, items ] ); +} + export default function PagePages() { const postType = 'page'; const [ view, setView ] = useView( postType ); const history = useHistory(); + const [ selection, setSelection ] = useState( [] ); + const onSelectionChange = useCallback( ( items ) => { const { params } = history.getLocationWithParams(); @@ -266,6 +299,8 @@ export default function PagePages() { totalPages, } = useEntityRecords( 'postType', postType, queryArgs ); + usePostIdLinkInSelection( selection, setSelection, isLoadingPages, pages ); + const { records: authors, isResolving: isLoadingAuthors } = useEntityRecords( 'root', 'user', { per_page: -1 } ); @@ -523,7 +558,10 @@ export default function PagePages() { isLoading={ isLoadingPages || isLoadingAuthors } view={ view } onChangeView={ onChangeView } + selection={ selection } + setSelection={ setSelection } onSelectionChange={ onSelectionChange } + getItemId={ ( item ) => item.id.toString() } /> );