diff options
author | 2018-11-05 13:09:30 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | f6c6cd007535137e1b692eecb23735431882ef5b (patch) | |
tree | 0d5d06ec2d32d1e418bc9cc2b37a54dd02fee27a /vnext/src | |
parent | 94741fb25dd6c60571e78393c43355d8ddf8b64d (diff) |
Memoizing Contact, Icon and Message
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/Contact.js | 24 | ||||
-rw-r--r-- | vnext/src/components/Icon.js | 46 | ||||
-rw-r--r-- | vnext/src/components/Message.js | 13 |
3 files changed, 38 insertions, 45 deletions
diff --git a/vnext/src/components/Contact.js b/vnext/src/components/Contact.js index 300b650b..787acd57 100644 --- a/vnext/src/components/Contact.js +++ b/vnext/src/components/Contact.js @@ -3,20 +3,18 @@ import { UserType } from './Types'; import Avatar from './Avatar'; -export default class Contact extends React.Component { +const Contact = React.memo(({user, ...rest}) => { + return ( + <> + <Avatar user={user} link={`/pm/${user.uname}`}> + {user.unreadCount && <span className="badge">{user.unreadCount}</span>} + <div className="msg-ts">{user.lastMessageText}</div> + </Avatar> + </> + ); +}); - render() { - const { user } = this.props; - return ( - <> - <Avatar user={user} link={`/pm/${user.uname}`}> - {user.unreadCount && <span className="badge">{user.unreadCount}</span>} - <div className="msg-ts">{user.lastMessageText}</div> - </Avatar> - </> - ); - } -} +export default Contact; Contact.propTypes = { user: UserType diff --git a/vnext/src/components/Icon.js b/vnext/src/components/Icon.js index 0a4c7dbc..faf1a704 100644 --- a/vnext/src/components/Icon.js +++ b/vnext/src/components/Icon.js @@ -1,39 +1,35 @@ import React from 'react'; import PropTypes from 'prop-types'; -export default class Icon extends React.Component { - constructor(props) { - super(props); - } +const Icon = React.memo(props => { + var size = props.size ? ' icon--' + props.size : ''; + var className = props.className ? ' ' + props.className : ''; + var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className; - render() { - var size = this.props.size ? ' icon--' + this.props.size : ''; - var className = this.props.className ? ' ' + this.props.className : ''; - var klass = 'icon' + (!this.props.noFill ? ' icon--' + this.props.name : '') + size + className; + var name = '#' + props.name + '-icon'; + var useTag = '<use xlink:href=' + name + ' />'; + var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } }); + return React.createElement( + 'div', + { className: klass }, + wrapSpinner(Icon, klass) + ); +}); - var name = '#' + this.props.name + '-icon'; - var useTag = '<use xlink:href=' + name + ' />'; - var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } }); +function wrapSpinner(Html, klass) { + if (klass.indexOf('spinner') > -1) { return React.createElement( 'div', - { className: klass }, - this.wrapSpinner(Icon, klass) + { className: 'icon__spinner' }, + Html ); - } - - wrapSpinner(Html, klass) { - if (klass.indexOf('spinner') > -1) { - return React.createElement( - 'div', - { className: 'icon__spinner' }, - Html - ); - } else { - return Html; - } + } else { + return Html; } } +export default Icon; + Icon.propTypes = { size: PropTypes.string.isRequired, name: PropTypes.string.isRequired, diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index 1ecbf996..f303d5eb 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -9,7 +9,7 @@ import Avatar from './Avatar'; import { format } from '../utils/embed'; -export default function Message({ data, visitor, children, ...rest }) { +const Message = React.memo(({ data, visitor, children, ...rest }) => { return ( <div className="msg-cont"> <header className="h"> @@ -80,16 +80,15 @@ export default function Message({ data, visitor, children, ...rest }) { </a> </> )} - {data.FriendsOnly && ( - <a href="#" className="a-privacy">Открыть доступ</a> - )} </nav> {children} </div> ); -} +}); + +export default Message; -function Tags({ data, user, ...rest }) { +const Tags = React.memo(({ data, user, ...rest }) => { return data.length > 0 && ( <div className="msg-tags"> { @@ -99,7 +98,7 @@ function Tags({ data, user, ...rest }) { } </div> ); -} +}); Message.propTypes = { data: MessageType, |