128 lines
2.8 KiB
TypeScript
128 lines
2.8 KiB
TypeScript
import React, {FC, useState} from 'react'
|
|
import {useHistory, useParams} from 'react-router';
|
|
import {gql, useMutation, useQuery} from '@apollo/client';
|
|
|
|
import {Mutation, Query, Question} from '../../../__generated__/graphql-schema';
|
|
import {AlertV2Props, Navigator} from '../../../components';
|
|
import {Form, FormFragments} from '../Form'
|
|
import {NodeId} from '../../../utils/graphql';
|
|
import {QuestionRoutePaths} from "../../../routes";
|
|
|
|
const GET_QUESTION = gql`
|
|
${FormFragments}
|
|
query Question ($id: ID!) {
|
|
node (id: $id) {
|
|
__typename
|
|
...on Question {
|
|
id
|
|
...FormFields
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const UPDATE_QUESTION_MUTATOIN = gql`
|
|
mutation($input: UpdateQuestionInput!) {
|
|
updateQuestion(input: $input) {
|
|
question {
|
|
id
|
|
}
|
|
errors
|
|
}
|
|
}
|
|
`
|
|
|
|
export const Edit = () => {
|
|
const history = useHistory()
|
|
const [alert, setAlert] = useState<AlertV2Props>()
|
|
const params = useParams<{ id: string }>()
|
|
const [updateQuestion] = useMutation<Mutation>(UPDATE_QUESTION_MUTATOIN)
|
|
const {loading, data} = useQuery<Query>(
|
|
GET_QUESTION, {
|
|
variables: {
|
|
id: params.id,
|
|
fetchPolicy: "no-cache"
|
|
}
|
|
}
|
|
)
|
|
const question = data?.node as Question | null
|
|
|
|
if (loading || !question) return null
|
|
|
|
const recordId = NodeId.decode(question.id).id
|
|
|
|
const onSubmit = (inputs: any) => {
|
|
updateQuestion({
|
|
variables: {
|
|
input: {
|
|
question: {
|
|
...inputs,
|
|
id: recordId,
|
|
},
|
|
},
|
|
},
|
|
}).then(() => {
|
|
history.push(QuestionRoutePaths.index)
|
|
}).catch((error: string) => {
|
|
setAlert({
|
|
severity: "error",
|
|
text: `Erro ao atualizar questão. ${error}. Por favor, tente novamente.`,
|
|
});
|
|
|
|
setTimeout(
|
|
() => setAlert({severity: "error", text: ""}),
|
|
3000
|
|
);
|
|
})
|
|
}
|
|
|
|
const onDraftSubmit = (inputs: any) => {
|
|
updateQuestion({
|
|
variables: {
|
|
input: {
|
|
question: {
|
|
...inputs,
|
|
id: recordId,
|
|
},
|
|
},
|
|
}
|
|
}).then(() => {
|
|
setAlert({
|
|
severity: "success",
|
|
text: "Rascunho atualizado com sucesso",
|
|
});
|
|
|
|
setTimeout(() => {
|
|
setAlert(undefined)
|
|
}, 3000);
|
|
|
|
}).catch((error: string) => {
|
|
setAlert({
|
|
severity: "error",
|
|
text: `Erro ao atualizar rascunho. ${error}`,
|
|
});
|
|
|
|
setTimeout(
|
|
() => setAlert(undefined),
|
|
8000
|
|
);
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Navigator home/>
|
|
<div className="bg-gray-100 w-full my-2">
|
|
<main>
|
|
<Form
|
|
question={question}
|
|
onSubmit={onSubmit}
|
|
onDraftSubmit={onDraftSubmit}
|
|
alert={alert}
|
|
/>
|
|
</main>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|