1import React from 'react';
 2
 3import CircularProgress from '@material-ui/core/CircularProgress';
 4import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 5import Menu from '@material-ui/core/Menu';
 6import MenuItem from '@material-ui/core/MenuItem';
 7import HistoryIcon from '@material-ui/icons/History';
 8
 9import Date from 'src/components/Date';
10
11import { AddCommentFragment } from './MessageCommentFragment.generated';
12import { CreateFragment } from './MessageCreateFragment.generated';
13import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
14
15const ITEM_HEIGHT = 48;
16
17type Props = {
18  bugId: string;
19  commentId: string;
20  iconBtnProps?: IconButtonProps;
21};
22function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
23  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
24  const open = Boolean(anchorEl);
25
26  const { loading, error, data } = useMessageEditHistoryQuery({
27    variables: { bugIdPrefix: bugId },
28  });
29  if (loading) return <CircularProgress />;
30  if (error) return <p>Error: {error}</p>;
31
32  const comments = data?.repository?.bug?.timeline.comments as (
33    | AddCommentFragment
34    | CreateFragment
35  )[];
36  // NOTE Searching for the changed comment could be dropped if GraphQL get
37  // filter by id argument for timelineitems
38  const comment = comments.find((elem) => elem.id === commentId);
39  const history = comment?.history;
40
41  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
42    setAnchorEl(event.currentTarget);
43  };
44
45  const handleClose = () => {
46    setAnchorEl(null);
47  };
48
49  return (
50    <div>
51      <IconButton
52        aria-label="more"
53        aria-controls="long-menu"
54        aria-haspopup="true"
55        onClick={handleClick}
56        {...iconBtnProps}
57      >
58        <HistoryIcon />
59      </IconButton>
60      <Menu
61        id="long-menu"
62        anchorEl={anchorEl}
63        keepMounted
64        open={open}
65        onClose={handleClose}
66        PaperProps={{
67          style: {
68            maxHeight: ITEM_HEIGHT * 4.5,
69            width: '20ch',
70          },
71        }}
72      >
73        <MenuItem key={0} disabled>
74          Edited {history?.length} times.
75        </MenuItem>
76        {history?.map((edit, index) => (
77          <MenuItem key={index} onClick={handleClose}>
78            <Date date={edit.date} />
79          </MenuItem>
80        ))}
81      </Menu>
82    </div>
83  );
84}
85
86export default EditHistoryMenu;