From 621590b4ab31dd12de97ded31f17a00ff2fc6dd6 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 23 Jul 2019 10:45:35 +0200 Subject: [PATCH] Refactor DisplayName component to make it closer to upstream --- .../glitch/components/display_name.js | 112 +++++++++--------- 1 file changed, 54 insertions(+), 58 deletions(-) diff --git a/app/javascript/flavours/glitch/components/display_name.js b/app/javascript/flavours/glitch/components/display_name.js index 7f6ef5a5da..7626fb25ca 100644 --- a/app/javascript/flavours/glitch/components/display_name.js +++ b/app/javascript/flavours/glitch/components/display_name.js @@ -1,73 +1,69 @@ -// Package imports. -import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; -// The component. -export default function DisplayName ({ - account, - className, - inline, - localDomain, - others, - onAccountClick, -}) { - const computedClass = classNames('display-name', { inline }, className); +export default class DisplayName extends React.PureComponent { - if (!account) return null; + static propTypes = { + account: ImmutablePropTypes.map, + className: PropTypes.string, + inline: PropTypes.bool, + localDomain: PropTypes.string, + others: ImmutablePropTypes.list, + handleClick: PropTypes.func, + }; - let displayName, suffix; + render() { + const { account, className, inline, localDomain, others, onAccountClick } = this.props; - let acct = account.get('acct'); + const computedClass = classNames('display-name', { inline }, className); - if (acct.indexOf('@') === -1 && localDomain) { - acct = `${acct}@${localDomain}`; - } + if (!account) return null; - if (others && others.size > 0) { - displayName = others.take(2).map(a => ( - onAccountClick(a.get('id'), e)} - title={`@${a.get('acct')}`} - > - - - - - )).reduce((prev, cur) => [prev, ', ', cur]); + let displayName, suffix; - if (others.size - 2 > 0) { - displayName.push(` +${others.size - 2}`); + let acct = account.get('acct'); + + if (acct.indexOf('@') === -1 && localDomain) { + acct = `${acct}@${localDomain}`; } - suffix = ( - onAccountClick(account.get('id'), e)}> - @{acct} - + if (others && others.size > 0) { + displayName = others.take(2).map(a => ( + onAccountClick(a.get('id'), e)} + title={`@${a.get('acct')}`} + > + + + + + )).reduce((prev, cur) => [prev, ', ', cur]); + + if (others.size - 2 > 0) { + displayName.push(` +${others.size - 2}`); + } + + suffix = ( + onAccountClick(account.get('id'), e)}> + @{acct} + + ); + } else { + displayName = ; + suffix = @{acct}; + } + + return ( + + {displayName} + {inline ? ' ' : null} + {suffix} + ); - } else { - displayName = ; - suffix = @{acct}; } - return ( - - {displayName} - {inline ? ' ' : null} - {suffix} - - ); } - -// Props. -DisplayName.propTypes = { - account: ImmutablePropTypes.map, - className: PropTypes.string, - inline: PropTypes.bool, - localDomain: PropTypes.string, - others: ImmutablePropTypes.list, - handleClick: PropTypes.func, -};