Merge pull request #1 from teste-de-progresso/fix/feature-form-authorship-options-select

Fix/feature form authorship options select

app/graphql/resolvers/reviewers_query_resolver.rb

@@ -8,8 +8,7 @@ module Resolvers
     def resolve
       UserPolicy::Scope.new(@context[:current_user], User)
         .resolve
-        .joins(:roles)
-        .where(roles: { name: %i[teacher nde] })
+        .where(roles: %i[teacher nde])
         .where.not(id: @context[:current_user].id)
         .distinct
     end

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

@@ -1,5 +1,5 @@
 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 {useHistory} from "react-router-dom";
 import {useDispatch, useSelector} from "react-redux";
@@ -57,7 +57,19 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
   const [validationErrors, setValidationErrors] = useState<string[]>([])
   const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] = useState(false)
   const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false)
-  const {register, control, setValue, getValues, reset, formState} = useForm()
+  const formHooks = useForm<FieldValues>({
+    defaultValues: {
+      authorship: question?.authorship ?? 'UNIFESO',
+      authorshipType: question?.authorship === 'UNIFESO' ? 'UNIFESO' : 'OTHER',
+      authorshipYear: new Date().getFullYear().toString(),
+      difficulty: question?.difficulty,
+      checkType: question?.checkType,
+      bloomTaxonomy: question?.bloomTaxonomy,
+      intention: question?.intention,
+    }
+  })
+  const {register, control, setValue, getValues, reset, formState, resetField} = formHooks
+
   const [currentStep, setCurrentStep] = useState(0)
   const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
   const history = useHistory()
@@ -119,7 +131,7 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
   }
 
   return (
-    <FormProvider props={{question, hooks: {register, control, setValue}}}>
+    <FormProvider props={{question, hooks: formHooks }}>
       {alert && (
         <AlertV2 severity={alert.severity} text={alert.text}></AlertV2>
       )}

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

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

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

@@ -1,20 +1,23 @@
-import React, { FC, useState } from "react";
 import { gql } from "@apollo/client";
+import React, { FC, useState } from "react";
 
 import { Card } from "../../../../../components";
-import { SubjectSelect, SubjectFragment } from "./SubjectSelect";
-import { ReviewerSelect, ReviewerFragment } from "./ReviewSelect";
-import { useFormProvider } from '../../FormContext'
+import { useFormProvider } from "../../FormContext";
+import { ReviewerFragment, ReviewerSelect } from "./ReviewSelect";
+import { SubjectFragment, SubjectSelect } from "./SubjectSelect";
 
-import { BLOOM_TAXONOMY, CHECK_TYPE, DIFFICULTY } from "../../../../../utils/types";
-import { Question } from "../../../../../__generated__/graphql-schema";
+import {
+  BLOOM_TAXONOMY,
+  CHECK_TYPE,
+  DIFFICULTY,
+} from "../../../../../utils/types";
 
 export const FeaturesFragment = gql`
   ${ReviewerFragment}
   ${SubjectFragment}
   fragment FeaturesFields on Question {
-    ... ReviewerFields
-    ... SubjectFields
+    ...ReviewerFields
+    ...SubjectFields
     authorship
     authorshipYear
     difficulty
@@ -22,30 +25,24 @@ export const FeaturesFragment = gql`
     intention
     bloomTaxonomy
   }
-`
+`;
 
 export const FeaturesFormStep: FC = () => {
-  const { question, hooks: { setValue, register } } = useFormProvider();
-
+  const {
+    hooks: { setValue, register, getValues },
+  } = useFormProvider();
   const currentYear = new Date().getFullYear();
 
-  const {
-    authorship,
-    authorshipYear,
-    difficulty,
-    bloomTaxonomy,
-    checkType,
-  } = question || {} as 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) => {
-    if (value === 'UNIFESO') {
-      setOwnQuestion(true)
+    if (value === "UNIFESO") {
+      setOwnQuestion(true);
       setValue("authorship", "UNIFESO");
       setValue("authorshipYear", currentYear.toString());
     } else {
-      setOwnQuestion(false)
+      setOwnQuestion(false);
       setValue("authorship", "");
       setValue("authorshipYear", "");
     }
@@ -61,25 +58,29 @@ export const FeaturesFormStep: FC = () => {
             </label>
             <div className="my-auto">
               <input
-                {...register('__nonused')}
+                {...register("authorshipType", { required: true })}
+                value="UNIFESO"
                 className="my-auto"
                 type="radio"
                 id="authorship-own"
-                checked={!!ownQuestion}
                 onChange={() => handleOwnCheck("UNIFESO")}
               />
-              <label htmlFor="authorship-own" className="ml-1">Própria</label>
+              <label htmlFor="authorship-own" className="ml-1">
+                Própria
+              </label>
             </div>
             <div className="my-auto ml-3">
               <input
-                {...register('__nonused')}
+                {...register("authorshipType", { required: true })}
+                value="OTHER"
                 className="my-auto"
                 type="radio"
                 id="authorship-third"
-                checked={!ownQuestion}
                 onChange={() => handleOwnCheck("")}
               />
-              <label htmlFor="authorship-third" className="ml-1">Outro</label>
+              <label htmlFor="authorship-third" className="ml-1">
+                Outro
+              </label>
             </div>
           </div>
           <div className="flex">
@@ -88,9 +89,8 @@ export const FeaturesFormStep: FC = () => {
               <div className="w-full">
                 <div style={{ maxWidth: "194px" }}>
                   <input
-                    {...register('authorship')}
+                    {...register("authorship")}
                     className="block rounded p-1 w-full border-gray-400 border shadow-sm"
-                    defaultValue={authorship || (ownQuestion ? "UNIFESO" : "")}
                     readOnly={!!ownQuestion}
                   />
                 </div>
@@ -100,13 +100,12 @@ export const FeaturesFormStep: FC = () => {
               <h2 className="pr-2 pl-3 my-auto">Ano</h2>
               <div style={{ maxWidth: "62px" }}>
                 <input
-                  {...register('authorshipYear')}
+                  {...register("authorshipYear")}
                   className="w-full rounded p-1 border-gray-400 border shadow-sm"
                   type="number"
                   min="1999"
                   max={currentYear}
                   step="1"
-                  defaultValue={authorshipYear ?? new Date().getFullYear().toString()}
                   readOnly={!!ownQuestion}
                 />
               </div>
@@ -119,9 +118,8 @@ export const FeaturesFormStep: FC = () => {
             <div className="flex flex-col">
               <h2>Grau de Dificuldade</h2>
               <select
-                {...register('difficulty')}
+                {...register("difficulty")}
                 className="w-full rounded p-1 border-gray-400 border shadow-sm"
-                defaultValue={difficulty ?? ""}
               >
                 <option />
                 {DIFFICULTY.map((item, index) => (
@@ -136,7 +134,6 @@ export const FeaturesFormStep: FC = () => {
               <select
                 {...register("checkType")}
                 className="w-full rounded p-1 border-gray-400 border shadow-sm"
-                defaultValue={checkType ?? ""}
               >
                 <option />
                 {CHECK_TYPE.map((item, index) => (
@@ -149,9 +146,8 @@ export const FeaturesFormStep: FC = () => {
             <div className="w-full">
               <h2>Habilidade Cognitiva</h2>
               <select
-                {...register('bloomTaxonomy')}
+                {...register("bloomTaxonomy")}
                 className="w-full rounded p-1 border-gray-400 border shadow-sm"
-                defaultValue={bloomTaxonomy ?? ""}
               >
                 <option />
                 {BLOOM_TAXONOMY.map((item, index) => (
@@ -171,7 +167,6 @@ export const FeaturesFormStep: FC = () => {
           <textarea
             {...register("intention")}
             className="block rounded p-1 w-full border-gray-400 border shadow-sm"
-            defaultValue={question?.intention ?? ""}
           />
         </div>
         <div className="flex flex-col mt-4">

app/javascript/pages/question/List/QuestionsList.tsx

@@ -59,23 +59,25 @@ export const QuestionsList: FC<Props> = ({ questions, title, pagination }) => {
     <div className="bg-gray-200 p-4 rounded my-2">
       <div className="flex">
         <h2 className="text-gray-500 font-medium text-xl">{title}</h2>
-        <div className="ml-auto text-sm sm:text-base text-gray-700">
-          <button
-            className="p-2"
-            onClick={handleOnPreviousPageClick}
-            style={{ visibility: (pagination?.hasPreviousPage ? 'visible' : 'hidden') }}
-          >
-            <FaArrowLeft />
-          </button>
-          Página: {pageCount}
-          <button
-            className="p-2"
-            onClick={handleOnNextPageClick}
-            style={{ visibility: (pagination?.hasNextPage ? 'visible' : 'hidden') }}
-          >
-            <FaArrowRight />
-          </button>
-        </div>
+        {questions.length > 0 &&
+          <div className="ml-auto text-sm sm:text-base text-gray-700">
+            <button
+              className="p-2"
+              onClick={handleOnPreviousPageClick}
+              style={{ visibility: (pagination?.hasPreviousPage ? 'visible' : 'hidden') }}
+            >
+              <FaArrowLeft />
+            </button>
+            Página: {pageCount}
+            <button
+              className="p-2"
+              onClick={handleOnNextPageClick}
+              style={{ visibility: (pagination?.hasNextPage ? 'visible' : 'hidden') }}
+            >
+              <FaArrowRight />
+            </button>
+          </div>
+        }
       </div>
       <hr className="border-t border-gray-400 m-px" />
       <div className="p-2 text-sm">

app/javascript/pages/question/formatInputs.ts

@@ -12,4 +12,5 @@ export const formatInput = (inputs: any) =>
       inputs.reviewerUserId === "" ? undefined : inputs.reviewerUserId,
     alternatives: inputs.alternatives,
     __nonused: undefined,
+    authorshipType: undefined,
   } as Question);