lbry-desktop/ui/component/commentCreate/view.jsx

329 lines
10 KiB
React
Raw Normal View History

2019-05-17 20:21:07 +02:00
// @flow
2021-04-23 21:59:48 +02:00
import type { ElementRef } from 'react';
import { SIMPLE_SITE } from 'config';
2020-08-25 21:54:06 +02:00
import * as PAGES from 'constants/pages';
2021-04-23 21:59:48 +02:00
import * as ICONS from 'constants/icons';
import React from 'react';
2020-03-20 20:09:45 +01:00
import classnames from 'classnames';
2019-05-21 02:47:23 +02:00
import { FormField, Form } from 'component/common/form';
2019-05-17 20:21:07 +02:00
import Button from 'component/button';
import SelectChannel from 'component/selectChannel';
2019-09-27 20:56:15 +02:00
import usePersistedState from 'effects/use-persisted-state';
2021-04-23 21:59:48 +02:00
import { FF_MAX_CHARS_IN_COMMENT, FF_MAX_CHARS_IN_LIVESTREAM_COMMENT } from 'constants/form-field';
import { useHistory } from 'react-router';
2021-04-23 21:59:48 +02:00
import WalletTipAmountSelector from 'component/walletTipAmountSelector';
import CreditAmount from 'component/common/credit-amount';
import ChannelThumbnail from 'component/channelThumbnail';
import UriIndicator from 'component/uriIndicator';
import Empty from 'component/common/empty';
const COMMENT_SLOW_MODE_SECONDS = 5;
2019-05-17 20:21:07 +02:00
type Props = {
2019-05-21 02:47:23 +02:00
uri: string,
2019-06-12 16:53:27 +02:00
claim: StreamClaim,
2020-09-30 02:11:48 +02:00
createComment: (string, string, string, ?string) => Promise<any>,
commentsDisabledBySettings: boolean,
channels: ?Array<ChannelClaim>,
2020-03-20 20:09:45 +01:00
onDoneReplying?: () => void,
onCancelReplying?: () => void,
2020-08-24 19:35:21 +02:00
isNested: boolean,
isFetchingChannels: boolean,
2020-10-07 21:14:52 +02:00
parentId: string,
isReply: boolean,
2020-10-20 05:20:38 +02:00
activeChannel: string,
activeChannelClaim: ?ChannelClaim,
livestream?: boolean,
toast: (string) => void,
claimIsMine: boolean,
2021-04-23 21:59:48 +02:00
sendTip: ({}, (any) => void, (any) => void) => void,
justCommented: Array<string>,
2019-05-17 20:21:07 +02:00
};
2019-06-12 16:53:27 +02:00
export function CommentCreate(props: Props) {
const {
createComment,
commentsDisabledBySettings,
claim,
channels,
onDoneReplying,
onCancelReplying,
isNested,
isFetchingChannels,
2020-10-07 21:14:52 +02:00
isReply,
parentId,
activeChannelClaim,
livestream,
toast,
claimIsMine,
2021-04-23 21:59:48 +02:00
sendTip,
justCommented,
} = props;
2020-09-30 02:04:47 +02:00
const buttonref: ElementRef<any> = React.useRef();
const {
push,
location: { pathname },
} = useHistory();
2021-04-23 21:59:48 +02:00
const [isSubmitting, setIsSubmitting] = React.useState(false);
const [commentFailure, setCommentFailure] = React.useState(false);
const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined });
2019-06-12 16:53:27 +02:00
const { claim_id: claimId } = claim;
2021-04-23 21:59:48 +02:00
const [isSupportComment, setIsSupportComment] = React.useState();
const [isReviewingSupportComment, setIsReviewingSupportComment] = React.useState();
const [tipAmount, setTipAmount] = React.useState(1);
2020-03-20 20:09:45 +01:00
const [commentValue, setCommentValue] = React.useState('');
const [lastCommentTime, setLastCommentTime] = React.useState();
const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
2020-08-25 21:54:06 +02:00
const hasChannels = channels && channels.length;
2021-04-23 21:59:48 +02:00
const disabled = isSubmitting || !activeChannelClaim || !commentValue.length;
const charCount = commentValue.length;
2019-06-12 16:53:27 +02:00
function handleCommentChange(event) {
let commentValue;
if (isReply) {
commentValue = event.target.value;
} else {
commentValue = !SIMPLE_SITE && advancedEditor ? event : event.target.value;
}
setCommentValue(commentValue);
2019-05-17 20:21:07 +02:00
}
2020-09-30 02:04:47 +02:00
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
const KEYCODE_ENTER = 13;
if ((e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
2020-09-30 02:04:47 +02:00
e.preventDefault();
buttonref.current.click();
}
}
function onTextareaFocus() {
window.addEventListener('keydown', altEnterListener);
}
function onTextareaBlur() {
window.removeEventListener('keydown', altEnterListener);
}
2019-06-12 16:53:27 +02:00
function handleSubmit() {
if (activeChannelClaim && commentValue.length) {
const timeUntilCanComment = !lastCommentTime
? 0
: (lastCommentTime - Date.now()) / 1000 + COMMENT_SLOW_MODE_SECONDS;
if (livestream && !claimIsMine && timeUntilCanComment > 0) {
toast(__('Slowmode is on. You can comment again in %time% seconds.', { time: Math.ceil(timeUntilCanComment) }));
return;
}
2021-04-23 21:59:48 +02:00
handleCreateComment();
}
}
function handleSupportComment() {
if (!activeChannelClaim) {
return;
}
if (commentFailure && tipAmount === successTip.tipAmount) {
handleCreateComment(successTip.txid);
return;
} else {
setSuccessTip({ txid: undefined, tipAmount: undefined });
}
2021-04-23 21:59:48 +02:00
const params = {
amount: tipAmount,
claim_id: claimId,
channel_id: activeChannelClaim.claim_id,
};
setIsSubmitting(true);
sendTip(
params,
(response) => {
const { txid } = response;
setTimeout(() => {
handleCreateComment(txid);
}, 1500);
setSuccessTip({ txid, tipAmount });
2021-04-23 21:59:48 +02:00
},
() => {
setIsSubmitting(false);
}
);
}
function handleCreateComment(txid) {
setIsSubmitting(true);
createComment(commentValue, claimId, parentId, txid)
.then((res) => {
setIsSubmitting(false);
2020-09-30 02:11:48 +02:00
if (res && res.signature) {
setCommentValue('');
setLastCommentTime(Date.now());
2021-04-23 21:59:48 +02:00
setIsReviewingSupportComment(false);
setIsSupportComment(false);
setCommentFailure(false);
justCommented.push(res.comment_id);
2020-10-07 21:14:52 +02:00
2020-09-30 02:11:48 +02:00
if (onDoneReplying) {
onDoneReplying();
}
}
2021-04-23 21:59:48 +02:00
})
.catch(() => {
setIsSubmitting(false);
setCommentFailure(true);
2020-09-30 02:11:48 +02:00
});
2019-05-17 20:21:07 +02:00
}
function toggleEditorMode() {
setAdvancedEditor(!advancedEditor);
}
if (commentsDisabledBySettings) {
return <Empty padded text={__('This channel has disabled comments on their page.')} />;
}
2020-08-25 21:54:06 +02:00
if (!hasChannels) {
return (
<div
role="button"
onClick={() => {
const pathPlusRedirect = `/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`;
if (livestream) {
window.open(pathPlusRedirect);
} else {
push(pathPlusRedirect);
}
}}
>
<FormField
type="textarea"
name={'comment_signup_prompt'}
placeholder={__('Say something about this...')}
label={isFetchingChannels ? __('Comment') : undefined}
/>
2021-04-23 21:59:48 +02:00
<div className="section__actions--no-margin">
<Button disabled button="primary" label={__('Post --[button to submit something]--')} requiresAuth={IS_WEB} />
</div>
2020-08-25 21:54:06 +02:00
</div>
);
}
2021-04-23 21:59:48 +02:00
if (isReviewingSupportComment && activeChannelClaim) {
return (
<div className="comment__create">
<div className="comment__sc-preview">
<CreditAmount className="comment__scpreview-amount" amount={tipAmount} size={18} />
<ChannelThumbnail xsmall uri={activeChannelClaim.canonical_url} />
<div>
<UriIndicator uri={activeChannelClaim.name} link />
<div>{commentValue}</div>
</div>
</div>
<div className="section__actions--no-margin">
<Button
autoFocus
button="primary"
disabled={disabled}
label={isSubmitting ? __('Sending...') : (commentFailure && tipAmount === successTip.tipAmount) ? __('Re-submit') : __('Send')}
2021-04-23 21:59:48 +02:00
onClick={handleSupportComment}
/>
<Button button="link" label={__('Cancel')} onClick={() => setIsReviewingSupportComment(false)} />
</div>
</div>
);
}
2019-06-12 16:53:27 +02:00
return (
2020-08-24 19:35:21 +02:00
<Form
onSubmit={handleSubmit}
className={classnames('comment__create', {
'comment__create--reply': isReply,
'comment__create--nested-reply': isNested,
})}
>
2019-11-14 21:02:15 +01:00
<FormField
disabled={!activeChannelClaim}
type={SIMPLE_SITE ? 'textarea' : advancedEditor && !isReply ? 'markdown' : 'textarea'}
name={isReply ? 'content_reply' : 'content_description'}
2020-08-24 19:35:21 +02:00
label={
<span className="comment-new__label-wrapper">
2021-04-23 21:59:48 +02:00
{!livestream && (
<div className="comment-new__label">{isReply ? __('Replying as') + ' ' : __('Comment as') + ' '}</div>
)}
<SelectChannel tiny />
2020-08-24 19:35:21 +02:00
</span>
}
quickActionLabel={
!SIMPLE_SITE && (isReply ? undefined : advancedEditor ? __('Simple Editor') : __('Advanced Editor'))
}
2020-08-24 19:35:21 +02:00
quickActionHandler={!SIMPLE_SITE && toggleEditorMode}
2020-09-30 02:04:47 +02:00
onFocus={onTextareaFocus}
onBlur={onTextareaBlur}
2019-11-14 21:02:15 +01:00
placeholder={__('Say something about this...')}
value={commentValue}
charCount={charCount}
onChange={handleCommentChange}
2020-03-20 20:21:39 +01:00
autoFocus={isReply}
2021-04-23 21:59:48 +02:00
textAreaMaxLength={livestream ? FF_MAX_CHARS_IN_LIVESTREAM_COMMENT : FF_MAX_CHARS_IN_COMMENT}
2019-11-14 21:02:15 +01:00
/>
2021-04-23 21:59:48 +02:00
{isSupportComment && <WalletTipAmountSelector amount={tipAmount} onChange={(amount) => setTipAmount(amount)} />}
<div className="section__actions section__actions--no-margin">
{isSupportComment ? (
<>
<Button
2021-04-23 21:59:48 +02:00
disabled={disabled}
type="button"
2021-04-23 21:59:48 +02:00
button="primary"
icon={ICONS.LBC}
label={__('Review')}
onClick={() => setIsReviewingSupportComment(true)}
/>
2021-04-23 21:59:48 +02:00
<Button disabled={disabled} button="link" label={__('Cancel')} onClick={() => setIsSupportComment(false)} />
</>
) : (
<>
<Button
ref={buttonref}
button="primary"
disabled={disabled}
type="submit"
label={
isReply
? isSubmitting
? __('Replying...')
: __('Reply')
: isSubmitting
? __('Commenting...')
: __('Comment --[button to submit something]--')
2020-03-20 20:09:45 +01:00
}
2021-04-23 21:59:48 +02:00
requiresAuth={IS_WEB}
/>
{!claimIsMine && (
<Button disabled={disabled} button="alt" icon={ICONS.LBC} onClick={() => setIsSupportComment(true)} />
)}
{isReply && (
<Button
button="link"
label={__('Cancel')}
onClick={() => {
if (onCancelReplying) {
onCancelReplying();
}
}}
/>
)}
</>
2020-03-20 20:09:45 +01:00
)}
</div>
2019-11-14 21:02:15 +01:00
</Form>
2019-06-12 16:53:27 +02:00
);
2019-05-17 20:21:07 +02:00
}