aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Message.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components/Message.js')
-rw-r--r--vnext/src/components/Message.js142
1 files changed, 0 insertions, 142 deletions
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
deleted file mode 100644
index eb008bfe..00000000
--- a/vnext/src/components/Message.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import moment from 'moment';
-
-import { UserType, MessageType } from './Types';
-import Icon from './Icon';
-import Avatar from './Avatar';
-import { UserLink } from './UserInfo';
-
-import { format, embedUrls } from '../utils/embed';
-
-import './Message.css';
-
-export default function Message({ data, visitor, children, ...rest }) {
- const isCode = (data.tags || []).indexOf('code') >= 0;
- const likesSummary = data.likes ? `${data.likes}` : 'Recommend';
- const commentsSummary = data.replies ? `${data.replies}` : 'Comment';
- const embedRef = useRef();
- const msgRef = useRef();
- useEffect(() => {
- if (msgRef.current) {
- embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
- if (!embedRef.current.hasChildNodes()) {
- embedRef.current.style.display = 'none';
- }
- }
- }, []);
- return (
- <div className="msg-cont">
- <Recommendations forMessage={data} />
- <header className="h">
- <Avatar user={data.user}>
- <div className="msg-ts">
- <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }}>
- <time dateTime={data.timestamp}
- title={moment.utc(data.timestamp).local().format('lll')}>
- {moment.utc(data.timestamp).fromNow()}
- </time>
- </Link>
- </div>
- </Avatar>
- <TagsList user={data.user} data={data.tags || []} />
- </header>
- {
- data.body &&
- <div className="msg-txt" ref={msgRef}>
- <MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid, isCode) }} />
- </div>
- }
- {
- data.photo &&
- <div className="msg-media">
- <a href={`//i.juick.com/p/${data.mid}.${data.attach}`} data-fname={`${data.mid}.${data.attach}`}>
- <img src={`//i.juick.com/photos-512/${data.mid}.${data.attach}`} alt="" />
- </a>
- </div>
- }
- <div className="embedContainer" ref={embedRef} />
- <nav className="l">
- {visitor.uid === data.user.uid ? (
- <Link to={{ pathname: `/${data.user.uname}/${data.mid}` }} className="a-like msg-button">
- <Icon name="ei-heart" size="s" />
- <span>{likesSummary}</span>
- </Link>
- ) : visitor.uid > 0 ? (
- <Link to={{ pathname: '/post', search: `?body=!+%23${data.mid}` }} className="a-like msg-button">
- <Icon name="ei-heart" size="s" />
- <span>{likesSummary}</span>
- </Link>
- ) : (
- <a href="/login" className="a-login msg-button">
- <Icon name="ei-heart" size="s" />
- <span>{likesSummary}</span>
- </a>
- )}
- {!data.ReadOnly | (visitor.uid === data.user.uid) && (
- <>
- <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }} className="a-comment msg-button">
- <Icon name="ei-comment" size="s" />
- <span>{commentsSummary}</span>
- </Link>
- </>
- )}
- </nav>
- {children}
- </div>
- );
-}
-
-function MessageContainer({ isCode, data }) {
- return isCode ? (<pre dangerouslySetInnerHTML={data} />) : (<p dangerouslySetInnerHTML={data} />);
-}
-
-function Tags({ data, user, ...rest }) {
- return data.length > 0 && (
- <div className="msg-tags">
- {
- data.map(tag => {
- return (<Link key={tag} to={{ pathname: `/${user.uname}`, search: `?tag=${tag}` }} title={tag}>{tag}</Link>);
- }).reduce((prev, curr) => [prev, ', ', curr])
- }
- </div>
- );
-}
-
-const TagsList = React.memo(Tags);
-
-function Recommends({ forMessage, ...rest }) {
- const { likes, recommendations } = forMessage;
- return recommendations && recommendations.length > 0 && (
- <div className="msg-recomms">{'♡ by '}
- {
- recommendations.map(it => (
- <UserLink key={it.uri || it.uid} user={it} />
- )).reduce((prev, curr) => [prev, ', ', curr])
- }
- {
- likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
- }
- </div>
- ) || null;
-}
-
-const Recommendations = React.memo(Recommends);
-
-Message.propTypes = {
- data: MessageType,
- visitor: UserType.isRequired,
- children: PropTypes.node
-};
-
-MessageContainer.propTypes = {
- isCode: PropTypes.bool.isRequired,
- data: PropTypes.object.isRequired
-};
-
-Tags.propTypes = {
- user: UserType.isRequired,
- data: PropTypes.array
-};
-