127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
import { ApolloQueryResult, gql, OperationVariables, useMutation } from "@apollo/client";
|
|
import React, { FC, useState } from "react";
|
|
import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
|
|
import { Prompt, useHistory } from "react-router";
|
|
import { Button, Card } from "../../../../components";
|
|
import { useCurrentUser } from "../../../../contexts";
|
|
import { NodeId } from "../../../../utils/graphql";
|
|
import { Mutation, Query, Question, ReviewMessageFeedbackType } from "../../../../__generated__/graphql-schema";
|
|
|
|
export const REVIEW_FEEDBACK = [
|
|
{
|
|
label: "Aprovada",
|
|
description: "O revisor sugere que as observações enviadas no parecer sejam consideradas.",
|
|
value: ReviewMessageFeedbackType.Approve,
|
|
},
|
|
{
|
|
label: "Pendente de Alterações",
|
|
description: "O autor deve efetuar as alterações solicitadas no parecer e reenviar a questão ao revisor.",
|
|
value: ReviewMessageFeedbackType.RequestChanges,
|
|
},
|
|
];
|
|
|
|
export const ReviewMessageFormFragments = gql`
|
|
fragment ReviewMessageForm_question on Question {
|
|
id
|
|
status
|
|
user {
|
|
id
|
|
}
|
|
}
|
|
`
|
|
|
|
const CREATE_REVIEW_MESSAGE_MUTATION = gql`
|
|
mutation($questionId: ID!, $feedbackType: ReviewMessageFeedbackType!, $text: String!) {
|
|
createReviewMessage(
|
|
input: {
|
|
message: {
|
|
questionId: $questionId
|
|
feedbackType: $feedbackType
|
|
text: $text
|
|
}
|
|
}
|
|
) {
|
|
reviewMessage {
|
|
id
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export const ReviewMessageForm: FC<{
|
|
question: Question
|
|
refetch: (variables?: Partial<OperationVariables> | undefined) => Promise<ApolloQueryResult<Query>>
|
|
}> = ({ question, refetch }) => {
|
|
const { register, handleSubmit, formState: {
|
|
isDirty
|
|
} } = useForm()
|
|
const history = useHistory();
|
|
const { user } = useCurrentUser()
|
|
|
|
const [createReviewMessage] = useMutation<Mutation['createReviewMessage']>(CREATE_REVIEW_MESSAGE_MUTATION)
|
|
|
|
const hasFeebacks = !!question.reviewMessages.nodes.length
|
|
const questionIsFromCurrentUser = user?.id === question.user.id
|
|
|
|
const formSubmit: SubmitHandler<FieldValues> = async ({
|
|
feedbackType,
|
|
text
|
|
}) => {
|
|
await createReviewMessage({
|
|
variables: {
|
|
text: text,
|
|
feedbackType: questionIsFromCurrentUser ? ReviewMessageFeedbackType.Answer : feedbackType,
|
|
questionId: NodeId.decode(question.id).id,
|
|
},
|
|
});
|
|
|
|
await refetch()
|
|
|
|
history.push('/questions')
|
|
};
|
|
|
|
if (!hasFeebacks && questionIsFromCurrentUser) return null
|
|
|
|
return (
|
|
<>
|
|
<Prompt
|
|
when={!isDirty}
|
|
message='O parecer ainda não foi enviado, deseja continuar?'
|
|
/>
|
|
<Card title="Parecer" className="max-w-screen-md mx-auto">
|
|
<form onSubmit={handleSubmit(formSubmit)}>
|
|
<textarea
|
|
className="w-full h-32 p-2 border-solid border-2 border-gray-700 rounded-md"
|
|
{...register('text')}
|
|
name="text"
|
|
/>
|
|
{!questionIsFromCurrentUser && REVIEW_FEEDBACK.map((item, index) => (
|
|
<div key={index} className="flex mb-2">
|
|
<input
|
|
type="radio"
|
|
id={item.value}
|
|
{...register("feedbackType", { required: true })}
|
|
value={item.value}
|
|
className="my-auto"
|
|
defaultChecked={index === 0}
|
|
/>
|
|
<label
|
|
htmlFor={item.value}
|
|
className="flex flex-col pl-2 w-full"
|
|
>
|
|
{item.label}
|
|
<p className="text-gray-700 text-sm">{item.description}</p>
|
|
</label>
|
|
</div>
|
|
))}
|
|
<div className="justify-end flex">
|
|
<Button type="primary" htmlType="submit" className="mt-4">
|
|
{questionIsFromCurrentUser ? 'Responder Parecer' : 'Enviar Parecer'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
</>
|
|
)
|
|
};
|