diff options
author | 2019-02-21 00:20:21 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | d01d3369318b79f4f38820ef8c48344a6b082aff (patch) | |
tree | 3ec47c71215ff8e514646c5bb695cbc5df286403 | |
parent | e39818079a05cdd7cfc4744e972ce87105e1ff87 (diff) |
More pure components
-rw-r--r-- | vnext/src/components/Message.js | 14 | ||||
-rw-r--r-- | vnext/src/components/NavigationIcon.js | 4 | ||||
-rw-r--r-- | vnext/src/components/PM.js | 4 | ||||
-rw-r--r-- | vnext/src/components/Spinner.js | 4 |
4 files changed, 17 insertions, 9 deletions
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index 032504c3..6afb8d96 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -11,7 +11,7 @@ import { format } from '../utils/embed'; import './Message.css'; -const Message = React.memo(({ data, visitor, children, ...rest }) => { +function Message({ data, visitor, children, ...rest }) { return ( <div className="msg-cont"> <header className="h"> @@ -25,7 +25,7 @@ const Message = React.memo(({ data, visitor, children, ...rest }) => { </Link> </div> </Avatar> - <Tags user={data.user} data={data.tags || []} /> + <TagsList user={data.user} data={data.tags || []} /> </header> <div className="msg-txt"> <p dangerouslySetInnerHTML={{ __html: format(data.body, data.mid, (data.tags || []).indexOf('code') >= 0) }}></p> @@ -82,11 +82,11 @@ const Message = React.memo(({ data, visitor, children, ...rest }) => { {children} </div> ); -}); +} -export default Message; +export default React.memo(Message); -const Tags = React.memo(({ data, user, ...rest }) => { +function Tags({ data, user, ...rest }) { return data.length > 0 && ( <div className="msg-tags"> { @@ -96,7 +96,9 @@ const Tags = React.memo(({ data, user, ...rest }) => { } </div> ); -}); +} + +const TagsList = React.memo(Tags); Message.propTypes = { data: MessageType, diff --git a/vnext/src/components/NavigationIcon.js b/vnext/src/components/NavigationIcon.js index 5c5415ef..0a22ac57 100644 --- a/vnext/src/components/NavigationIcon.js +++ b/vnext/src/components/NavigationIcon.js @@ -5,7 +5,7 @@ import Icon from './Icon'; import './NavigationIcon.css'; -export default function NavigationIcon(props) { +function NavigationIcon(props) { return ( <div id="navicon" className="mobile" onClick={props.onToggle}> <Icon name="ei-navicon" size="s"/> @@ -13,6 +13,8 @@ export default function NavigationIcon(props) { ); } +export default React.memo(NavigationIcon); + NavigationIcon.propTypes = { onToggle: PropTypes.func.isRequired }; diff --git a/vnext/src/components/PM.js b/vnext/src/components/PM.js index 6b8c053b..a1e70ad5 100644 --- a/vnext/src/components/PM.js +++ b/vnext/src/components/PM.js @@ -5,7 +5,7 @@ import { UserType, MessageType } from './Types'; import Avatar from './Avatar'; import { format } from '../utils/embed'; -export default function PM(props) { +function PM(props) { const { chat } = props; return ( <li> @@ -19,6 +19,8 @@ export default function PM(props) { ); } +export default React.memo(PM); + function bubbleStyle(me, msg) { const isMe = me.uid === msg.user.uid; const color = isMe ? '#fff' : '#222'; diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js index fffa2c80..c1d42db4 100644 --- a/vnext/src/components/Spinner.js +++ b/vnext/src/components/Spinner.js @@ -1,7 +1,7 @@ import React from 'react'; import ContentLoader from 'react-content-loader'; -export default function Spinner(props) { +function Spinner(props) { return ( <div className="msg-cont"> <ContentLoader @@ -21,6 +21,8 @@ export default function Spinner(props) { ); } +export default React.memo(Spinner); + export function ChatSpinner(props) { return ( <ContentLoader |