From 8a4c797ff5eeb895ced991e1db0dbe933132f3b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= Date: Wed, 10 Aug 2022 23:23:37 +0000 Subject: [PATCH] fix feature form authorship option select --- app/javascript/pages/question/Form/Form.tsx | 226 +++++++++--------- .../FeaturesFromStep/FeaturesFormStep.tsx | 1 + .../pages/question/List/QuestionsQuery.tsx | 2 + 3 files changed, 122 insertions(+), 107 deletions(-) diff --git a/app/javascript/pages/question/Form/Form.tsx b/app/javascript/pages/question/Form/Form.tsx index 1d83ca1..3829c82 100644 --- a/app/javascript/pages/question/Form/Form.tsx +++ b/app/javascript/pages/question/Form/Form.tsx @@ -1,16 +1,20 @@ -import React, {FC, useState} from 'react' -import {FieldValue, FieldValues, useForm} from 'react-hook-form'; -import {ExclamationCircleIcon} from '@heroicons/react/outline'; -import {useHistory} from "react-router-dom"; -import {useDispatch, useSelector} from "react-redux"; -import {gql} from '@apollo/client'; +import React, { FC, useEffect, useState } from "react"; +import { FieldValue, FieldValues, useForm } from "react-hook-form"; +import { ExclamationCircleIcon } from "@heroicons/react/outline"; +import { useHistory } from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; +import { gql } from "@apollo/client"; -import {Question, QuestionCreateInput, QuestionStatus} from '../../../__generated__/graphql-schema'; -import {formatInput} from '../formatInputs'; -import {validateQuestionInputs} from '../../../utils/questions/questionValidations'; -import {RootState} from '../../../services/store'; -import {FormProvider} from './FormContext' -import {SteppedForm, Step} from './SteppedForm' +import { + Question, + QuestionCreateInput, + QuestionStatus, +} from "../../../__generated__/graphql-schema"; +import { formatInput } from "../formatInputs"; +import { validateQuestionInputs } from "../../../utils/questions/questionValidations"; +import { RootState } from "../../../services/store"; +import { FormProvider } from "./FormContext"; +import { SteppedForm, Step } from "./SteppedForm"; import { EnunciationFormStep, EnunciationFragment, @@ -20,7 +24,7 @@ import { DistractorsFragment, FeaturesFormStep, FeaturesFragment, -} from './steps' +} from "./steps"; import { Button, Dialog, @@ -28,113 +32,127 @@ import { AlertV2, List, ListItem, -} from '../../../components'; -import {QuestionRoutePaths} from "../../../routes"; -import {turnOff, turnOn} from "../../../services/store/unsavedChanges"; +} from "../../../components"; +import { QuestionRoutePaths } from "../../../routes"; +import { turnOff, turnOn } from "../../../services/store/unsavedChanges"; export const FormFragments = gql` - ${EnunciationFragment} - ${AnswerFragment} - ${DistractorsFragment} - ${FeaturesFragment} - fragment FormFields on Question { - ...EnunciationFields - ...AnswerFields - ...DistractorsFields - ...FeaturesFields - status - } -` + ${EnunciationFragment} + ${AnswerFragment} + ${DistractorsFragment} + ${FeaturesFragment} + fragment FormFields on Question { + ...EnunciationFields + ...AnswerFields + ...DistractorsFields + ...FeaturesFields + status + } +`; type Props = { - question?: Question - onSubmit?: (inputs: any) => void - onDraftSubmit?: (inputs: any) => void - alert?: AlertV2Props -} + question?: Question; + onSubmit?: (inputs: any) => void; + onDraftSubmit?: (inputs: any) => void; + alert?: AlertV2Props; +}; -export const Form: FC = ({question, onSubmit, onDraftSubmit, alert}) => { - const [validationErrors, setValidationErrors] = useState([]) - const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] = useState(false) - const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false) +export const Form: FC = ({ + question, + onSubmit, + onDraftSubmit, + alert, +}) => { + const [validationErrors, setValidationErrors] = useState([]); + const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] = + useState(false); + const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false); const formHooks = useForm({ defaultValues: { - authorship: question?.authorship ?? 'UNIFESO', - authorshipType: question?.authorship === 'UNIFESO' ? 'UNIFESO' : 'OTHER', + authorship: question?.authorship ?? "UNIFESO", + authorshipType: question?.authorship === "UNIFESO" ? "UNIFESO" : (question?.authorship ?? "OTHER"), authorshipYear: new Date().getFullYear().toString(), difficulty: question?.difficulty, checkType: question?.checkType, bloomTaxonomy: question?.bloomTaxonomy, intention: question?.intention, + }, + }); + const { getValues, reset, formState } = formHooks; + + const [currentStep, setCurrentStep] = useState(0); + const unsavedChanges = useSelector( + (state: RootState) => state.unsavedChanges + ); + const history = useHistory(); + const dispatch = useDispatch(); + + const minStep = 0; + const maxStep = 3; + const onFirstStep = currentStep === minStep; + const onLastStep = currentStep === maxStep; + + useEffect(() => { + if (formState.isDirty) { + dispatch(turnOn()); } - }) - const {register, control, setValue, getValues, reset, formState, resetField} = formHooks - - const [currentStep, setCurrentStep] = useState(0) - const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges) - const history = useHistory() - const dispatch = useDispatch() - - const minStep = 0 - const maxStep = 3 - const onFirstStep = currentStep === minStep - const onLastStep = currentStep === maxStep - - if (formState.isDirty) { - dispatch(turnOn()) - } +}, [formState.isDirty, dispatch, turnOn]); const handleNextStep = () => { - if (onLastStep) return + if (onLastStep) return; - setCurrentStep(currentStep + 1) - } + setCurrentStep(currentStep + 1); + }; const handlePreviousStep = () => { - if (onFirstStep) return + if (onFirstStep) return; - setCurrentStep(currentStep - 1) - } + setCurrentStep(currentStep - 1); + }; - const getFormattedInputValues = () => formatInput(getValues()) + const getFormattedInputValues = () => formatInput(getValues()); const handleCancel = () => { if (unsavedChanges && !leaveDialogIsOpen) { - setLeaveDialogIsOpen(true) + setLeaveDialogIsOpen(true); } else { - history.push(QuestionRoutePaths.index) + history.push(QuestionRoutePaths.index); } - } + }; const handleDraftSave = () => { if (onDraftSubmit) { - onDraftSubmit({...getFormattedInputValues(), status: QuestionStatus.Draft} as QuestionCreateInput) - reset(getValues()) - dispatch(turnOff()) + onDraftSubmit({ + ...getFormattedInputValues(), + status: QuestionStatus.Draft, + } as QuestionCreateInput); + reset(getValues()); + dispatch(turnOff()); } - } + }; const handleSave = () => { - const inputs = {...getFormattedInputValues(), status: QuestionStatus.WaitingReview} as QuestionCreateInput - const errors = validateQuestionInputs(inputs) + const inputs = { + ...getFormattedInputValues(), + status: QuestionStatus.WaitingReview, + } as QuestionCreateInput; + const errors = validateQuestionInputs(inputs); - setConfirmFinishDialogIsOpen(false) + setConfirmFinishDialogIsOpen(false); if (onSubmit && !errors.length) { - dispatch(turnOff()) - onSubmit(inputs) + dispatch(turnOff()); + onSubmit(inputs); } else { - setValidationErrors(errors) + setValidationErrors(errors); } - reset(getValues()) - } + reset(getValues()); + }; return ( - - {alert && ( - - )} + + {alert && } = ({question, onSubmit, onDraftSubmit, alert}) => { {validationErrors?.map((errorMessage) => ( } + icon={} text={errorMessage} /> ))} @@ -170,30 +188,23 @@ export const Form: FC = ({question, onSubmit, onDraftSubmit, alert}) => { } />
- + - + - + - + - + -
- - {(question?.status === QuestionStatus.Draft || question?.status === undefined) && - - } + + )} - {onLastStep && - - } + + )}
- ) -} \ No newline at end of file + ); +}; diff --git a/app/javascript/pages/question/Form/steps/FeaturesFromStep/FeaturesFormStep.tsx b/app/javascript/pages/question/Form/steps/FeaturesFromStep/FeaturesFormStep.tsx index 34fe8ef..8336b16 100644 --- a/app/javascript/pages/question/Form/steps/FeaturesFromStep/FeaturesFormStep.tsx +++ b/app/javascript/pages/question/Form/steps/FeaturesFromStep/FeaturesFormStep.tsx @@ -74,6 +74,7 @@ export const FeaturesFormStep: FC = () => { = ({ title, where, status }) => { }) } + console.log(pageInfo) + return (