Clarify rendering logic

This commit is contained in:
Ian Philips 2022-05-03 16:36:18 -04:00
parent d57eecb0c0
commit 72a996a230

View File

@ -313,25 +313,44 @@ export function CommentInput(props: {
</div> </div>
)} )}
</div> </div>
{!user && (
<button <button
className={'btn btn-outline btn-sm text-transform: mt-1 capitalize'} className={
'btn btn-outline btn-sm text-transform: mt-1 capitalize'
}
onClick={() => submitComment(id)}
>
Sign in to Comment
</button>
)}
{user && answerOutcome === undefined && (
<button
className={
'btn btn-outline btn-sm text-transform: mt-1 capitalize'
}
onClick={() => submitComment(id)}
>
Comment
</button>
)}
{user && answerOutcome !== undefined && (
<button
className={
focused
? 'btn btn-outline btn-sm text-transform: mt-1 capitalize'
: 'btn btn-ghost btn-sm text-transform: mt-1 capitalize'
}
onClick={() => { onClick={() => {
if (answerOutcome === undefined) { if (!focused) setFocused(true)
submitComment(id) else {
} else if (!focused) {
setFocused(true)
} else {
submitComment(id) submitComment(id)
setFocused(false) setFocused(false)
} }
}} }}
> >
{user {!focused ? 'Add Comment' : 'Comment'}
? !focused && answerOutcome !== undefined
? 'Add Comment'
: 'Comment'
: 'Sign in to comment'}
</button> </button>
)}
</div> </div>
</Row> </Row>
</> </>