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

const ProjectMilestonesView = () => (
  <EntityRecordViewPage
    singularLabel="Project Milestone"
    pluralLabel="Project Milestones"
    stateKey="project_milestones"
    recordKey="project_milestones"
    fetchRecord={fetch}
    listHref="/project_milestones/project_milestones-list"
    editHref={(id) => `/project_milestones/project_milestones-edit/?id=${id ?? ''}`}
  />
);

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

export default ProjectMilestonesView;
