Merge pull request #178 from grant-project/comment-placeholder
Show disabled comment form to unverified users
This commit is contained in:
commit
af5c7ed630
|
@ -33,6 +33,7 @@ const commands: { [key in MARKDOWN_TYPE]: ReactMdeProps['commands'] } = {
|
|||
};
|
||||
|
||||
interface Props {
|
||||
readOnly?: boolean | null;
|
||||
type?: MARKDOWN_TYPE;
|
||||
initialMarkdown?: string;
|
||||
onChange(markdown: string): void;
|
||||
|
@ -62,6 +63,7 @@ export default class MarkdownEditor extends React.PureComponent<Props, State> {
|
|||
|
||||
render() {
|
||||
const type = this.props.type || MARKDOWN_TYPE.FULL;
|
||||
const { readOnly } = this.props;
|
||||
const { mdeState, randomKey } = this.state;
|
||||
return (
|
||||
<div
|
||||
|
@ -76,6 +78,7 @@ export default class MarkdownEditor extends React.PureComponent<Props, State> {
|
|||
editorState={mdeState as ReactMdeTypes.MdeState}
|
||||
generateMarkdownPreview={this.generatePreview}
|
||||
commands={commands[type]}
|
||||
readOnly={!!readOnly}
|
||||
layout="tabbed"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -9,7 +9,7 @@ import {
|
|||
getIsFetchingComments,
|
||||
getProposalComments,
|
||||
} from 'modules/proposals/selectors';
|
||||
import { getIsVerified } from 'modules/auth/selectors';
|
||||
import { getIsVerified, getIsSignedIn } from 'modules/auth/selectors';
|
||||
import Comments from 'components/Comments';
|
||||
import Placeholder from 'components/Placeholder';
|
||||
import Loader from 'components/Loader';
|
||||
|
@ -27,6 +27,7 @@ interface StateProps {
|
|||
isPostCommentPending: AppState['proposal']['isPostCommentPending'];
|
||||
postCommentError: AppState['proposal']['postCommentError'];
|
||||
isVerified: ReturnType<typeof getIsVerified>;
|
||||
isSignedIn: ReturnType<typeof getIsSignedIn>;
|
||||
}
|
||||
|
||||
interface DispatchProps {
|
||||
|
@ -79,6 +80,7 @@ class ProposalComments extends React.Component<Props, State> {
|
|||
commentsError,
|
||||
isPostCommentPending,
|
||||
isVerified,
|
||||
isSignedIn,
|
||||
} = this.props;
|
||||
const { comment } = this.state;
|
||||
let content = null;
|
||||
|
@ -108,7 +110,7 @@ class ProposalComments extends React.Component<Props, State> {
|
|||
return (
|
||||
<div>
|
||||
<div className="ProposalComments-post">
|
||||
{isVerified ? (
|
||||
{isVerified && (
|
||||
<>
|
||||
<MarkdownEditor
|
||||
ref={el => (this.editor = el)}
|
||||
|
@ -124,11 +126,19 @@ class ProposalComments extends React.Component<Props, State> {
|
|||
Submit comment
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Placeholder
|
||||
title="Your email is not verified"
|
||||
subtitle="Please verify your email to post a comment."
|
||||
)}
|
||||
{isSignedIn &&
|
||||
!isVerified && (
|
||||
<>
|
||||
<h4 className="ProposalComments-verify">
|
||||
Please verify your email to post a comment.
|
||||
</h4>
|
||||
<MarkdownEditor
|
||||
onChange={this.handleCommentChange}
|
||||
type={MARKDOWN_TYPE.REDUCED}
|
||||
readOnly={true}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{content}
|
||||
|
@ -153,6 +163,7 @@ export default connect<StateProps, DispatchProps, OwnProps, AppState>(
|
|||
isPostCommentPending: state.proposal.isPostCommentPending,
|
||||
postCommentError: state.proposal.postCommentError,
|
||||
isVerified: getIsVerified(state),
|
||||
isSignedIn: getIsSignedIn(state),
|
||||
}),
|
||||
{
|
||||
fetchProposalComments,
|
||||
|
|
|
@ -3,4 +3,9 @@
|
|||
margin-bottom: 2rem;
|
||||
max-width: 780px;
|
||||
}
|
||||
&-verify {
|
||||
font-size: 1rem;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue