fix feature form authorship options select

This commit is contained in:
João Geonizeli
2022-08-10 17:59:04 +00:00
parent d03b1c9183
commit f9fc5fc3a7
3 changed files with 19 additions and 21 deletions

View File

@@ -1,5 +1,5 @@
import React, {FC, useState} from 'react' import React, {FC, useState} from 'react'
import {useForm} from 'react-hook-form'; import {FieldValue, FieldValues, useForm} from 'react-hook-form';
import {ExclamationCircleIcon} from '@heroicons/react/outline'; import {ExclamationCircleIcon} from '@heroicons/react/outline';
import {useHistory} from "react-router-dom"; import {useHistory} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux"; import {useDispatch, useSelector} from "react-redux";
@@ -57,7 +57,14 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
const [validationErrors, setValidationErrors] = useState<string[]>([]) const [validationErrors, setValidationErrors] = useState<string[]>([])
const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] = useState(false) const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] = useState(false)
const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false) const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false)
const {register, control, setValue, getValues, reset, formState} = useForm() const formHooks = useForm<FieldValues>({
defaultValues: {
authorship: 'UNIFESO',
authorshipYear: new Date().getFullYear().toString(),
}
})
const {register, control, setValue, getValues, reset, formState, resetField} = formHooks
const [currentStep, setCurrentStep] = useState(0) const [currentStep, setCurrentStep] = useState(0)
const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges) const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
const history = useHistory() const history = useHistory()
@@ -119,7 +126,7 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
} }
return ( return (
<FormProvider props={{question, hooks: {register, control, setValue}}}> <FormProvider props={{question, hooks: formHooks }}>
{alert && ( {alert && (
<AlertV2 severity={alert.severity} text={alert.text}></AlertV2> <AlertV2 severity={alert.severity} text={alert.text}></AlertV2>
)} )}

View File

@@ -1,15 +1,9 @@
import React, { FC, useContext } from 'react' import React, { FC, useContext } from 'react';
import { Control, FieldValues } from 'react-hook-form'; import { FieldValues, UseFormReturn } from 'react-hook-form';
import { Question } from '../../../__generated__/graphql-schema'; import { Question } from '../../../__generated__/graphql-schema';
type FormContextHooks = {
register: any
setValue: Function
control: Control<FieldValues>
}
type FormContextProps = { type FormContextProps = {
hooks: FormContextHooks hooks: UseFormReturn<FieldValues, object>
question?: Question question?: Question
} }

View File

@@ -25,19 +25,20 @@ export const FeaturesFragment = gql`
` `
export const FeaturesFormStep: FC = () => { export const FeaturesFormStep: FC = () => {
const { question, hooks: { setValue, register } } = useFormProvider(); const { question, hooks: { setValue, register, formState, getValues } } = useFormProvider();
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
if (!question) return null
const { const {
authorship,
authorshipYear,
difficulty, difficulty,
bloomTaxonomy, bloomTaxonomy,
checkType, checkType,
} = question || {} as Question } = question
const [ownQuestion, setOwnQuestion] = useState<boolean>(authorship === "UNIFESO" || authorship === undefined || authorship === null); const authorship = getValues('authorship')
const [ownQuestion, setOwnQuestion] = useState(authorship === "UNIFESO")
const handleOwnCheck = (value: string) => { const handleOwnCheck = (value: string) => {
if (value === 'UNIFESO') { if (value === 'UNIFESO') {
@@ -61,7 +62,6 @@ export const FeaturesFormStep: FC = () => {
</label> </label>
<div className="my-auto"> <div className="my-auto">
<input <input
{...register('__nonused')}
className="my-auto" className="my-auto"
type="radio" type="radio"
id="authorship-own" id="authorship-own"
@@ -72,7 +72,6 @@ export const FeaturesFormStep: FC = () => {
</div> </div>
<div className="my-auto ml-3"> <div className="my-auto ml-3">
<input <input
{...register('__nonused')}
className="my-auto" className="my-auto"
type="radio" type="radio"
id="authorship-third" id="authorship-third"
@@ -90,7 +89,6 @@ export const FeaturesFormStep: FC = () => {
<input <input
{...register('authorship')} {...register('authorship')}
className="block rounded p-1 w-full border-gray-400 border shadow-sm" className="block rounded p-1 w-full border-gray-400 border shadow-sm"
defaultValue={authorship || (ownQuestion ? "UNIFESO" : "")}
readOnly={!!ownQuestion} readOnly={!!ownQuestion}
/> />
</div> </div>
@@ -106,7 +104,6 @@ export const FeaturesFormStep: FC = () => {
min="1999" min="1999"
max={currentYear} max={currentYear}
step="1" step="1"
defaultValue={authorshipYear ?? new Date().getFullYear().toString()}
readOnly={!!ownQuestion} readOnly={!!ownQuestion}
/> />
</div> </div>