diff --git a/packages/edit-site/src/components/actions/trash-post.js b/packages/edit-site/src/components/actions/trash-post.js new file mode 100644 index 00000000000000..7977ed3d11e009 --- /dev/null +++ b/packages/edit-site/src/components/actions/trash-post.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { decodeEntities } from '@wordpress/html-entities'; +import { store as coreStore } from '@wordpress/core-data'; +import { __, sprintf } from '@wordpress/i18n'; +import { store as noticesStore } from '@wordpress/notices'; +import { useMemo } from '@wordpress/element'; + +export default function useMoveToTrashAction() { + const { createSuccessNotice, createErrorNotice } = + useDispatch( noticesStore ); + const { deleteEntityRecord } = useDispatch( coreStore ); + + return useMemo( + () => ( { + id: 'move-to-trash', + label: __( 'Move to Trash' ), + async perform( post ) { + try { + await deleteEntityRecord( + 'postType', + post.type, + post.id, + {}, + { throwOnError: true } + ); + createSuccessNotice( + sprintf( + /* translators: The page's title. */ + __( '"%s" moved to the Trash.' ), + decodeEntities( post.title.rendered ) + ), + { + type: 'snackbar', + id: 'edit-site-page-trashed', + } + ); + } catch ( error ) { + const errorMessage = + error.message && error.code !== 'unknown_error' + ? error.message + : __( + 'An error occurred while moving the page to the trash.' + ); + + createErrorNotice( errorMessage, { type: 'snackbar' } ); + } + }, + isDesctructive: true, + } ), + [ createSuccessNotice, createErrorNotice, deleteEntityRecord ] + ); +} diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 4628d850a023c2..13e27ddfacae57 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -15,7 +15,13 @@ import { import { __experimentalVStack as VStack, __experimentalHStack as HStack, + VisuallyHidden, + DropdownMenu, + MenuGroup, + MenuItem, } from '@wordpress/components'; +import { useMemo } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -24,8 +30,10 @@ import ListView from './list-view'; import { Pagination } from './pagination'; import ViewActions from './view-actions'; import TextFilter from './text-filter'; +import { moreVertical } from '@wordpress/icons'; export default function DataViews( { + actions, data, fields, view, @@ -34,9 +42,50 @@ export default function DataViews( { paginationInfo, options: { pageCount }, } ) { + const columns = useMemo( () => { + const _columns = [ ...fields ]; + if ( actions && actions.length ) { + _columns.push( { + header: { __( 'Actions' ) }, + id: 'actions', + cell: ( props ) => { + return ( + + { () => ( + + { actions.map( ( action ) => ( + + action.perform( + props.row.original + ) + } + isDestructive={ + action.isDesctructive + } + > + { action.label } + + ) ) } + + ) } + + ); + }, + enableHiding: false, + } ); + } + + return _columns; + }, [ fields, actions ] ); + const dataView = useReactTable( { data, - columns: fields, + columns, manualSorting: true, manualFiltering: true, manualPagination: true, diff --git a/packages/edit-site/src/components/page-actions/index.js b/packages/edit-site/src/components/page-actions/index.js index f6f0119a164544..d42a706c36796e 100644 --- a/packages/edit-site/src/components/page-actions/index.js +++ b/packages/edit-site/src/components/page-actions/index.js @@ -10,17 +10,11 @@ import { moreVertical } from '@wordpress/icons'; */ import TrashPageMenuItem from './trash-page-menu-item'; -export default function PageActions( { - postId, - className, - toggleProps, - onRemove, -} ) { +export default function PageActions( { postId, toggleProps, onRemove } ) { return ( { () => ( diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index eea646c1c7326c..7725a5e9fbcad7 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -4,7 +4,6 @@ import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; import { - VisuallyHidden, __experimentalHeading as Heading, __experimentalVStack as VStack, } from '@wordpress/components'; @@ -18,8 +17,8 @@ import { useState, useEffect, useMemo } from '@wordpress/element'; */ import Page from '../page'; import Link from '../routes/link'; -import PageActions from '../page-actions'; import { DataViews } from '../dataviews'; +import useTrashPostAction from '../actions/trash-post'; const EMPTY_ARRAY = []; const EMPTY_OBJECT = {}; @@ -134,27 +133,22 @@ export default function PagePages() { postStatuses[ props.row.original.status ] ?? props.row.original.status, }, - { - header: { __( 'Actions' ) }, - id: 'actions', - cell: ( props ) => { - const page = props.row.original; - return ; - }, - enableHiding: false, - }, ], [ postStatuses ] ); + const trashPostAction = useTrashPostAction(); + const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] ); + // TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`. return (