vnext/src/components/Message.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

import React from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
import moment from 'moment';

import Icon from './Icon';

export default function Message(props) {
    const msg = props.data;
    const visitor = props.visitor;
    return (
        <article itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org">
            <header className="h">
                <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
                    <a href={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></a>
                </span>
                <div className="msg-avatar"><a href={`/${msg.user.uname}/`}>
                    <img src={`//i.juick.com/a/${msg.user.uid}.png`} alt={`${msg.user.uname}`} /></a>
                </div>
                <div className="msg-ts">
                    <a href={`/${msg.user.uname}/${msg.mid}`}>
                        <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()}
                        </time>
                    </a>
                </div>
                <div className="msg-tags" itemProp="headline">
                    <Tags data={msg.tags || []} />
                </div>
            </header>
            <ReactMarkdown itemProp="description" source={msg.body} />
            {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>
                </p>
            }
            <nav className="l">
                { visitor.uid === msg.user.uid ? (
                    <a href={`/${msg.user.uname}/${msg.mid}`} className="a-like msg-button">
                        <span className="msg-button-icon">
                            <Icon name="ei-heart" size="s" />
                            {msg.likes > 0 && (` ${msg.likes}`)}
                        </span>
                        <span>&nbsp;Recommend</span>
                    </a>
                ) : visitor.uid > 0 ? (
                    <a href="/post?body=!+%23{{ msg.mid }}" className="a-like msg-button">
                        <span className="msg-button-icon">
                            <Icon name="ei-heart" size="s" />
                            {msg.likes > 0 && (` ${msg.likes}`)}
                        </span>
                        <span>&nbsp;Recommend</span>
                    </a>
                ) : (
                            <a href="/login" className="a-login msg-button">
                                <span className="msg-button-icon">
                                    <Icon name="ei-heart" size="s" />
                                    {msg.likes > 0 && (` ${msg.likes}`)}
                                </span>
                                <span>&nbsp;Recommend</span>
                            </a>
                        )}
                {!Boolean(msg.ReadOnly) | (visitor.uid === msg.user.uid) && (
                    <React.Fragment>
                        <a href={`/${msg.user.uname}/${msg.mid}`} 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>
                                    ) : (
                                            `${msg.replies}`
                                        ))                                    
                                }
                            </span>
                            <span>&nbsp;Comment</span>
                        </a>
                        <a href="#" className="msg-menu msg-button">
                            <Icon name="ei-link" size="s" />
                            <span>&nbsp;Share</span>
                        </a>
                    </React.Fragment>
                )}
                {msg.FriendsOnly && (
                    <a href="#" className="a-privacy">Открыть доступ</a>
                )}
            </nav>
        </article>
    );
}

function Tags(props) {
    return props.data && props.data.map(tag => { return (<a key={tag} href={`/tag/${tag}`} title={tag}>{tag}</a>) })
}

Message.propTypes = {
    data: PropTypes.shape({
        mid: PropTypes.number.isRequired,
        user: PropTypes.shape({
            uid: PropTypes.number.isRequired,
            uname: PropTypes.string.isRequired
        }),
        timestamp: PropTypes.string.isRequired,
        body: PropTypes.string
    })
};