62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { gql } from "@apollo/client";
|
|
import React, { FC } from "react";
|
|
import { Controller } from "react-hook-form";
|
|
|
|
import { Card } from "../../../../components/Card/Card";
|
|
import { TextEditor } from "../components/TextEditor";
|
|
import { useFormProvider } from '../FormContext'
|
|
|
|
export const AnswerFragment = gql`
|
|
fragment AnswerFields on Question {
|
|
alternatives {
|
|
correct
|
|
text
|
|
}
|
|
explanation
|
|
references
|
|
}
|
|
`
|
|
|
|
export const AnswerFormStep: FC = () => {
|
|
const { question, hooks: { control } } = useFormProvider()
|
|
|
|
const alternativesMaped = question?.alternatives || [
|
|
{ text: "", correct: true },
|
|
];
|
|
|
|
const correctAlternative = alternativesMaped.find(
|
|
(alternative) => alternative.correct === true,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Card title="Resposta Correta" className="mb-3">
|
|
<div className="flex flex-col">
|
|
<div className="w-full">
|
|
<TextEditor
|
|
name={`alternatives[0].text`}
|
|
defaultValue={correctAlternative?.text ?? ''}
|
|
/>
|
|
<Controller
|
|
name={`alternatives[0].correct`}
|
|
control={control}
|
|
defaultValue={true}
|
|
render={() => (<></>)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col w-full border border-gray-300 rounded p-4 mt-4 shadow-sm">
|
|
<div>
|
|
<h2 className="text-xl font-medium">Explicação</h2>
|
|
<TextEditor name="explanation" defaultValue={question?.explanation ?? ''} />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-medium">Referências</h2>
|
|
<TextEditor defaultValue={question?.references ?? ''} name="references" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</>
|
|
);
|
|
};
|