fix react hook form

app/javascript/pages/dashboard/Filters.tsx

@@ -44,9 +44,7 @@ const FiltersForm: FC = () => {
   const {user, isOnlyTeacher} = userContext
 
   const onSubmit = (values: FilterBarForm) => {
-    reset(getValues(), {
-      isDirty: false
-    })
+    reset(getValues())
     setWhere(mapFilter(values, user?.id))
   }
 
@@ -66,7 +64,7 @@ const FiltersForm: FC = () => {
             <Input
               type="date"
               placeholder="createDate.startAt"
-              ref={register({
+              {...register('createDate.startAt',{
                 maxLength: 10,
                 minLength: 10,
               })}
@@ -76,11 +74,10 @@ const FiltersForm: FC = () => {
             <Input
               type="date"
               placeholder="createDate.endAt"
-              ref={register({
+              {...register('createDate.endAt', {
                 maxLength: 10,
                 minLength: 10,
               })}
-              name={"createDate.endAt"}
               label={"Até"}
             />
           </div>
@@ -96,8 +93,7 @@ const FiltersForm: FC = () => {
               id={"fromOtherUsers"}
               type="checkbox"
               placeholder="fromOtherUsers"
-              ref={register}
-              name={"fromOtherUsers"}
+              {...register('fromOtherUsers')}
             />
           </span>
       )}

app/javascript/pages/question/Form/Form.tsx

@@ -97,9 +97,7 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
   const handleDraftSave = () => {
     if (onDraftSubmit) {
       onDraftSubmit({...getFormattedInputValues(), status: QuestionStatus.Draft} as QuestionCreateInput)
-      reset(getValues(), {
-        isDirty: false
-      })
+      reset(getValues())
       dispatch(turnOff())
     }
   }
@@ -117,9 +115,7 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
       setValidationErrors(errors)
     }
 
-    reset(getValues(), {
-      isDirty: false
-    })
+    reset(getValues())
   }
 
   return (

app/javascript/pages/question/Form/components/TextEditor.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { Controller } from "react-hook-form";
 import CKEditor from "@ckeditor/ckeditor5-react";
-import * as ClassicEditor from "ckeditor5-mathtype/build/ckeditor";
+import ClassicEditor from "ckeditor5-mathtype/build/ckeditor";
 
 import { useFormProvider } from '../FormContext'
 
@@ -37,7 +37,9 @@ export const TextEditor: FC<Props> = ({ name, defaultValue }) => {
       control={control}
       name={name}
       defaultValue={defaultValue}
-      render={({ onChange, value }) => (
+      render={({
+        field: { onChange, value }
+       }) => (
         <CKEditor
           editor={ClassicEditor}
           data={value}

app/javascript/pages/question/Form/steps/FeaturesFromStep/FeaturesFormStep.tsx

@@ -61,25 +61,23 @@ export const FeaturesFormStep: FC = () => {
             </label>
             <div className="my-auto">
               <input
+                {...register('__nonused')}
                 className="my-auto"
                 type="radio"
                 id="authorship-own"
                 checked={!!ownQuestion}
-                ref={register}
                 onChange={() => handleOwnCheck("UNIFESO")}
-                name="__nonused"
               />
               <label htmlFor="authorship-own" className="ml-1">Própria</label>
             </div>
             <div className="my-auto ml-3">
               <input
+                {...register('__nonused')}
                 className="my-auto"
                 type="radio"
                 id="authorship-third"
                 checked={!ownQuestion}
-                ref={register}
                 onChange={() => handleOwnCheck("")}
-                name="__nonused"
               />
               <label htmlFor="authorship-third" className="ml-1">Outro</label>
             </div>
@@ -90,9 +88,8 @@ export const FeaturesFormStep: FC = () => {
               <div className="w-full">
                 <div style={{ maxWidth: "194px" }}>
                   <input
+                    {...register('authorship')}
                     className="block rounded p-1 w-full border-gray-400 border shadow-sm"
-                    ref={register}
-                    name="authorship"
                     defaultValue={authorship || (ownQuestion ? "UNIFESO" : "")}
                     readOnly={!!ownQuestion}
                   />
@@ -103,13 +100,12 @@ export const FeaturesFormStep: FC = () => {
               <h2 className="pr-2 pl-3 my-auto">Ano</h2>
               <div style={{ maxWidth: "62px" }}>
                 <input
+                  {...register('authorshipYear')}
                   className="w-full rounded p-1 border-gray-400 border shadow-sm"
-                  ref={register}
                   type="number"
                   min="1999"
                   max={currentYear}
                   step="1"
-                  name="authorshipYear"
                   defaultValue={authorshipYear ?? new Date().getFullYear().toString()}
                   readOnly={!!ownQuestion}
                 />
@@ -123,9 +119,8 @@ export const FeaturesFormStep: FC = () => {
             <div className="flex flex-col">
               <h2>Grau de Dificuldade</h2>
               <select
-                ref={register}
+                {...register('difficulty')}
                 className="w-full rounded p-1 border-gray-400 border shadow-sm"
-                name="difficulty"
                 defaultValue={difficulty ?? ""}
               >
                 <option />
@@ -139,9 +134,8 @@ export const FeaturesFormStep: FC = () => {
             <div className="w-full">
               <h2>Tipo</h2>
               <select
-                ref={register}
+                {...register("checkType")}
                 className="w-full rounded p-1 border-gray-400 border shadow-sm"
-                name="checkType"
                 defaultValue={checkType ?? ""}
               >
                 <option />
@@ -155,9 +149,8 @@ export const FeaturesFormStep: FC = () => {
             <div className="w-full">
               <h2>Habilidade Cognitiva</h2>
               <select
-                ref={register}
+                {...register('bloomTaxonomy')}
                 className="w-full rounded p-1 border-gray-400 border shadow-sm"
-                name="bloomTaxonomy"
                 defaultValue={bloomTaxonomy ?? ""}
               >
                 <option />
@@ -176,9 +169,8 @@ export const FeaturesFormStep: FC = () => {
         <div className="flex flex-col mt-4">
           <h2>Intenção</h2>
           <textarea
+            {...register("intention")}
             className="block rounded p-1 w-full border-gray-400 border shadow-sm"
-            ref={register}
-            name="intention"
             defaultValue={question?.intention ?? ""}
           />
         </div>

app/javascript/pages/question/Form/steps/FeaturesFromStep/ReviewSelect.tsx

@@ -38,9 +38,8 @@ export const ReviewerSelect: FC<Props> = () => {
 
   return (
     <select
-      ref={register}
+      {...register('reviewerUserId')}
       className="w-full rounded p-1 border-gray-400 border shadow-sm"
-      name="reviewerUserId"
       defaultValue={question?.reviewer?.id}
     >
       {(question?.status === undefined || question?.status === QuestionStatus.Draft) && <option />}

app/javascript/pages/question/Form/steps/FeaturesFromStep/SubjectSelect.tsx

@@ -50,9 +50,8 @@ export const SubjectSelect: FC<Props> = () => {
       <div>
         <h2>Assunto</h2>
         <select
-          ref={register}
+          {...register('subjectId')}
           className="w-full rounded p-1 border-gray-400 border shadow-sm"
-          name="subjectId"
           defaultValue={question?.subject?.id ?? ""}
           onChange={(e) => setSelectedId(e.target.value)}
         >

app/javascript/pages/question/List/QuestionFilter/AuthorshipFilter.tsx

@@ -31,9 +31,8 @@ export const AuthorshipFilter: FC<Props> = ({ setChanged, register }) => {
         {options.map(({ value, label }, index) => (
           <span className="mr-1 mb-2 sm:mb-0 sm:mr-0" key={label}>
             <input
-              ref={register}
+              ref={register('authorship')}
               type="radio"
-              name="authorship"
               value={value}
               id={value}
               defaultChecked={!index}

app/javascript/pages/question/List/QuestionFilter/QuestionsAuthorshipTypeFilter.tsx

@@ -18,9 +18,8 @@ export const QuestionsAuthorshipTypeFilter: FC<Props> = ({ register, setChanged
   return (
     <div>
       <select
-        ref={register}
+        {...register('authorshipYear')}
         className="w-full rounded p-1 border-gray-400 border shadow-sm"
-        name="authorshipYear"
         defaultValue={where.authorshipYear ?? ""}
         onClick={() => setChanged(true)}
       >

app/javascript/pages/question/List/QuestionFilter/QuestionsFilter.tsx

@@ -44,7 +44,7 @@ const FilterGroup: FC<FilterGroupProps> = ({
             <input
               type="checkbox"
               name={value}
-              ref={register}
+              {...register(value)}
               id={value}
               defaultChecked={selecteds.includes(value)}
               onClick={() => setChanged(true)}

app/javascript/pages/question/List/QuestionFilter/QuestionsSubjectFilter.tsx

@@ -31,9 +31,8 @@ export const QuestionsSubjectFilter: FC<Props> = ({ register, setChanged }) => {
   return (
     <div>
       <select
-        ref={register}
+        {...register('subjectId')}
         className="w-full rounded p-1 border-gray-400 border shadow-sm"
-        name="subjectId"
         defaultValue={where.subjectId ?? ""}
         onClick={() => setChanged(true)}
       >

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

@@ -1,6 +1,6 @@
 import { ApolloQueryResult, gql, OperationVariables, useMutation } from "@apollo/client";
 import React, { FC, useState } from "react";
-import { useForm } from "react-hook-form";
+import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
 import { Prompt, useHistory } from "react-router";
 import { Button, Card } from "../../../../components";
 import { useCurrentUser } from "../../../../contexts";
@@ -52,8 +52,9 @@ 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 { register, handleSubmit, formState: {
+    isDirty
+  } } = useForm()
   const history = useHistory();
   const { user } = useCurrentUser()
 
@@ -62,26 +63,14 @@ export const ReviewMessageForm: FC<{
   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
+  const formSubmit: SubmitHandler<FieldValues> = async ({
+    feedbackType,
+    text
   }) => {
     await createReviewMessage({
       variables: {
-        text: inputs.text,
-        feedbackType: questionIsFromCurrentUser ? ReviewMessageFeedbackType.Answer : inputs.feedbackType,
+        text: text,
+        feedbackType: questionIsFromCurrentUser ? ReviewMessageFeedbackType.Answer : feedbackType,
         questionId: NodeId.decode(question.id).id,
       },
     });
@@ -96,15 +85,14 @@ export const ReviewMessageForm: FC<{
   return (
     <>
       <Prompt
-        when={!isChangesSaved}
+        when={!isDirty}
         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}
+            {...register('text')}
             name="text"
           />
           {!questionIsFromCurrentUser && REVIEW_FEEDBACK.map((item, index) => (
@@ -112,8 +100,7 @@ export const ReviewMessageForm: FC<{
               <input
                 type="radio"
                 id={item.value}
-                name="feedbackType"
-                ref={register({ required: true })}
+                {...register("feedbackType", { required: true })}
                 value={item.value}
                 className="my-auto"
                 defaultChecked={index === 0}
@@ -128,7 +115,7 @@ export const ReviewMessageForm: FC<{
             </div>
           ))}
           <div className="justify-end flex">
-            <Button type="primary" htmlType="submit" className="mt-4" onClick={handleSubmitClick}>
+            <Button type="primary" htmlType="submit" className="mt-4">
               {questionIsFromCurrentUser ? 'Responder Parecer' : 'Enviar Parecer'}
             </Button>
           </div>