Timeline/ClientApp/src/app/timeline/TimelinePage.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import React from 'react';
import { useParams } from 'react-router';

import { ordinaryTimelineService } from '../data/timeline';

import TimelinePageUI from './TimelinePageUI';
import TimelinePageTemplate from '../timeline/TimelinePageTemplate';
import { OrdinaryTimelineManageItem } from './TimelineInfoCard';
import TimelineDeleteDialog from './TimelineDeleteDialog';

const TimelinePage: React.FC = _ => {
  const { name } = useParams<{ name: string }>();

  const [dialog, setDialog] = React.useState<OrdinaryTimelineManageItem | null>(
    null
  );

  let dialogElement: React.ReactElement | undefined;
  if (dialog === 'delete') {
    dialogElement = (
      <TimelineDeleteDialog open close={() => setDialog(null)} name={name} />
    );
  }

  return (
    <>
      <TimelinePageTemplate
        name={name}
        UiComponent={TimelinePageUI}
        onManage={item => setDialog(item)}
        service={ordinaryTimelineService}
        notFoundI18nKey="timeline.timelineNotExist"
      />
      {dialogElement}
    </>
  );
};

export default TimelinePage;