Skip to content

Commit

Permalink
DataViews: Update the data views component to pass an view object (#5…
Browse files Browse the repository at this point in the history 
…5154)

Co-authored-by: ntsekouras <[email protected]>
  • Loading branch information
@youknowriad @ntsekouras
youknowriad and ntsekouras authored Oct 9, 2023
1 parent 4a6c189 commit ae5c491
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 54 deletions.
67 changes: 65 additions & 2 deletions packages/edit-site/src/components/dataviews/dataviews.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,81 @@ import TextFilter from './text-filter';
export default function DataViews( {
data,
fields,
view,
onChangeView,
isLoading,
paginationInfo,
options,
options: { pageCount },
} ) {
const dataView = useReactTable( {
data,
columns: fields,
...options,
manualSorting: true,
manualFiltering: true,
manualPagination: true,
enableRowSelection: true,
state: {
sorting: view.sort
? [
{
id: view.sort.field,
desc: view.sort.direction === 'desc',
},
]
: [],
globalFilter: view.search,
pagination: {
pageIndex: view.page,
pageSize: view.perPage,
},
},
onSortingChange: ( sortingUpdater ) => {
onChangeView( ( currentView ) => {
const sort =
typeof sortingUpdater === 'function'
? sortingUpdater(
currentView.sort
? [
{
id: currentView.sort.field,
desc:
currentView.sort
.direction === 'desc',
},
]
: []
)
: sortingUpdater;
if ( ! sort.length ) {
return {
...currentView,
sort: {},
};
}
const [ { id, desc } ] = sort;
return {
...currentView,
sort: { field: id, direction: desc ? 'desc' : 'asc' },
};
} );
},
onGlobalFilterChange: ( value ) => {
onChangeView( { ...view, search: value, page: 0 } );
},
onPaginationChange: ( paginationUpdater ) => {
onChangeView( ( currentView ) => {
const { pageIndex, pageSize } = paginationUpdater( {
pageIndex: currentView.page,
pageSize: currentView.perPage,
} );
return { ...view, page: pageIndex, perPage: pageSize };
} );
},
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
pageCount,
} );
return (
<div className="dataviews-wrapper">
Expand Down
76 changes: 24 additions & 52 deletions packages/edit-site/src/components/page-pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,23 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
import Page from '../page';
import Link from '../routes/link';
import PageActions from '../page-actions';
import { DataViews, PAGE_SIZE_VALUES } from '../dataviews';
import { DataViews } from '../dataviews';

const EMPTY_ARRAY = [];
const EMPTY_OBJECT = {};

export default function PagePages() {
const [ reset, setResetQuery ] = useState( ( v ) => ! v );
const [ globalFilter, setGlobalFilter ] = useState( '' );
const [ paginationInfo, setPaginationInfo ] = useState();
const [ { pageIndex, pageSize }, setPagination ] = useState( {
pageIndex: 0,
pageSize: PAGE_SIZE_VALUES[ 0 ],
const [ view, setView ] = useState( {
type: 'list',
search: '',
page: 0,
perPage: 5,
sort: {
field: 'date',
direction: 'desc',
},
} );
const [ paginationInfo, setPaginationInfo ] = useState();
// Request post statuses to get the proper labels.
const { records: statuses } = useEntityRecords( 'root', 'status' );
const postStatuses =
Expand All @@ -42,32 +46,17 @@ export default function PagePages() {
return acc;
}, EMPTY_OBJECT );

// TODO: probably memo other objects passed as state(ex:https://tanstack.com/table/v8/docs/examples/react/pagination-controlled).
const pagination = useMemo(
() => ( { pageIndex, pageSize } ),
[ pageIndex, pageSize ]
);
const [ sorting, setSorting ] = useState( [
{ order: 'desc', orderby: 'date' },
] );
const queryArgs = useMemo(
() => ( {
per_page: pageSize,
page: pageIndex + 1, // tanstack starts from zero.
per_page: view.perPage,
page: view.page + 1, // tanstack starts from zero.
_embed: 'author',
order: sorting[ 0 ]?.desc ? 'desc' : 'asc',
orderby: sorting[ 0 ]?.id,
search: globalFilter,
order: view.sort.direction,
orderby: view.sort.field,
search: view.search,
status: [ 'publish', 'draft' ],
} ),
[
globalFilter,
sorting[ 0 ]?.id,
sorting[ 0 ]?.desc,
pageSize,
pageIndex,
reset,
]
[ view ]
);
const { records: pages, isResolving: isLoadingPages } = useEntityRecords(
'postType',
Expand All @@ -84,6 +73,9 @@ export default function PagePages() {
method: 'HEAD',
parse: false,
} ).then( ( res ) => {
// TODO: store this in core-data reducer and
// make sure it's returned as part of useEntityRecords
// (to avoid double requests).
const totalPages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
const totalItems = parseInt( res.headers.get( 'X-WP-Total' ) );
setPaginationInfo( {
Expand All @@ -92,7 +84,7 @@ export default function PagePages() {
} );
} );
// Status should not make extra request if already did..
}, [ globalFilter, pageSize, reset ] );
}, [ queryArgs ] );

const fields = useMemo(
() => [
Expand Down Expand Up @@ -147,12 +139,7 @@ export default function PagePages() {
id: 'actions',
cell: ( props ) => {
const page = props.row.original;
return (
<PageActions
postId={ page.id }
onRemove={ () => setResetQuery() }
/>
);
return <PageActions postId={ page.id } />;
},
enableHiding: false,
},
Expand All @@ -168,25 +155,10 @@ export default function PagePages() {
data={ pages || EMPTY_ARRAY }
isLoading={ isLoadingPages }
fields={ fields }
view={ view }
onChangeView={ setView }
options={ {
manualSorting: true,
manualFiltering: true,
manualPagination: true,
enableRowSelection: true,
state: {
sorting,
globalFilter,
pagination,
},
pageCount: paginationInfo?.totalPages,
onSortingChange: setSorting,
onGlobalFilterChange: ( value ) => {
setGlobalFilter( value );
setPagination( { pageIndex: 0, pageSize } );
},
// TODO: check these callbacks and maybe reset the query when needed...
onPaginationChange: setPagination,
meta: { resetQuery: setResetQuery },
} }
/>
</Page>
Expand Down

1 comment on commit ae5c491

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in ae5c491.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6456491421
📝 Reported issues:

Please sign in to comment.