// @flow import React, { useEffect, useState } from 'react'; import { isEmpty } from 'util/object'; import relativeDate from 'tiny-relative-date'; import Button from 'component/button'; import Expandable from 'component/expandable'; import MarkdownPreview from 'component/common/markdown-preview'; import ChannelThumbnail from 'component/channelThumbnail'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import Icon from 'component/common/icon'; import * as ICONS from 'constants/icons'; import { FormField, Form } from 'component/common/form'; type Props = { author: ?string, // LBRY Channel Name, e.g. @channel authorUri: string, // full LBRY Channel URI: lbry://@channel#123... commentId: string, // sha256 digest identifying the comment message: string, // comment body timePosted: number, // Comment timestamp channel: ?Claim, // Channel Claim, retrieved to obtain thumbnail pending?: boolean, resolveUri: string => void, // resolves the URI isResolvingUri: boolean, // if the URI is currently being resolved channelIsBlocked: boolean, // if the channel is blacklisted in the app claimIsMine: boolean, // if you control the claim which this comment was posted on commentIsMine: boolean, // if this comment was signed by an owned channel updateComment: (string, string) => void, deleteComment: string => void, }; const LENGTH_TO_COLLAPSE = 300; const ESCAPE_KEY = 27; function Comment(props: Props) { const { author, authorUri, timePosted, message, pending, channel, isResolvingUri, resolveUri, channelIsBlocked, commentIsMine, commentId, updateComment, deleteComment, } = props; const [isEditing, setEditing] = useState(false); const [editedMessage, setCommentValue] = useState(message); const [charCount, setCharCount] = useState(editedMessage.length); // used for controlling the visibility of the menu icon const [mouseIsHovering, setMouseHover] = useState(false); // to debounce subsequent requests const shouldFetch = channel === undefined || (channel !== null && channel.value_type === 'channel' && isEmpty(channel.meta) && !pending); useEffect(() => { // If author was extracted from the URI, then it must be valid. if (authorUri && author && !isResolvingUri && shouldFetch) { resolveUri(authorUri); } if (isEditing) { setCharCount(editedMessage.length); // a user will try and press the escape key to cancel editing their comment const handleEscape = event => { if (event.keyCode === ESCAPE_KEY) { setEditing(false); } }; window.addEventListener('keydown', handleEscape); // removes the listener so it doesn't cause problems elsewhere in the app return () => { window.removeEventListener('keydown', handleEscape); }; } }, [isResolvingUri, shouldFetch, author, authorUri, resolveUri, editedMessage, isEditing, setEditing]); function handleSetEditing() { setEditing(true); } function handleEditMessageChanged(event) { setCommentValue(event.target.value); } function handleSubmit() { updateComment(commentId, editedMessage); setEditing(false); } function handleDeleteComment() { deleteComment(commentId); } function handleMouseOver() { setMouseHover(true); } function handleMouseOut() { setMouseHover(false); } return (
  • {authorUri ? : }
    {!author ? ( {__('Anonymous')} ) : (
    {commentIsMine && ( {__('Edit')} {__('Delete')} )}
    {isEditing ? (
    ) : editedMessage.length >= LENGTH_TO_COLLAPSE ? (
    ) : (
    )}
  • ); } export default Comment;