diff options
| -rw-r--r-- | vnext/package.json | 7 | ||||
| -rw-r--r-- | vnext/src/components/Message.js | 62 | ||||
| -rw-r--r-- | vnext/src/components/Thread.js | 9 | ||||
| -rw-r--r-- | vnext/yarn.lock | 9 |
4 files changed, 49 insertions, 38 deletions
diff --git a/vnext/package.json b/vnext/package.json index 27aec38b..ad007a81 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -15,6 +15,7 @@ "babel-jest": "^23.2.0", "babel-loader": "^7.1.4", "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "connect-history-api-fallback": "^1.5.0", @@ -45,6 +46,12 @@ { "spec": true } + ], + [ + "transform-object-rest-spread", + { + "useBuiltIns": true + } ] ], "presets": [ 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>) }) } diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index 0ec39d11..3de16a64 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -159,12 +159,11 @@ const linkStyle = { cursor: 'pointer' } -function Recommendations(props) { - const recomms = props.src; - return recomms && ( - <div className="msg-recomms">{`Recommended by (${recomms.length}): `} +function Recommendations({src, ...rest}) { + return src && ( + <div className="msg-recomms">{`Recommended by (${src.length}): `} { - recomms.map(it => ( + src.map(it => ( <Link key={it} to={`/${it}/`}>{it}</Link> )).reduce((prev, curr) => [prev, ', ', curr]) } diff --git a/vnext/yarn.lock b/vnext/yarn.lock index 3953d8d7..c99a46a2 100644 --- a/vnext/yarn.lock +++ b/vnext/yarn.lock @@ -683,7 +683,7 @@ babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" -babel-plugin-syntax-object-rest-spread@^6.13.0: +babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -891,6 +891,13 @@ babel-plugin-transform-flow-strip-types@^6.22.0: babel-plugin-syntax-flow "^6.18.0" babel-runtime "^6.22.0" +babel-plugin-transform-object-rest-spread@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06" + dependencies: + babel-plugin-syntax-object-rest-spread "^6.8.0" + babel-runtime "^6.26.0" + babel-plugin-transform-react-display-name@^6.23.0: version "6.25.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1" |