Newer
Older
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { currentDrawerReactionSelector } from '@/redux/reactions/reactions.selector';
import { DrawerHeading } from '@/shared/DrawerHeading';
import { Icon } from '@/shared/Icon';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { DEFAULT_REFERENCE_SOURCE } from './ReactionDrawer.constants';
import { getFilteredReferences } from './utils/getFilteredReferences';
import { getGroupedReferences } from './utils/getGroupedReferences';
export const ReactionDrawer = (): React.ReactNode => {
const reaction = useSelector(currentDrawerReactionSelector);
const referencesGrouped = useMemo(() => {
const referencesFiltered = getFilteredReferences(reaction);
return getGroupedReferences(referencesFiltered);
}, [reaction]);
if (!reaction) {
return null;
}
return (
<div className="h-full max-h-full">
<DrawerHeading
title={
<>
<span className="font-normal">Reaction:</span> {reaction.reactionId}
</>
}
/>
<div className="flex flex-col gap-6 p-6">
<div className="text-sm font-normal">
Type: <b className="font-semibold">{reaction.type}</b>
</div>
<hr className="border-b border-b-divide" />
<h3 className="font-semibold">Annotations:</h3>
{referencesGrouped.map(({ source, references }) => (
<>
<h3 className="font-semibold">Source: {source || DEFAULT_REFERENCE_SOURCE}</h3>
{references.map(({ id, link, type }) => (
<a key={id} href={link} target="_blank">
<div className="flex justify-between">
<span>{`${type} (${id})`}</span>
<Icon name="arrow" className="h-6 w-6 fill-font-500" />
</div>
</a>
))}
</>
))}
</div>
</div>
);
};