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

// @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,
  uri: string,
  claim: StreamClaim,
  openModal: (id: string, { onCommentAcknowledge: () => void }) => void,
  createComment: (string, string, string) => void,
};

export function CommentCreate(props: Props) {
  const { commentingEnabled, createComment, claim, openModal } = 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) createComment(commentValue, claimId, channel);
    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 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}
      />
      <Button
        button="primary"
        disabled={channel === CHANNEL_NEW || !commentValue.length}
        type="submit"
        label={__('Post')}
        requiresAuth={IS_WEB}
      />
    </Form>
  );
}