fix communication between question and selecte question cards

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -28,7 +28,7 @@ export const NewAssessementManual = () => {
   const { data } = useQuery<Query>(NEW_ASSESSEMENT_DATA_QUERY)
   const axes = data?.axes.nodes
 
-  const [questions, setQuestions] = useState<{id: string, label: string}[]>([])
+  const [questions, setQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([])
 
   const [subjectsIds, setSubjectsIds] = useState<string[]>([])
   const { register, control, watch } = useForm<NewAssessementManualForm>({
@@ -52,13 +52,15 @@ export const NewAssessementManual = () => {
   const notSelectedAxis: Axis[] = axes.filter((axis) => !subjectsIds.includes(axis.id))
   const selectedAxis: Axis[] = axes.filter((axis) => subjectsIds.includes(axis.id))
 
-  const addQuestion = (label: string) => {
+  const addQuestion = (label: string, removeHandler: Function) => {
     const id: string = label.replace(/\s+/g, '')
-    setQuestions(q => [...q, { id, label }])
+    if (!questions.find(q => q.id === id)) {
+      setQuestions(q => [...q, { id, label, removeHandler }])
+    }
   }
 
   const removeQuestion = (id: string) => {
-    setQuestions(q => q.filter(i => i.id != id))
+    setQuestions(q => q.filter(i => i.id !== id))
   }
 
   return (
@@ -91,7 +93,7 @@ export const NewAssessementManual = () => {
                   onAddQuestion={addQuestion}
                   onRemoveQuestion={removeQuestion}/>
             </div>
-            <SelectedQuestionsSideBar onRemoveQuestion={removeQuestion} questions={questions}/>
+            <SelectedQuestionsSideBar questions={questions}/>
         </div>
     </>
   )

app/javascript/pages/assessment/components/QuestionCard.tsx

@@ -16,7 +16,7 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
         setButtonState({
             bg: 'bg-red-700', label: 'Remover', method: handleRemoveQuestion
         })
-        onAddQuestion(title)
+        onAddQuestion(title, handleRemoveQuestion)
     }
     
     const handleRemoveQuestion = () => {

app/javascript/pages/assessment/components/SelectedQuestionCard.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { FaTrash } from 'react-icons/fa';
-import { Link } from 'react-router-dom';
 
 type Props = {
     label: string
@@ -18,7 +17,7 @@ export const SelectedQuestionCard: FC<Props> = ({ label, id, onRemoveQuestion })
             <div className="flex flex-col relative flex-grow justify-center">
                 <button className="group-hover:block absolute bg-gray-300 hover:bg-primary-normal text-gray-500 hover:text-gray-100 hover:shadow-lg rounded-full p-2 cursor-pointer shadow-inner transition-all duration-500"
                     style={{ left: '-1.5rem' }}
-                    onClick={() => onRemoveQuestion(id)}>
+                    onClick={() => onRemoveQuestion()}>
                     <FaTrash />
                 </button>
             </div>

app/javascript/pages/assessment/components/SelectedQuestionsSideBar.tsx

@@ -1,13 +1,14 @@
-import React, { FC, PropsWithChildren } from "react";
+import React, { FC, } from "react";
 import { SideBar } from "./SideBar";
 import { SelectedQuestionCard } from "./SelectedQuestionCard";
 
 type Props = {
-    questions: {id: string, label: string}[],
-    onRemoveQuestion: Function
+    questions: {
+        id: string, label: string, removeHandler: Function
+    }[]
 }
 
-export const SelectedQuestionsSideBar: FC<Props> = ({ questions, onRemoveQuestion }) => {
+export const SelectedQuestionsSideBar: FC<Props> = ({ questions }) => {
     return (
         <SideBar>
             <h1>Questões Selecionadas</h1>
@@ -16,7 +17,7 @@ export const SelectedQuestionsSideBar: FC<Props> = ({ questions, onRemoveQuestio
                 {questions.length ?
                     questions.map(q => <SelectedQuestionCard
                             key={q.id} id={q.id} label={q.label}
-                            onRemoveQuestion={onRemoveQuestion}/>) :
+                            onRemoveQuestion={q.removeHandler}/>) :
                     <h2 className="text-gray-700 mt-3">
                         Nenhuma questão selecionada
                     </h2>