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

457 lines
14 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';
2021-07-17 18:19:44 +02:00
import { SIMPLE_SITE, STRIPE_PUBLIC_KEY } 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';
import { Lbryio } from 'lbryinc';
let stripeEnvironment = 'test';
// if the key contains pk_live it's a live key
// update the environment for the calls to the backend to indicate which environment to hit
if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
stripeEnvironment = 'live';
}
const TAB_FIAT = 'TabFiat';
const TAB_LBC = 'TabLBC';
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,
createComment: (string, string, 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,
doToast: ({ message: string }) => void,
disabled: boolean,
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,
claimIsMine,
2021-04-23 21:59:48 +02:00
sendTip,
doToast,
} = 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 [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 charCount = commentValue.length;
const [activeTab, setActiveTab] = React.useState('');
const [tipError, setTipError] = React.useState();
const disabled = isSubmitting || !activeChannelClaim || !commentValue.length;
const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
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) {
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,
};
const activeChannelName = activeChannelClaim && activeChannelClaim.name;
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
console.log(activeChannelClaim);
2021-04-23 21:59:48 +02:00
setIsSubmitting(true);
if (activeTab === TAB_LBC) {
// call sendTip and then run the callback from the response
// second parameter is callback
sendTip(
params,
(response) => {
const { txid } = response;
// todo: why the setTimeout?
setTimeout(() => {
handleCreateComment(txid);
}, 1500);
setSuccessTip({ txid, tipAmount });
},
() => {
// reset the frontend so people can send a new comment
setIsSubmitting(false);
}
);
} else {
// setup variables for tip API
let channelClaimId, tipChannelName;
// if there is a signing channel it's on a file
if (claim.signing_channel) {
channelClaimId = claim.signing_channel.claim_id;
tipChannelName = claim.signing_channel.name;
// otherwise it's on the channel page
} else {
channelClaimId = claim.claim_id;
tipChannelName = claim.name;
2021-04-23 21:59:48 +02:00
}
const sourceClaimId = claim.claim_id;
var roundedAmount = Math.round(tipAmount * 100) / 100;
Lbryio.call(
'customer',
'tip',
{
amount: 100 * roundedAmount, // convert from dollars to cents
creator_channel_name: tipChannelName, // creator_channel_name
creator_channel_claim_id: channelClaimId,
tipper_channel_name: activeChannelName,
tipper_channel_claim_id: activeChannelId,
currency: 'USD',
anonymous: false,
source_claim_id: sourceClaimId,
environment: stripeEnvironment,
},
'post'
)
.then((customerTipResponse) => {
console.log(customerTipResponse);
const paymentIntendId = customerTipResponse.payment_intent_id;
handleCreateComment(null, paymentIntendId, stripeEnvironment);
setCommentValue('');
setIsReviewingSupportComment(false);
setIsSupportComment(false);
setCommentFailure(false);
setIsSubmitting(false);
doToast({
message: __("You sent $%formattedAmount% as a tip to %tipChannelName%, I'm sure they appreciate it!", {
formattedAmount: roundedAmount.toFixed(2), // force show decimal places
tipChannelName,
}),
});
// handleCreateComment(null);
})
2021-07-17 18:19:44 +02:00
.catch(function (error) {
var displayError = 'Sorry, there was an error in processing your payment!';
if (error.message !== 'payment intent failed to confirm') {
displayError = error.message;
}
doToast({ message: displayError, isError: true });
});
}
2021-04-23 21:59:48 +02:00
}
/**
*
* @param {string} [txid] Optional transaction id generated by
* @param {string} [payment_intent_id] Optional payment_intent_id from Stripe payment
* @param {string} [environment] Optional environment for Stripe (test|live)
*/
function handleCreateComment(txid, payment_intent_id, environment) {
2021-04-23 21:59:48 +02:00
setIsSubmitting(true);
createComment(commentValue, claimId, parentId, txid, payment_intent_id, environment)
2021-04-23 21:59:48 +02:00
.then((res) => {
setIsSubmitting(false);
2020-09-30 02:11:48 +02:00
if (res && res.signature) {
setCommentValue('');
2021-04-23 21:59:48 +02:00
setIsReviewingSupportComment(false);
setIsSupportComment(false);
setCommentFailure(false);
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((e) => {
2021-04-23 21:59:48 +02:00
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">
2021-07-17 18:19:44 +02:00
<CreditAmount
className="comment__scpreview-amount"
isFiat={activeTab === TAB_FIAT}
amount={tipAmount}
size={activeTab === TAB_LBC ? 18 : 2}
/>
2021-04-23 21:59:48 +02:00
<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-07-17 18:19:44 +02:00
{isSupportComment && (
<WalletTipAmountSelector
onTipErrorChange={setTipError}
shouldDisableReviewButton={setShouldDisableReviewButton}
2021-07-17 18:19:44 +02:00
claim={claim}
activeTab={activeTab}
amount={tipAmount}
onChange={(amount) => setTipAmount(amount)}
/>
)}
2021-04-23 21:59:48 +02:00
<div className="section__actions section__actions--no-margin">
{isSupportComment ? (
<>
<Button
disabled={disabled || tipError || shouldDisableReviewButton}
type="button"
2021-04-23 21:59:48 +02:00
button="primary"
icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
2021-04-23 21:59:48 +02:00
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 && (
2021-07-17 18:19:44 +02:00
<Button
disabled={disabled}
button="alt"
className="thatButton"
icon={ICONS.LBC}
onClick={() => {
setIsSupportComment(true);
setActiveTab(TAB_LBC);
}}
/>
)}
{!claimIsMine && (
2021-07-17 18:19:44 +02:00
<Button
disabled={disabled}
button="alt"
className="thisButton"
icon={ICONS.FINANCE}
onClick={() => {
setIsSupportComment(true);
setActiveTab(TAB_FIAT);
}}
/>
2021-04-23 21:59:48 +02:00
)}
{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
}