This repository has been archived by the owner on Oct 11, 2022. It is now read-only.
/
index.js
89 lines (79 loc) · 2.19 KB
/
index.js
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//@flow
import React from 'react';
//$FlowFixMe
import sanitizeHtml from 'sanitize-html';
//$FlowFixMe
import * as Autolinker from 'autolinker';
import { TextBubble, Emoji, ImageBubble } from './style';
import { FREQUENCY_ANCHORS, FREQUENCIES } from '../../../../helpers/regexps';
type BubbleProps = {
me: boolean,
persisted: boolean,
sender: Object,
message: Object,
imgSrc: ?string,
type: ?'story' | 'messageGroup',
activeCommunity: ?string,
};
export const Bubble = (props: BubbleProps) => {
const { me, persisted, message, type, activeCommunity } = props;
const formatMessageForFrequencyLinks = (message: string): string => {
if (!message) {
return '';
}
const cleanMessage = sanitizeHtml(message);
const linkedMessage = Autolinker.link(
cleanMessage.replace(
FREQUENCIES,
`$1https://spectrum.chat/${activeCommunity}/$2`,
),
);
// Remove the "spectrum.chat" part from the link text so in the message
// you just see "~frequency", but it's linked to the frequency
return linkedMessage.replace(FREQUENCY_ANCHORS, '>$1</a>');
};
const formatMessageForLinks = (message: string): string => {
if (!message) {
return '';
}
const cleanMessage = sanitizeHtml(message);
const linkedMessage = Autolinker.link(cleanMessage);
return linkedMessage;
};
return (
<TextBubble
me={me}
persisted={persisted}
dangerouslySetInnerHTML={{
// if in a story, we convert `~frequency` into a link.
// if in a groupMessage, don't regex links
__html: type === 'story'
? formatMessageForFrequencyLinks(message.content)
: formatMessageForLinks(message.content),
}}
/>
);
};
export const EmojiBubble = (props: BubbleProps) => {
const { me, persisted, message } = props;
return (
<Emoji
me={me}
persisted={persisted}
dangerouslySetInnerHTML={{
__html: sanitizeHtml(message.content),
}}
/>
);
};
export const ImgBubble = (props: Object) => {
const { me, persisted, imgSrc } = props;
return (
<ImageBubble
onClick={props.openGallery}
me={me}
persisted={persisted}
src={imgSrc}
/>
);
};