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

140 lines
4.4 KiB
React
Raw Normal View History

2019-05-17 20:21:07 +02:00
// @flow
2019-06-27 01:59:27 +02:00
import { CHANNEL_NEW } from 'constants/claim';
import React, { useEffect, useState } 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 ChannelSelection from 'component/selectChannel';
2019-09-27 20:56:15 +02:00
import usePersistedState from 'effects/use-persisted-state';
2019-11-14 21:02:15 +01:00
import * as MODALS from 'constants/modal_types';
import I18nMessage from 'component/i18nMessage';
2019-05-17 20:21:07 +02:00
type Props = {
2019-11-14 21:02:15 +01:00
commentingEnabled: boolean,
2019-05-21 02:47:23 +02:00
uri: string,
2019-06-12 16:53:27 +02:00
claim: StreamClaim,
2019-11-14 21:02:15 +01:00
openModal: (id: string, { onCommentAcknowledge: () => void }) => void,
2020-03-20 20:09:45 +01:00
createComment: (string, string, string, ?string) => void,
channels: ?Array<ChannelClaim>,
2020-03-20 20:09:45 +01:00
parentId?: string,
onDoneReplying?: () => void,
onCancelReplying?: () => void,
2019-05-17 20:21:07 +02:00
};
2019-06-12 16:53:27 +02:00
export function CommentCreate(props: Props) {
2020-03-20 20:09:45 +01:00
const {
commentingEnabled,
createComment,
claim,
openModal,
channels,
parentId,
onDoneReplying,
onCancelReplying,
} = props;
2019-06-12 16:53:27 +02:00
const { claim_id: claimId } = claim;
2020-03-20 20:09:45 +01:00
const isReply = !!parentId;
const [commentValue, setCommentValue] = React.useState('');
2019-06-27 01:59:27 +02:00
const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
2020-02-18 23:48:10 +01:00
const [channel, setChannel] = usePersistedState('comment-channel', '');
const [charCount, setCharCount] = useState(commentValue.length);
const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
2019-05-17 20:21:07 +02:00
const topChannel =
channels &&
channels.reduce((top, channel) => {
const topClaimCount = (top && top.meta && top.meta.claims_in_channel) || 0;
const currentClaimCount = (channel && channel.meta && channel.meta.claims_in_channel) || 0;
return topClaimCount >= currentClaimCount ? top : channel;
});
useEffect(() => {
// set default channel
if ((channel === '' || channel === 'anonymous') && topChannel) {
handleChannelChange(topChannel.name);
}
}, [channel, topChannel]);
2019-06-12 16:53:27 +02:00
function handleCommentChange(event) {
setCommentValue(advancedEditor ? event : event.target.value);
2019-05-17 20:21:07 +02:00
}
2019-06-12 16:53:27 +02:00
function handleChannelChange(channel) {
setChannel(channel);
2019-05-21 02:47:23 +02:00
}
2019-11-14 21:02:15 +01:00
function handleCommentAck() {
2019-06-25 05:27:18 +02:00
setCommentAck(true);
2019-06-12 16:53:27 +02:00
}
2019-07-17 22:49:06 +02:00
2019-11-14 21:02:15 +01:00
function onTextareaFocus() {
if (!commentAck) {
openModal(MODALS.COMMENT_ACKNOWEDGEMENT, { onCommentAcknowledge: handleCommentAck });
}
}
2019-06-12 16:53:27 +02:00
function handleSubmit() {
2020-03-20 20:09:45 +01:00
if (channel !== CHANNEL_NEW && commentValue.length) {
createComment(commentValue, claimId, channel, parentId);
}
2019-06-12 16:53:27 +02:00
setCommentValue('');
2020-03-20 20:09:45 +01:00
if (onDoneReplying) {
onDoneReplying();
}
2019-05-17 20:21:07 +02:00
}
function toggleEditorMode() {
setAdvancedEditor(!advancedEditor);
}
useEffect(() => setCharCount(commentValue.length), [commentValue]);
2019-11-14 21:02:15 +01:00
if (!commentingEnabled) {
return (
<I18nMessage tokens={{ sign_in_link: <Button button="link" requiresAuth label={__('sign in')} /> }}>
Please %sign_in_link% to comment.
</I18nMessage>
);
}
2019-06-12 16:53:27 +02:00
return (
2020-03-20 20:09:45 +01:00
<Form onSubmit={handleSubmit} className={classnames('comment__create', { 'comment__create--reply': isReply })}>
{!isReply && <ChannelSelection channel={channel} hideAnon onChannelChange={handleChannelChange} />}
2019-11-14 21:02:15 +01:00
<FormField
disabled={channel === CHANNEL_NEW}
type={advancedEditor && !isReply ? 'markdown' : 'textarea'}
name={isReply ? 'content_reply' : 'content_description'}
label={isReply ? __('Replying as %reply_channel%', { reply_channel: channel }) : __('Comment')}
quickActionLabel={isReply ? undefined : advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
quickActionHandler={isReply ? toggleEditorMode : undefined}
2019-11-14 21:02:15 +01:00
onFocus={onTextareaFocus}
placeholder={__('Say something about this...')}
value={commentValue}
charCount={charCount}
onChange={handleCommentChange}
2020-03-20 20:21:39 +01:00
autoFocus={isReply}
2019-11-14 21:02:15 +01:00
/>
<div className="section__actions">
<Button
button="primary"
disabled={channel === CHANNEL_NEW || !commentValue.length}
type="submit"
2020-03-20 20:09:45 +01:00
label={isReply ? __('Reply') : __('Post')}
requiresAuth={IS_WEB}
/>
2020-03-20 20:09:45 +01:00
{isReply && (
<Button
button="link"
label={__('Cancel')}
onClick={() => {
if (onCancelReplying) {
onCancelReplying();
}
}}
/>
)}
</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
}