-
Notifications
You must be signed in to change notification settings - Fork 233
/
index.tsx
59 lines (54 loc) · 1.88 KB
/
index.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { ChatWrapper } from '@components/Chat/styles';
import { IChat, IDM, IUser } from '@typings/db';
import dayjs from 'dayjs';
import gravatar from 'gravatar';
import React, { FC, useMemo, memo } from 'react';
import { useParams } from 'react-router';
import { Link } from 'react-router-dom';
import regexifyString from 'regexify-string';
interface Props {
data: IDM | IChat;
}
const BACK_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:3095' : 'https://sleact.nodebird.com';
const Chat: FC<Props> = memo(({ data }) => {
const { workspace } = useParams<{ workspace: string; channel: string }>();
const user: IUser = 'Sender' in data ? data.Sender : data.User;
const result = useMemo<(string | JSX.Element)[] | JSX.Element>(
() =>
data.content.startsWith('uploads\\') || data.content.startsWith('uploads/') ? (
<img src={`${BACK_URL}/${data.content}`} style={{ maxHeight: 200 }} />
) : (
regexifyString({
pattern: /@\[(.+?)]\((\d+?)\)|\n/g,
decorator(match, index) {
const arr: string[] | null = match.match(/@\[(.+?)]\((\d+?)\)/)!;
if (arr) {
return (
<Link key={match + index} to={`/workspace/${workspace}/dm/${arr[2]}`}>
@{arr[1]}
</Link>
);
}
return <br key={index} />;
},
input: data.content,
})
),
[workspace, data.content],
);
return (
<ChatWrapper>
<div className="chat-img">
<img src={gravatar.url(user.email, { s: '36px', d: 'retro' })} alt={user.nickname} />
</div>
<div className="chat-text">
<div className="chat-user">
<b>{user.nickname}</b>
<span>{dayjs(data.createdAt).format('h:mm A')}</span>
</div>
<p>{result}</p>
</div>
</ChatWrapper>
);
});
export default Chat;