From efdb2c2665125b6ff09da5bf35b4396ef6f028f9 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 4 Apr 2019 21:09:08 +0300 Subject: Recommendations in feeds --- vnext/src/components/Message.css | 6 ++++-- vnext/src/components/Message.js | 20 ++++++++++++++++++++ vnext/src/components/Thread.js | 18 ------------------ 3 files changed, 24 insertions(+), 20 deletions(-) (limited to 'vnext/src/components') diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css index 337a3dc0..cd0c34ab 100644 --- a/vnext/src/components/Message.css +++ b/vnext/src/components/Message.css @@ -27,7 +27,7 @@ align-items: center; display: flex; flex-basis: 0; - flex-direction: column; + flex-direction: row; flex-grow: 1; padding-top: 12px; } @@ -129,7 +129,9 @@ blockquote { .msg-recomms { color: #AAA; font-size: small; - margin-top: 10px; + margin-bottom: 10px; + padding-bottom: 6px; + border-bottom: 1px solid #eee; overflow: hidden; text-indent: 10px; } diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index 02371ddb..f093221b 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -6,6 +6,7 @@ import moment from 'moment'; import { UserType, MessageType } from './Types'; import Icon from './Icon'; import Avatar from './Avatar'; +import { UserLink } from './UserInfo'; import { format } from '../utils/embed'; @@ -15,6 +16,7 @@ function Message({ data, visitor, children, ...rest }) { const isCode = (data.tags || []).indexOf('code') >= 0; return (
+
@@ -105,6 +107,24 @@ function Tags({ data, user, ...rest }) { const TagsList = React.memo(Tags); +function Recommends({ forMessage, ...rest }) { + const { likes, recommendations } = forMessage; + return recommendations && recommendations.length > 0 && ( +
{'❤️ by '} + { + recommendations.map(it => ( + + )).reduce((prev, curr) => [prev, ', ', curr]) + } + { + likes > recommendations.length && ( and {likes - recommendations.length} others) + } +
+ ) || null; +} + +const Recommendations = React.memo(Recommends); + Message.propTypes = { data: MessageType, visitor: UserType.isRequired, diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index f94ad358..6d8a5fd3 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -11,7 +11,6 @@ import MessageInput from './MessageInput'; import Spinner from './Spinner'; import Avatar from './Avatar'; import Button from './Button'; -import { UserLink } from './UserInfo'; import { format } from '../utils/embed'; @@ -85,7 +84,6 @@ export default class Thread extends React.Component { msg.mid ? ( {this.state.active === (msg.rid || 0) && Write a comment...} - ) : ( @@ -157,19 +155,3 @@ Thread.propTypes = { match: ReactRouterPropTypes.match, visitor: UserType.isRequired }; - -function Recommendations({ forMessage, ...rest }) { - const { likes, recommendations } = forMessage; - return recommendations && recommendations.length > 0 && ( -
{'Recommended by '} - { - recommendations.map(it => ( - - )).reduce((prev, curr) => [prev, ', ', curr]) - } - { - likes > recommendations.length && ( and {likes - recommendations.length} others) - } -
- ) || null; -} -- cgit v1.2.3