LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

merge CommentReply and CommentCreate

Browse source
This commit is contained in:
Sean Yesmunt 2020-03-20 15:09:45 -04:00
parent e3103747c8
commit 9b5860c1bf
7 changed files with 84 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
static/app-strings.json
View file

@ -1029,11 +1029,6 @@
"Your video has a bitrate over 6 mbps. We suggest transcoding to provide viewers the best experience.": "Your video has a bitrate over 6 mbps. We suggest transcoding to provide viewers the best experience.",
"Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience.": "Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience.",
"Almost there": "Almost there",
"Comment Acknowledgement": "Comment Acknowledgement",
"A few things to know before making your comment:": "A few things to know before making your comment:",
"Commenting is in alpha. During the alpha, all comments are sent to a LBRY, Inc. server, not the LBRY network itself.": "Commenting is in alpha. During the alpha, all comments are sent to a LBRY, Inc. server, not the LBRY network itself.",
"Deleting or editing comments is not currently possible. Please be mindful of this when posting.": "Deleting or editing comments is not currently possible. Please be mindful of this when posting.",
"When the alpha ends, we will attempt to transition comments, but do not promise to do so.": "When the alpha ends, we will attempt to transition comments, but do not promise to do so.",
"More Channels": "More Channels",
"Known Tags": "Known Tags",
"You aren’t blocking any channels": "You aren’t blocking any channels",
@ -1063,5 +1058,12 @@
"Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions%": "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions%",
"rename your existing wallet": "rename your existing wallet",
"Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory": "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory",
"Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory.": "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory."
"Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory.": "Your wallet data will remain intact. If you sign in with a different account, the wallets will be merged. To prevent this, you need to %rename_wallet_instructions% in the lbry/wallets directory.",
"Your wallet": "Your wallet",
"Publish a file, or create a channel": "Publish a file, or create a channel",
"Your account": "Your account",
"Creator Analytics": "Creator Analytics",
"Channel profile picture": "Channel profile picture",
"(%count%)": "(%count%)",
"Reposts of %uri%": "Reposts of %uri%"
}

37
ui/component/comment/view.jsx
View file

@ -10,7 +10,7 @@ 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';
import CommentReply from '../commentReply/index';
import CommentCreate from 'component/commentCreate';
import classnames from 'classnames';
type Props = {
@ -161,16 +161,15 @@ function Comment(props: Props) {
/>
</MenuButton>
<MenuList className="comment__menu-list">
<MenuItem className="comment__menu-option" onSelect={handleSetEditing}>
{__('Edit')}
</MenuItem>
<MenuItem className="comment__menu-option" onSelect={handleDeleteComment}>
{__('Delete')}
</MenuItem>
{parentId === null ? (
<MenuItem className="comment__menu-option" onSelect={handleReply}>
{__('Reply')}
</MenuItem>
{commentIsMine ? (
<React.Fragment>
<MenuItem className="comment__menu-option" onSelect={handleSetEditing}>
{__('Edit')}
</MenuItem>
<MenuItem className="comment__menu-option" onSelect={handleDeleteComment}>
{__('Delete')}
</MenuItem>
</React.Fragment>
) : (
''
)}
@ -212,7 +211,21 @@ function Comment(props: Props) {
</div>
)}
</div>
<div>{isReplying ? <CommentReply uri={uri} parentId={commentId} setReplying={setReplying} /> : ''}</div>
{!parentId && (
<Button button="link" className="comment__reply-button" onClick={handleReply} label={__('Reply')} />
)}
<div>
{isReplying ? (
<CommentCreate
uri={uri}
parentId={commentId}
onDoneReplying={() => setReplying(false)}
onCancelReplying={() => setReplying(false)}
/>
) : (
''
)}
</div>
</div>
</li>
);

8
ui/component/commentCreate/index.js
View file

@ -11,11 +11,9 @@ const select = (state, props) => ({
});
const perform = dispatch => ({
createComment: (comment, claimId, channel) => dispatch(doCommentCreate(comment, claimId, channel)),
createComment: (comment, claimId, channel, parentId) =>
dispatch(doCommentCreate(comment, claimId, channel, parentId)),
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
});
export default connect(
select,
perform
)(CommentCreate);
export default connect(select, perform)(CommentCreate);

44
ui/component/commentCreate/view.jsx
View file

@ -1,6 +1,7 @@
// @flow
import { CHANNEL_NEW } from 'constants/claim';
import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
import { FormField, Form } from 'component/common/form';
import Button from 'component/button';
import ChannelSection from 'component/selectChannel';
@ -13,14 +14,27 @@ type Props = {
uri: string,
claim: StreamClaim,
openModal: (id: string, { onCommentAcknowledge: () => void }) => void,
createComment: (string, string, string) => void,
createComment: (string, string, string, ?string) => void,
channels: ?Array<ChannelClaim>,
parentId?: string,
onDoneReplying?: () => void,
onCancelReplying?: () => void,
};
export function CommentCreate(props: Props) {
const { commentingEnabled, createComment, claim, openModal, channels } = props;
const {
commentingEnabled,
createComment,
claim,
openModal,
channels,
parentId,
onDoneReplying,
onCancelReplying,
} = props;
const { claim_id: claimId } = claim;
const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, '');
const isReply = !!parentId;
const [commentValue, setCommentValue] = React.useState('');
const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
const [channel, setChannel] = usePersistedState('comment-channel', '');
const [charCount, setCharCount] = useState(commentValue.length);
@ -59,8 +73,13 @@ export function CommentCreate(props: Props) {
}
function handleSubmit() {
if (channel !== CHANNEL_NEW && commentValue.length) createComment(commentValue, claimId, channel);
if (channel !== CHANNEL_NEW && commentValue.length) {
createComment(commentValue, claimId, channel, parentId);
}
setCommentValue('');
if (onDoneReplying) {
onDoneReplying();
}
}
useEffect(() => setCharCount(commentValue.length), [commentValue]);
@ -74,8 +93,8 @@ export function CommentCreate(props: Props) {
}
return (
<Form onSubmit={handleSubmit}>
<ChannelSection channel={channel} hideAnon onChannelChange={handleChannelChange} />
<Form onSubmit={handleSubmit} className={classnames('comment__create', { 'comment__create--reply': isReply })}>
{!isReply && <ChannelSection channel={channel} hideAnon onChannelChange={handleChannelChange} />}
<FormField
disabled={channel === CHANNEL_NEW}
type="textarea"
@ -92,9 +111,20 @@ export function CommentCreate(props: Props) {
button="primary"
disabled={channel === CHANNEL_NEW || !commentValue.length}
type="submit"
label={__('Post')}
label={isReply ? __('Reply') : __('Post')}
requiresAuth={IS_WEB}
/>
{isReply && (
<Button
button="link"
label={__('Cancel')}
onClick={() => {
if (onCancelReplying) {
onCancelReplying();
}
}}
/>
)}
</div>
</Form>
);

20
ui/component/commentReply/index.js
View file

@ -1,20 +0,0 @@
import { connect } from 'react-redux';
import { doCommentCreate, makeSelectClaimForUri } from 'lbry-redux';
import { doOpenModal } from 'redux/actions/app';
import { CommentReply } from './view';
import { selectUserVerifiedEmail } from 'lbryinc';
const select = (state, props) => ({
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
claim: makeSelectClaimForUri(props.uri)(state),
});
const perform = dispatch => ({
replyComment: (comment, claimId, channel, parentId) => dispatch(doCommentCreate(comment, claimId, channel, parentId)),
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
});
export default connect(
select,
perform
)(CommentReply);

88
ui/component/commentReply/view.jsx
View file

@ -1,88 +0,0 @@
// @flow
import { CHANNEL_NEW } from 'constants/claim';
import React, { useEffect, useState } from 'react';
import { FormField, Form } from 'component/common/form';
import Button from 'component/button';
import ChannelSection from 'component/selectChannel';
import usePersistedState from 'effects/use-persisted-state';
import * as MODALS from 'constants/modal_types';
import I18nMessage from '../i18nMessage/view';
type Props = {
commentingEnabled: boolean,
claim: StreamClaim,
parentId: string,
openModal: (id: string, { onCommentAcknowledge: () => void }) => void,
replyComment: (string, string, string, string) => void,
setReplying: boolean => void,
};
export function CommentReply(props: Props) {
const { commentingEnabled, replyComment, setReplying, claim, openModal, parentId } = props;
const { claim_id: claimId } = claim;
const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, '');
const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
const [channel, setChannel] = usePersistedState('comment-channel', 'anonymous');
const [charCount, setCharCount] = useState(commentValue.length);
function handleCommentChange(event) {
setCommentValue(event.target.value);
}
function handleChannelChange(channel) {
setChannel(channel);
}
function handleCommentAck() {
setCommentAck(true);
}
function onTextareaFocus() {
if (!commentAck) {
openModal(MODALS.COMMENT_ACKNOWEDGEMENT, { onCommentAcknowledge: handleCommentAck });
}
}
function handleSubmit() {
if (channel !== CHANNEL_NEW && commentValue.length);
replyComment(commentValue, claimId, channel, parentId);
setCommentValue('');
}
useEffect(() => setCharCount(commentValue.length), [commentValue]);
if (!commentingEnabled) {
return (
<I18nMessage tokens={{ sign_in_link: <Button button="link" requiresAuth label={__('sign in')} /> }}>
Please %sign_in_link% to comment.
</I18nMessage>
);
}
return (
<Form className="comment__reply-form" onSubmit={handleSubmit}>
<ChannelSection channel={channel} onChannelChange={handleChannelChange} />
<FormField
disabled={channel === CHANNEL_NEW}
type="textarea"
name="content_description"
label={__('Comment')}
onFocus={onTextareaFocus}
placeholder={__('Say something about this...')}
value={commentValue}
charCount={charCount}
onChange={handleCommentChange}
/>
<div className="section__actions">
<Button
button="primary"
disabled={channel === CHANNEL_NEW || !commentValue.length}
type="submit"
label={__('Post')}
requiresAuth={IS_WEB}
/>
<Button button="link" label={__('Cancel')} onClick={() => setReplying(false)} />
</div>
</Form>
);
}

20
ui/scss/component/_comments.scss
View file

@ -1,7 +1,3 @@
.comments {
@extend .ul--no-style;
}
.comment {
padding: var(--spacing-small) 0;
display: flex;
@ -11,7 +7,7 @@
margin: 0;
&:first-of-type {
padding-top: 0;
border-top: 1px solid var(--color-border);
}
&:not(:last-of-type) {
@ -19,13 +15,17 @@
}
}
.comment__reply {
border-left: 5px solid var(--color-border);
padding-left: var(--spacing-small);
.comment__create--reply {
margin-top: var(--spacing-small);
}
.comment__reply-form {
border-top: 1px solid var(--color-border);
.comment__reply {
border-left: 5px solid var(--color-primary-alt);
padding-left: var(--spacing-medium);
margin-left: var(--spacing-medium);
}
.comment__reply-button {
margin-top: var(--spacing-small);
}