From f6c6cd007535137e1b692eecb23735431882ef5b Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Mon, 5 Nov 2018 13:09:30 +0300
Subject: Memoizing Contact, Icon and Message

---
 vnext/src/components/Contact.js | 24 ++++++++++-----------
 vnext/src/components/Icon.js    | 46 +++++++++++++++++++----------------------
 vnext/src/components/Message.js | 13 ++++++------
 3 files changed, 38 insertions(+), 45 deletions(-)

(limited to 'vnext')

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,
-- 
cgit v1.2.3