diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index fa94f74a4..154d68134 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/client/coral-admin/src/components/Comment.js @@ -5,32 +5,47 @@ import timeago from 'timeago.js'; import styles from './CommentList.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations.json'; +import Linkify from 'react-linkify'; + +const linkify = new Linkify(); // Render a single comment for the list -export default props => ( -
  • -
    -
    - person - {props.comment.get('name') || lang.t('comment.anon')} - {timeago().format(props.comment.get('createdAt') || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} - {props.comment.get('flagged') ?

    {lang.t('comment.flagged')}

    : null} +export default props => { + const links = linkify.getMatches(props.comment.get('body')); + + return ( +
  • +
    +
    + person + {props.comment.get('name') || lang.t('comment.anon')} + {timeago().format(props.comment.get('createdAt') || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} + {props.comment.get('flagged') ?

    {lang.t('comment.flagged')}

    : null} +
    +
    + {links ? + Contains Link : null} +
    + {props.actions.map(action => canShowAction(action, props.comment) ? ( + + ) : null)} +
    +
    -
    - {props.actions.map(action => canShowAction(action, props.comment) ? ( - - ) : null)} +
    + + + {props.comment.get('body')} + +
    -
    -
    - {props.comment.get('body')} -
    -
  • -); + + ); +}; // Check if an action can be performed over a comment const canShowAction = (action, comment) => { @@ -43,4 +58,9 @@ const canShowAction = (action, comment) => { return true; }; +const linkStyles = { + backgroundColor: 'rgb(255, 219, 135)', + padding: '1px 2px' +}; + const lang = new I18n(translations); diff --git a/client/coral-admin/src/components/CommentList.css b/client/coral-admin/src/components/CommentList.css index f683ca36b..2c58c81cf 100644 --- a/client/coral-admin/src/components/CommentList.css +++ b/client/coral-admin/src/components/CommentList.css @@ -121,3 +121,15 @@ } } + + +.hasLinks { + color: #f00; + text-align: right; + display: flex; + align-items: center; + + i { + margin-right: 5px; + } +} diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 62dcee95e..9cf8bb3a1 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -84,6 +84,7 @@ class CommentStream extends Component { const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0]; const rootItem = this.props.items.assets && this.props.items.assets[rootItemId]; + const {actions, users, comments} = this.props.items; const {loggedIn, user, showSignInDialog} = this.props.auth; return
    { @@ -105,7 +106,7 @@ class CommentStream extends Component { id={rootItemId} premod={this.props.config.moderation} reply={false} - canPost={loggedIn} + author={user} /> {!loggedIn && }
    @@ -114,7 +115,7 @@ class CommentStream extends Component { const comment = this.props.items.comments[commentId]; return

    - +
    @@ -124,7 +125,7 @@ class CommentStream extends Component { @@ -160,7 +162,7 @@ class CommentStream extends Component { let reply = this.props.items.comments[replyId]; return

    - +
    diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index a1a44611f..a566ee15c 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -3,6 +3,7 @@ import translations from './../translations'; const lang = new I18n(translations); import * as actions from '../constants/auth'; import {base, handleResp, getInit} from '../helpers/response'; +import {addItem} from './items' // Dialog Actions export const showSignInDialog = () => ({type: actions.SHOW_SIGNIN_DIALOG}); @@ -29,6 +30,7 @@ export const fetchSignIn = (formData) => dispatch => { .then(({user}) => { dispatch(hideSignInDialog()); dispatch(signInSuccess(user)); + dispatch(addItem(user, 'users')); }) .catch(() => dispatch(signInFailure(lang.t('error.emailPasswordError')))); }; @@ -54,8 +56,10 @@ export const facebookCallback = (err, data) => dispatch => { return; } try { - dispatch(signInFacebookSuccess(JSON.parse(data))); + const user = JSON.parse(data); + dispatch(signInFacebookSuccess(user)); dispatch(hideSignInDialog()); + dispatch(addItem(user, 'users')); } catch (err) { dispatch(signInFacebookFailure(err)); return; @@ -113,4 +117,3 @@ export const logout = () => dispatch => { export const validForm = () => ({type: actions.VALID_FORM}); export const invalidForm = error => ({type: actions.INVALID_FORM, error}); - diff --git a/client/coral-plugin-author-name/AuthorName.js b/client/coral-plugin-author-name/AuthorName.js index 585c1c07d..aef819468 100644 --- a/client/coral-plugin-author-name/AuthorName.js +++ b/client/coral-plugin-author-name/AuthorName.js @@ -1,9 +1,9 @@ import React from 'react'; const packagename = 'coral-plugin-author-name'; -const AuthorName = ({name}) => +const AuthorName = ({author}) =>
    - {name} + {author && author.displayName}
    ; export default AuthorName; diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index e712d8e24..76f7e43be 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -12,7 +12,8 @@ class CommentBox extends Component { id: PropTypes.string, comments: PropTypes.array, reply: PropTypes.bool, - canPost: PropTypes.bool + canPost: PropTypes.bool, + currentUser: PropTypes.object } state = { @@ -21,11 +22,11 @@ class CommentBox extends Component { } postComment = () => { - const {postItem, updateItem, id, parent_id, addNotification, appendItemArray, premod} = this.props; + const {postItem, updateItem, id, parent_id, addNotification, appendItemArray, premod, author} = this.props; let comment = { body: this.state.body, asset_id: id, - username: this.state.username + author_id: author.id }; let related; let parent_type; @@ -52,7 +53,7 @@ class CommentBox extends Component { } render () { - const {styles, reply, canPost} = this.props; + const {styles, reply, author} = this.props; // How to handle language in plugins? Should we have a dependency on our central translation file? return
    - { canPost && ( + { author && (