import React, {useContext, useMemo} from 'react';
import {Link} from 'react-router-dom';
import {DataTablePage} from '../../datatable/page/data-table-page';
import {Trans} from '../../i18n/trans';
import {DataTableEmptyStateMessage} from '../../datatable/page/data-table-emty-state-message';
import articlesSvg from './articles.svg';
import {DataTableAddItemButton} from '../../datatable/data-table-add-item-button';
import {CustomPageDatatableFilters} from './custom-page-datatable-filters';
import {DeleteSelectedItemsAction} from '../../datatable/page/delete-selected-items-action';
import {CustomPageDatatableColumns} from '@common/admin/custom-pages/custom-page-datatable-columns';
import {SiteConfigContext} from '@common/core/settings/site-config-context';
export function CustomPageDatablePage() {
const config = useContext(SiteConfigContext);
const filters = useMemo(() => {
return CustomPageDatatableFilters(config);
}, [config]);
return (
<DataTablePage
endpoint="custom-pages"
title={<Trans message="Custom pages" />}
filters={filters}
columns={CustomPageDatatableColumns}
queryParams={{with: 'user'}}
actions={<Actions />}
selectedActions={<DeleteSelectedItemsAction />}
emptyStateMessage={
<DataTableEmptyStateMessage
image={articlesSvg}
title={<Trans message="No pages have been created yet" />}
filteringTitle={<Trans message="No matching pages" />}
/>
}
/>
);
}
function Actions() {
return (
<DataTableAddItemButton elementType={Link} to="new">
<Trans message="New page" />
</DataTableAddItemButton>
);
}