97 lines
3.2 KiB
JavaScript
97 lines
3.2 KiB
JavaScript
// @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';
|
|
|
|
type Props = {
|
|
uri: string,
|
|
claim: StreamClaim,
|
|
createComment: (string, string, string) => void,
|
|
};
|
|
|
|
export function CommentCreate(props: Props) {
|
|
const { createComment, claim } = 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(event) {
|
|
setCommentAck(true);
|
|
}
|
|
|
|
function handleSubmit() {
|
|
if (channel !== CHANNEL_NEW && commentValue.length) createComment(commentValue, claimId, channel);
|
|
setCommentValue('');
|
|
}
|
|
|
|
useEffect(() => setCharCount(commentValue.length), [commentValue]);
|
|
|
|
return (
|
|
<section>
|
|
{commentAck !== true && (
|
|
<div>
|
|
<p>{__('A few things to know before participating in the comment alpha:')}</p>
|
|
<ul>
|
|
<li>
|
|
{__('During the alpha, all comments are sent to a LBRY, Inc. server, not the LBRY network itself.')}
|
|
</li>
|
|
<li>
|
|
{__(
|
|
'During the alpha, comments are not decentralized or censorship resistant (but we repeat ourselves).'
|
|
)}
|
|
</li>
|
|
<li>
|
|
{__(
|
|
'For the initial release, deleting or editing comments is not possible. Please be mindful of this when posting.'
|
|
)}
|
|
</li>
|
|
<li>
|
|
{__(
|
|
'When the alpha ends, we will attempt to transition comments, but do not promise to do so. Any transition will likely involve publishing previous comments under a single archive handle.'
|
|
)}
|
|
</li>
|
|
</ul>
|
|
<Button button="primary" onClick={handleCommentAck} label={__('Got it!')} />
|
|
</div>
|
|
)}
|
|
{commentAck === true && (
|
|
<Form onSubmit={handleSubmit}>
|
|
<ChannelSection channel={channel} onChannelChange={handleChannelChange} />
|
|
<FormField
|
|
disabled={channel === CHANNEL_NEW}
|
|
type="textarea"
|
|
name="content_description"
|
|
label={__('Comment')}
|
|
placeholder={__('Your comment')}
|
|
value={commentValue}
|
|
charCount={charCount}
|
|
onChange={handleCommentChange}
|
|
/>
|
|
<div className="card__actions">
|
|
<Button
|
|
button="primary"
|
|
disabled={channel === CHANNEL_NEW || !commentValue.length}
|
|
type="submit"
|
|
label={__('Post')}
|
|
requiresAuth={IS_WEB}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|