move move frontend to progress-test

app/javascript/pages/question/shared/ReviewMessages/ReviewMessages.tsx

@@ -0,0 +1,77 @@
+import { ApolloQueryResult, gql, OperationVariables } from "@apollo/client";
+import {
+  CheckCircleIcon,
+  DocumentRemoveIcon
+} from '@heroicons/react/outline';
+import React, { FC } from "react";
+import { Card } from "../../../../components";
+import { Query, Question, ReviewMessage, ReviewMessageFeedbackType } from "../../../../__generated__/graphql-schema";
+import { ReviewMessageForm, ReviewMessageFormFragments } from "./ReviewMessagesForm";
+
+
+const feedbackIcon = {
+  [ReviewMessageFeedbackType.Answer]: null,
+  [ReviewMessageFeedbackType.Approve]: <CheckCircleIcon className="w-5 text-green-800" />,
+  [ReviewMessageFeedbackType.RequestChanges]: <DocumentRemoveIcon className="w-5 text-red-800" />,
+};
+
+const ReviewMessageTitle: FC<{
+  feedback: ReviewMessage
+}> = ({ feedback }) => (
+  <p className="flex">
+    {feedback.user.name}{' '} - {' '}
+    <span className="text-gray-700 pr-2">
+      {new Date(feedback.createdAt).toLocaleString()}
+    </span>
+    {feedbackIcon[feedback.feedbackType]}
+  </p>
+)
+
+export const ReviewMessagesFragments = gql`
+  ${ReviewMessageFormFragments}
+  fragment ReviewMessages_question on Question {
+    id
+    ...ReviewMessageForm_question
+    user {
+      id
+    }
+    reviewMessages {
+      nodes {
+        id
+        feedbackType
+        text
+        user {
+          name
+          avatarUrl
+        }
+        createdAt
+      }
+    }
+  }
+`
+
+export const ReviewMessages: FC<{
+  question: Question
+  refetch: (variables?: Partial<OperationVariables> | undefined) => Promise<ApolloQueryResult<Query>>
+}> = ({ question, refetch }) => {
+  const reviewMessages = question.reviewMessages.nodes
+  const hasFeebacks = !!reviewMessages.length
+
+  return (
+    <div>
+      <Card className="mb-3" title="Histórico de Pareceres">
+        {hasFeebacks
+          ? reviewMessages.map((item) => (
+            <div key={item.id}>
+              <ReviewMessageTitle feedback={item} />
+              <p className="p-2">
+                {item.text}
+              </p>
+            </div>
+          ))
+          : 'Essa questão não tem nenhum parecer ainda.'}
+      </Card>
+      <ReviewMessageForm question={question} refetch={refetch} />
+    </div>
+  )
+};

app/javascript/pages/question/shared/ReviewMessages/ReviewMessagesForm.tsx

@@ -0,0 +1,139 @@
+import { ApolloQueryResult, gql, OperationVariables, useMutation } from "@apollo/client";
+import React, { FC, useState } from "react";
+import { 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 [isChangesSaved, setIsChangesSaved] = useState(true)
+  const { register, handleSubmit } = 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 handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (e.target.value !== '') {
+      setIsChangesSaved(false)
+    } else {
+      setIsChangesSaved(true)
+    }
+  }
+
+  const handleSubmitClick = () => {
+    setIsChangesSaved(true)
+  }
+
+  const formSubmit = async (inputs: {
+    feedbackType: ReviewMessageFeedbackType
+    text: string
+  }) => {
+    await createReviewMessage({
+      variables: {
+        text: inputs.text,
+        feedbackType: questionIsFromCurrentUser ? ReviewMessageFeedbackType.Answer : inputs.feedbackType,
+        questionId: NodeId.decode(question.id).id,
+      },
+    });
+
+    await refetch()
+
+    history.push('/questions')
+  };
+
+  if (!hasFeebacks && questionIsFromCurrentUser) return null
+
+  return (
+    <>
+      <Prompt
+        when={!isChangesSaved}
+        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
+            onChange={(e) => handleTextChange(e)}
+            className="w-full h-32 p-2 border-solid border-2 border-gray-700 rounded-md"
+            ref={register}
+            name="text"
+          />
+          {!questionIsFromCurrentUser && REVIEW_FEEDBACK.map((item, index) => (
+            <div key={index} className="flex mb-2">
+              <input
+                type="radio"
+                id={item.value}
+                name="feedbackType"
+                ref={register({ 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" onClick={handleSubmitClick}>
+              {questionIsFromCurrentUser ? 'Responder Parecer' : 'Enviar Parecer'}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </>
+  )
+};

app/javascript/pages/question/shared/ReviewMessages/index.ts

@@ -0,0 +1 @@
+export * from './ReviewMessages'