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