import React, { ReactElement } from 'react';
import LayoutAuthenticated from '../../layouts/Authenticated';
import { fetch } from '../../stores/grant_tranches/grant_tranchesSlice';
import EntityRecordViewPage from '../../components/EntityPage/EntityRecordViewPage';

const GrantTranchesView = () => (
  <EntityRecordViewPage
    singularLabel="Grant Tranche"
    pluralLabel="Grant Tranches"
    stateKey="grant_tranches"
    recordKey="grant_tranches"
    fetchRecord={fetch}
    listHref="/grant_tranches/grant_tranches-list"
    editHref={(id) => `/grant_tranches/grant_tranches-edit/?id=${id ?? ''}`}
  />
);

GrantTranchesView.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated permission={'READ_GRANT_TRANCHES'}>{page}</LayoutAuthenticated>;
};

export default GrantTranchesView;
