60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import {FormattedMessage, useIntl} from 'react-intl';
|
|
|
|
import {useSelector} from 'react-redux';
|
|
import {getUser} from 'mattermost-redux/selectors/entities/users';
|
|
import {GlobalState} from 'mattermost-redux/types/store';
|
|
import {UserProfile} from 'mattermost-redux/types/users';
|
|
|
|
import {Ownership} from '../../types/badges';
|
|
|
|
import './user_row.scss';
|
|
|
|
type Props = {
|
|
ownership: Ownership;
|
|
onClick: (user: string) => void;
|
|
}
|
|
|
|
const UserBadgeRow: React.FC<Props> = ({ownership, onClick}: Props) => {
|
|
const intl = useIntl();
|
|
const user = useSelector<GlobalState, UserProfile>((state) => getUser(state, ownership.user));
|
|
const grantedBy = useSelector<GlobalState, UserProfile>((state) => getUser(state, ownership.granted_by));
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
let grantedByName = intl.formatMessage({id: 'badges.unknown', defaultMessage: 'неизвестно'});
|
|
if (grantedBy) {
|
|
grantedByName = '@' + grantedBy.username;
|
|
}
|
|
|
|
const time = new Date(ownership.time);
|
|
return (
|
|
<div
|
|
className='UserRow'
|
|
onClick={() => onClick(ownership.user)}
|
|
>
|
|
<div className='badge-user-username'>
|
|
<a>{`@${user.username}`}</a>
|
|
</div>
|
|
<div className='badge-user-meta'>
|
|
<FormattedMessage
|
|
id='badges.label.granted_by'
|
|
defaultMessage='Выдал: {username}'
|
|
values={{username: grantedByName}}
|
|
/>
|
|
{' · '}
|
|
<FormattedMessage
|
|
id='badges.label.granted_at'
|
|
defaultMessage='Выдан: {date}'
|
|
values={{date: intl.formatDate(time, {day: '2-digit', month: '2-digit', year: 'numeric'})}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserBadgeRow;
|