diff options
Diffstat (limited to 'vnext/src/components/Message.js')
| -rw-r--r-- | vnext/src/components/Message.js | 62 |
1 files changed, 30 insertions, 32 deletions
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index 585ae1ac..273e035c 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -9,52 +9,50 @@ import Avatar from './Avatar'; import { format } from '../utils/embed'; -export default function Message(props) { - const msg = props.data; - const visitor = props.visitor; +export default function Message({ data, visitor, children, ...rest }) { return ( <div className="msg-cont" itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org"> <header className="h"> <span itemProp="author" itemScope="" itemType="http://schema.org/Person"> - <Link to={{ pathname: `/${msg.user.uname}/` }} itemProp="url" rel="author"> - <span itemProp="name">{msg.user.uname}</span> + <Link to={{ pathname: `/${data.user.uname}/` }} itemProp="url" rel="author"> + <span itemProp="name">{data.user.uname}</span> </Link> </span> - <Avatar user={msg.user} /> + <Avatar user={data.user} /> <div className="msg-ts"> - <Link to={{ pathname: `/${msg.user.uname}/${msg.mid}`, state: {msg: msg} }}> - <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp} - title={moment.utc(msg.timestamp).local().format('lll')}> - {moment.utc(msg.timestamp).fromNow()} + <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: {msg: data} }}> + <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={data.timestamp} + title={moment.utc(data.timestamp).local().format('lll')}> + {moment.utc(data.timestamp).fromNow()} </time> </Link> </div> <div className="msg-tags" itemProp="headline"> - <Tags user={msg.user} data={msg.tags || []} /> + <Tags user={data.user} data={data.tags || []} /> </div> </header> <div className="msg-txt"> - <p itemProp="description" dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p> + <p itemProp="description" dangerouslySetInnerHTML={{ __html: format(data.body, data.mid, (data.tags || []).indexOf('code') >= 0) }}></p> </div> - {msg.photo && - <p className="ir"><a href={`//i.juick.com/p/${msg.mid}.${msg.attach}`} data-fname={`${msg.mid}.${msg.attach}`}> - <img itemProp="image" src={`//i.juick.com/p/${msg.mid}.${msg.attach}`} alt="" /></a> + {data.photo && + <p className="ir"><a href={`//i.juick.com/p/${data.mid}.${data.attach}`} data-fname={`${data.mid}.${data.attach}`}> + <img itemProp="image" src={`//i.juick.com/p/${data.mid}.${data.attach}`} alt="" /></a> </p> } <nav className="l"> - {visitor.uid === msg.user.uid ? ( - <a href={`/${msg.user.uname}/${msg.mid}`} className="a-like msg-button"> + {visitor.uid === data.user.uid ? ( + <a href={`/${data.user.uname}/${data.mid}`} className="a-like msg-button"> <span className="msg-button-icon"> <Icon name="ei-heart" size="s" /> - {msg.likes > 0 && (` ${msg.likes}`)} + {data.likes > 0 && (` ${data.likes}`)} </span> <span> Recommend</span> </a> ) : visitor.uid > 0 ? ( - <Link to={{pathname: "/post", search: `?body=!+%23${msg.mid}`}} className="a-like msg-button"> + <Link to={{pathname: "/post", search: `?body=!+%23${data.mid}`}} className="a-like msg-button"> <span className="msg-button-icon"> <Icon name="ei-heart" size="s" /> - {msg.likes > 0 && (` ${msg.likes}`)} + {data.likes > 0 && (` ${data.likes}`)} </span> <span> Recommend</span> </Link> @@ -62,21 +60,21 @@ export default function Message(props) { <a href="/login" className="a-login msg-button"> <span className="msg-button-icon"> <Icon name="ei-heart" size="s" /> - {msg.likes > 0 && (` ${msg.likes}`)} + {data.likes > 0 && (` ${data.likes}`)} </span> <span> Recommend</span> </a> )} - {!Boolean(msg.ReadOnly) | (visitor.uid === msg.user.uid) && ( + {!Boolean(data.ReadOnly) | (visitor.uid === data.user.uid) && ( <React.Fragment> - <Link to={{ pathname: `/${msg.user.uname}/${msg.mid}`, state: {msg: msg} }} className="a-comment msg-button"> + <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: {msg: data} }} className="a-comment msg-button"> <span className="msg-button-icon"> <Icon name="ei-comment" size="s" /> - {msg.replies > 0 && - (Boolean(msg.unread) ? ( - <span className="badge">${msg.replies}</span> + {data.replies > 0 && + (Boolean(data.unread) ? ( + <span className="badge">${data.replies}</span> ) : ( - `${msg.replies}` + `${data.replies}` )) } </span> @@ -88,18 +86,18 @@ export default function Message(props) { </a> </React.Fragment> )} - {msg.FriendsOnly && ( + {data.FriendsOnly && ( <a href="#" className="a-privacy">Открыть доступ</a> )} </nav> - {props.children} + { children } </div> ); } -function Tags(props) { - return props.data && props.data.map(tag => { - return (<Link key={tag} to={{ pathname: `/${props.user.uname}`, search: `?tag=${tag}` }} title={tag}>{tag}</Link>) +function Tags({ data, user, ...rest}) { + return data && data.map(tag => { + return (<Link key={tag} to={{ pathname: `/${user.uname}`, search: `?tag=${tag}` }} title={tag}>{tag}</Link>) }) } |