Uses Expandable only if the message exceeds 300 characters

This commit is contained in:
Oleg Silkin 2019-11-27 16:08:43 -05:00 committed by Sean Yesmunt
parent 23ec4beb7c
commit 26ae67702d
2 changed files with 8 additions and 6 deletions

View file

@ -19,6 +19,8 @@ type Props = {
channelIsBlocked: boolean, channelIsBlocked: boolean,
}; };
const LENGTH_TO_COLLAPSE = 300;
function Comment(props: Props) { function Comment(props: Props) {
const { const {
author, author,
@ -40,7 +42,6 @@ function Comment(props: Props) {
resolveUri(authorUri); resolveUri(authorUri);
} }
}, [isResolvingUri, shouldFetch, author, authorUri, resolveUri]); }, [isResolvingUri, shouldFetch, author, authorUri, resolveUri]);
return ( return (
<li className="comment"> <li className="comment">
<div className="comment__author-thumbnail"> <div className="comment__author-thumbnail">
@ -59,11 +60,13 @@ function Comment(props: Props) {
</time> </time>
</span> </span>
<div> <div>
<Expandable> {message.length >= LENGTH_TO_COLLAPSE ? (
<div className="comment__message"> <Expandable className="comment__message">
<MarkdownPreview content={message} promptLinks /> <MarkdownPreview content={message} promptLinks />
</div> </Expandable>
</Expandable> ) : (
<MarkdownPreview content={message} promptLinks />
)}
</div> </div>
</div> </div>
</li> </li>

View file

@ -10,7 +10,6 @@ type Props = {
function CommentList(props: Props) { function CommentList(props: Props) {
const { fetchComments, uri, comments } = props; const { fetchComments, uri, comments } = props;
useEffect(() => { useEffect(() => {
fetchComments(uri); fetchComments(uri);
}, [fetchComments, uri]); }, [fetchComments, uri]);