META-INF.resources.js.components.Answer.es.js Maven / Gradle / Ivy
/**
* SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
* SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
*/
import ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon';
import ClayLabel from '@clayui/label';
import classnames from 'classnames';
import {useMutation} from 'graphql-hooks';
import React, {useCallback, useContext, useEffect, useState} from 'react';
import {withRouter} from 'react-router-dom';
import {AppContext} from '../AppContext.es';
import FlagsContainer from '../pages/questions/components/FlagsContainer';
import {
deleteMessageQuery,
markAsAnswerMessageBoardMessageQuery,
unMarkAsAnswerMessageBoardMessageQuery,
} from '../utils/client.es';
import ArticleBodyRenderer from './ArticleBodyRenderer.es';
import Comments from './Comments.es';
import EditedTimestamp from './EditedTimestamp.es';
import Link from './Link.es';
import Modal from './Modal.es';
import Rating from './Rating.es';
import UserRow from './UserRow.es';
export default withRouter(
({
answer,
answerChange,
canMarkAsAnswer,
deleteAnswer,
display,
editable = true,
match: {url},
onSubscription,
question,
showItems = true,
showSignature,
styledItems = false,
}) => {
const context = useContext(AppContext);
const [comments, setComments] = useState(
answer.messageBoardMessages.items
);
const [showAsAnswer, setShowAsAnswer] = useState(answer.showAsAnswer);
const [showNewComment, setShowNewComment] = useState(false);
const [showDeleteAnswerModal, setShowDeleteAnswerModal] =
useState(false);
const [deleteMessage] = useMutation(deleteMessageQuery);
const _commentsChange = useCallback((comments) => {
setComments([...comments]);
}, []);
const [markAsAnswerMessageBoardMessage] = useMutation(
markAsAnswerMessageBoardMessageQuery
);
const [unMarkAsAnswerMessageBoardMessage] = useMutation(
unMarkAsAnswerMessageBoardMessageQuery
);
const markAsAnswerFunction = showAsAnswer
? unMarkAsAnswerMessageBoardMessage
: markAsAnswerMessageBoardMessage;
useEffect(() => {
setShowAsAnswer(answer.showAsAnswer);
}, [answer.showAsAnswer]);
return (
<>
{showItems && (
{Liferay.Language.get(
'chosen-answer'
)}
)}
{answer.status}
)}
setShowNewComment(
true
)
}
>
{Liferay.Language.get(
'add-comment'
)}
)}
{answer.actions.delete && (
<>
{
setShowDeleteAnswerModal(
true
);
}}
>
{Liferay.Language.get(
'delete'
)}
{
deleteMessage({
variables: {
messageBoardMessageId:
answer.id,
},
}).then(() => {
if (
comments.length
) {
Promise.all(
comments.map(
({
id,
}) =>
deleteMessage(
{
variables:
{
messageBoardMessageId:
id,
},
}
)
)
).then(
() => {
deleteAnswer(
answer
);
}
);
}
else {
deleteAnswer(
answer
);
}
});
}}
onClose={() => {
setShowDeleteAnswerModal(
false
);
}}
status="warning"
textPrimaryButton={Liferay.Language.get(
'delete'
)}
title={Liferay.Language.get(
'delete-answer'
)}
visible={
showDeleteAnswerModal
}
/>
)}
{canMarkAsAnswer && (
{
markAsAnswerFunction({
variables: {
messageBoardMessageId:
answer.id,
},
}).then(() => {
setShowAsAnswer(
!showAsAnswer
);
if (answerChange) {
answerChange(
answer.id
);
}
});
}}
>
{showAsAnswer
? Liferay.Language.get(
'unmark-as-answer'
)
: Liferay.Language.get(
'mark-as-answer'
)}
)}
{display?.flags && (
{Liferay.Language.get(
'edit'
)}
)}
)}
{showItems && (
setShowNewComment(value)
}
showSignature={showSignature}
styledItems={styledItems}
/>
{editable && !!comments.length && !showNewComment && (
{answer.actions['reply-to-message'] &&
answer.status !== 'pending' && (
setShowNewComment(true)}
>
{Liferay.Language.get('add-comment')}
)}
)}
);
}
);