fix react hook form

app/javascript/application.tsx

@@ -4,23 +4,24 @@ import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 
 import { Appbar } from "./components";
-import { ApolloContext } from "./contexts";
+import { ApolloContext, UserContext } from "./contexts";
 import { PrivateRoutes } from "./routes";
 import { store } from "./services/store";
 
 export const App = () => {
   return (
     <ApolloContext>
+      <UserContext>
         <Provider store={store}>
           <BrowserRouter>
             <Appbar />
             <PrivateRoutes />
           </BrowserRouter>
         </Provider>
+      </UserContext>
     </ApolloContext>
   );
-}
+};
-
 
 const container = document.getElementById("app");
 

app/javascript/components/List/List.tsx

@@ -43,6 +43,7 @@ export const ListItem: FC<ListItemProps> = ({ icon, text, children }) => {
 
 type ListProps = {
   className?: string
+  children: React.ReactNode
 }
 
 export const List: FC<ListProps> = ({

app/javascript/components/Modal/Modal.tsx

@@ -7,6 +7,7 @@ type Props = {
   buttons?: any,
   title: string,
   className?: string,
+  children: React.ReactNode
 }
 
 export const Modal: FC<Props> = ({

app/javascript/contexts/UserContext.tsx

@@ -11,14 +11,12 @@ export type UserContext = {
   user?: Query['currentUser']
   refetch: () => void
   isOnlyTeacher: boolean
-  authToken: string
 }
 
 const Context = createContext<UserContext>({
   refetch: () => {
   },
   isOnlyTeacher: false,
-  authToken: ''
 })
 
 export const useCurrentUser = (): UserContext => {
@@ -44,10 +42,9 @@ const CurrentUserQuery = gql`
 
 type Props = {
   children: any
-  authToken: string
 }
 
-export const UserContext: FC<Props> = ({ children, authToken }) => {
+export const UserContext: FC<Props> = ({ children }) => {
   const [user, setUser] = useState<Query['currentUser']>();
   const isOnlyTeacher = !!(user?.roles.includes(UserRole.Teacher) && user?.roles.length === 1)
 
@@ -67,7 +64,7 @@ export const UserContext: FC<Props> = ({ children, authToken }) => {
   if (!user) return <UnauthorizedAccess />
 
   return (
-    <Context.Provider value={{ user, refetch, isOnlyTeacher, authToken }}>
+    <Context.Provider value={{ user, refetch, isOnlyTeacher }}>
       {children}
     </Context.Provider>
   );

app/javascript/pages/dashboard/Filters.tsx

@@ -44,9 +44,7 @@ const FiltersForm: FC = () => {
   const {user, isOnlyTeacher} = userContext
 
   const onSubmit = (values: FilterBarForm) => {
-    reset(getValues(), {
+    reset(getValues())
-      isDirty: false
-    })
     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}
+              {...register('fromOtherUsers')}
-              name={"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(), {
+      reset(getValues())
-        isDirty: false
-      })
       dispatch(turnOff())
     }
   }
@@ -117,9 +115,7 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
       setValidationErrors(errors)
     }
 
-    reset(getValues(), {
+    reset(getValues())
-      isDirty: false
-    })
   }
 
   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, formState: {
-  const { register, handleSubmit } = useForm()
+    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>) => {
+  const formSubmit: SubmitHandler<FieldValues> = async ({
-    if (e.target.value !== '') {
+    feedbackType,
-      setIsChangesSaved(false)
+    text
-    } else {
-      setIsChangesSaved(true)
-    }
-  }
-
-  const handleSubmitClick = () => {
-    setIsChangesSaved(true)
-  }
-
-  const formSubmit = async (inputs: {
-    feedbackType: ReviewMessageFeedbackType
-    text: string
   }) => {
     await createReviewMessage({
       variables: {
-        text: inputs.text,
+        text: text,
-        feedbackType: questionIsFromCurrentUser ? ReviewMessageFeedbackType.Answer : inputs.feedbackType,
+        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"
+                {...register("feedbackType", { required: true })}
-                ref={register({ 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>

package.json

@@ -3,7 +3,8 @@
   "private": "true",
   "dependencies": {
     "@apollo/client": "^3.6.9",
-    "@ckeditor/ckeditor5-react": "^5.0.2",
+    "@ckeditor/ckeditor5-build-classic": "^21.0.0",
+    "@ckeditor/ckeditor5-react": "^2.1.0",
     "@headlessui/react": "^1.6.6",
     "@heroicons/react": "^1.0.6",
     "@nivo/core": "^0.79.0",
@@ -17,7 +18,7 @@
     "react": "^18.2.0",
     "react-avatar-edit": "^1.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^6.2.0",
+    "react-hook-form": "^7.33.1",
     "react-icons": "^4.4.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^5.2.0",

yarn.lock

@@ -136,12 +136,17 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@ckeditor/ckeditor5-react@^5.0.2":
+"@ckeditor/ckeditor5-build-classic@^21.0.0":
-  version "5.0.2"
+  version "21.0.0"
-  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-5.0.2.tgz#446518e1d7ce842c63fc6ac24e818cc78a753903"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-21.0.0.tgz#f34624fa28edbc4de917eee326db7de1f09c9c63"
-  integrity sha512-pN4acvCAIsuXaZDMttqy4dNBKXiJ6AS6P8NM3ggMc/rQkMIPp3YPhDWWf+pyQLUiewj1Bfr5EFeBfcXPQTOn+Q==
+  integrity sha512-IYPXmc5Np7SzJVJbGNZk3OZEHnZ/WylbN1aFyfYdKMch9Be8mrCB9QQOqfsAEKD4SjXujYvn1jL0mM/EPZ8ECw==
+
+"@ckeditor/ckeditor5-react@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-2.1.0.tgz#f612546a5a328899a436d71b72ffd632600049e8"
+  integrity sha512-rlHjRKhwP9tNK0Yj2UJShL14mRfxLPgJ+Pv6zTv/Mvmd4wrwGnJf+5ybOAGK92S02hP1cXH+9km+PRO1b4V+ng==
   dependencies:
-    prop-types "^15.7.2"
+    prop-types "^15.6.1"
 
 "@emotion/is-prop-valid@^1.1.0":
   version "1.1.3"
@@ -1700,7 +1705,7 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1741,10 +1746,10 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-hook-form@^6.2.0:
+react-hook-form@^7.33.1:
-  version "6.15.8"
+  version "7.33.1"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.33.1.tgz#8c4410e3420788d3b804d62cc4c142915c2e46d0"
-  integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
+  integrity sha512-ydTfTxEJdvgjCZBj5DDXRc58oTEfnFupEwwTAQ9FSKzykEJkX+3CiAkGtAMiZG7IPWHuzgT6AOBfogiKhUvKgg==
 
 react-icons@^4.4.0:
   version "4.4.0"