aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-11-05 13:09:30 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commitf6c6cd007535137e1b692eecb23735431882ef5b (patch)
tree0d5d06ec2d32d1e418bc9cc2b37a54dd02fee27a
parent94741fb25dd6c60571e78393c43355d8ddf8b64d (diff)
Memoizing Contact, Icon and Message
-rw-r--r--vnext/src/components/Contact.js24
-rw-r--r--vnext/src/components/Icon.js46
-rw-r--r--vnext/src/components/Message.js13
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,