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