Commit 30a76106 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by Guilherme Gazzo

[FIX] System messages formatting (#185)

parent 8c21b223
No preview for this file type
import Avatar from '../../components/Avatar';
import { createClassName } from '../helpers';
import Attachments from './attachments';
import { parseMessage, parseDate } from './parsers';
import { parseMessage, parseDate, isSystemMessage } from './parsers';
import styles from './styles';
......@@ -19,32 +19,33 @@ export const Content = ({ children, className, ...props }) => (
<div {...props} className={createClassName(styles, 'message__content', {}, [className])}>{children}</div>
);
const createTextProps = ({ children, ...props }) => {
if (typeof children === 'string') {
return {
dangerouslySetInnerHTML: {
__html: parseMessage({ msg: children, ...props }),
},
};
}
export function Text({ children, className, ...props }) {
const message = { ...props };
if (Array.isArray(children) && typeof children[0] === 'string') {
return {
dangerouslySetInnerHTML: {
__html: parseMessage({ msg: children[0], ...props }),
},
};
if (typeof children === 'string') {
message.msg = children;
} else if (Array.isArray(children) && typeof children[0] === 'string') {
message.msg = children[0];
} else {
return (
<div className={createClassName(styles, 'message__text', {}, [className])}>
{children}
</div>
);
}
return { children };
};
export const Text = ({ className, ...props }) => (
<div
className={createClassName(styles, 'message__text', {}, [className])}
{...createTextProps(props)}
/>
);
return (
<div
className={createClassName(styles, 'message__text', {
system: isSystemMessage(message),
}, [className])}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: parseMessage(message),
}}
/>
);
}
export const Time = ({ ts }) => (
<time dateTime={new Date(ts).toISOString()} className={createClassName(styles, 'message__time', {})}>
......
......@@ -23,26 +23,34 @@ const strong = (md) => {
md.use(strong);
export const parseMessage = ({ msg, t, conversationFinishedMessage }) => {
const systemMarkdown = (msg) => (`*${ msg }*`);
switch (t) {
case 'r':
return systemMarkdown(I18n.t('Room name changed'));
return md.render(I18n.t('Room name changed'));
case 'au':
return systemMarkdown(I18n.t('User added by'));
return md.render(I18n.t('User added by'));
case 'ru':
return systemMarkdown(I18n.t('User removed by'));
return md.render(I18n.t('User removed by'));
case 'ul':
return systemMarkdown(I18n.t('User left'));
return md.render(I18n.t('User left'));
case 'uj':
return systemMarkdown(I18n.t('User joined'));
return md.render(I18n.t('User joined'));
case 'wm':
return systemMarkdown(I18n.t('Welcome'));
return md.render(I18n.t('Welcome'));
case 'livechat-close':
return systemMarkdown(conversationFinishedMessage);
return md.render(conversationFinishedMessage || I18n.t('Conversation finished'));
default:
return md.render(msg);
}
};
export const parseDate = (ts) => format(ts, isToday(ts) ? 'HH:mm' : 'dddd HH:mm');
export const isSystemMessage = ({ t }) => [
'r',
'au',
'ru',
'ul',
'uj',
'wm',
'livechat-close',
].includes(t);
import { storiesOf } from '@storybook/react';
import centered from '@storybook/addon-centered/react';
import { withKnobs, boolean, date, object, text } from '@storybook/addon-knobs';
import { withKnobs, boolean, date, object, text, select } from '@storybook/addon-knobs';
import { avatarResolver } from '../../helpers.stories';
import Message from '.';
......@@ -52,6 +52,28 @@ storiesOf('Components|Message', module)
avatarResolver={avatarResolver}
/>
))
.add('system', () => (
<Message
me={boolean('me', false)}
t={select('t', [
'r',
'au',
'ru',
'ul',
'uj',
'wm',
'livechat-close',
], 'wm')}
group={boolean('group', false)}
msg={text('msg', 'Lorem ipsum dolor sit amet, ea usu quod eirmod lucilius, mea veri viris concludaturque id, vel eripuit fabulas ea')}
ts={date('ts', now)}
u={{
username: text('u.username', 'guilherme.gazzo'),
name: text('u.name', 'Guilherme Albrech Gazzo'),
}}
avatarResolver={avatarResolver}
/>
))
.add('me', () => (
<Message
me={boolean('me', true)}
......
......@@ -61,6 +61,10 @@ $message-attachment-gap: 8px;
font-size: $message-text-font-size;
word-break: break-all;
&--system {
font-style: italic;
}
a {
color: var(--color, $message-text-link-color);
text-decoration: underline dotted;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment