add add question mechanic

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -1,6 +1,5 @@
 import { gql, useQuery } from "@apollo/client";
 import React, { useState } from "react";
-import { FaTrash } from "react-icons/fa";
 import { Controller, useForm } from "react-hook-form";
 
 import { Axis, Query } from "../../__generated__/graphql-schema";
@@ -8,7 +7,6 @@ import { Button, Card, Input, Navigator } from '../../components';
 import { SideBar } from "./components/SideBar";
 import { QuestionCard } from "./components/QuestionCard";
 import { Link } from "react-router-dom";
-import { SelectedQuestionCard } from "./components/SelectedQuestionCard";
 import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar";
 
 type NewAssessementManualForm = {
@@ -30,6 +28,8 @@ 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 [subjectsIds, setSubjectsIds] = useState<string[]>([])
   const { register, control, watch } = useForm<NewAssessementManualForm>({
     mode: 'onBlur'
@@ -52,6 +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 id: string = label.replace(/\s+/g, '')
+    setQuestions(q => [...q, { id, label }])
+  }
+
+  const removeQuestion = (id: string) => {
+    setQuestions(q => q.filter(i => i.id != id))
+  }
+
   return (
     <>
         <Navigator home />
@@ -60,156 +69,30 @@ export const NewAssessementManual = () => {
                 Filters
             </SideBar>
             <div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6 pb-20"> {/*bg-blue-500*/}
-                <QuestionCard title="Question 1"/>
+                <QuestionCard title="Question 1"
-                <QuestionCard title="Question 2"/>
+                  onAddQuestion={addQuestion}
-                <QuestionCard title="Question 3"/>
+                  onRemoveQuestion={removeQuestion}/>
-                <QuestionCard title="Question 4"/>
+                <QuestionCard title="Question 2"
-                <QuestionCard title="Question 5"/>
+                  onAddQuestion={addQuestion}
-                <QuestionCard title="Question 6"/>
+                  onRemoveQuestion={removeQuestion}/>
-                <QuestionCard title="Question 7"/>
+                <QuestionCard title="Question 3"
+                  onAddQuestion={addQuestion}
+                  onRemoveQuestion={removeQuestion}/>
+                <QuestionCard title="Question 4"
+                  onAddQuestion={addQuestion}
+                  onRemoveQuestion={removeQuestion}/>
+                <QuestionCard title="Question 5"
+                  onAddQuestion={addQuestion}
+                  onRemoveQuestion={removeQuestion}/>
+                <QuestionCard title="Question 6"
+                  onAddQuestion={addQuestion}
+                  onRemoveQuestion={removeQuestion}/>
+                <QuestionCard title="Question 7"
+                  onAddQuestion={addQuestion}
+                  onRemoveQuestion={removeQuestion}/>
             </div>
-            <SelectedQuestionsSideBar>
+            <SelectedQuestionsSideBar onRemoveQuestion={removeQuestion} questions={questions}/>
-              <SelectedQuestionCard id="Question1" label="question 1"/>
-              <SelectedQuestionCard id="Question2" label="question 2"/>
-              <SelectedQuestionCard id="Question3" label="question 3"/>
-              <SelectedQuestionCard id="Question5" label="question 5"/>
-            </SelectedQuestionsSideBar>
         </div>
     </>
-    // <>
-    //   
-    //   <div className="m-auto grid gap-4 mt-4 mx-6">
-    //     <Card title="Detalhes">
-    //       <div className="flex flex-col">
-    //         <p className="pr-2 my-auto">Titulo: </p>
-    //         <div className="w-full">
-    //           <Input></Input>
-    //         </div>
-    //       </div>
-    //       <div className="flex flex-col mt-3">
-    //         <p className="pr-2 my-auto">Observações: </p>
-    //         <div className="w-full">
-    //           <Input></Input>
-    //         </div>
-    //       </div>
-    //     </Card>
-    //     <Card title="Exios e Pesos">
-    //       <div className="mb-6">
-    //         <form
-    //           className="flex flex-row"
-    //           onSubmit={addAxisForm.handleSubmit(handleAddAxis)}
-    //         >
-    //           <select
-    //             className="w-full rounded p-1 border-gray-400 border shadow-sm"
-    //             disabled={!notSelectedAxis.length}
-    //             {...addAxisForm.register('axisId')}
-    //           >
-    //             {notSelectedAxis.map(axes => (
-    //               <option value={axes.id} key={`axes-${axes.id}`}>{axes.name}</option>
-    //             ))}
-    //           </select>
-    //           <Button 
-    //             className="ml-4"
-    //             htmlType="submit"
-    //             disabled={!notSelectedAxis.length}
-    //           >
-    //             Adicionar
-    //           </Button>
-    //         </form>
-    //       </div>
-
-    //       <div>
-    //         {selectedAxis.map(axis => (
-    //           <div
-    //             key={`list-axis-${axis.id}`}
-    //             className="flex flex-col w-full border border-gray-300 rounded p-4 mt-4 shadow-sm"
-    //           >
-    //             <div key={`list-axis-${axis.id}`} className="ml-4 mb-2">
-    //               <div className="flex justify-between">
-    //               <div className="text-lg">{axis.name}</div>
-    //               <div className="text-red-600 cursor-pointer" onClick={() => handleRemoveAxis(axis.id)}><FaTrash></FaTrash></div>
-    //               </div>
-    //               <div className="ml-4 grid grid-cols-3">
-    //                 Fácil
-    //                 <span>
-    //                   {watch(`axisWeights.easy.${axis.id}`) ?? 5}
-    //                 </span>
-    //                 <div>
-    //                   <Controller
-    //                     name={`axisWeights.easy.${axis.id}`}
-    //                     control={control}
-    //                     defaultValue={5}
-    //                     render={({ field }) => (
-    //                       <input
-    //                         className="w-full"
-    //                         type="range"
-    //                         min={0}
-    //                         max={10}
-    //                         {...field}
-    //                       />
-    //                     )}
-    //                   />
-
-    //                 </div>
-
-    //               </div>
-    //               <div className="ml-4 grid grid-cols-3">
-    //                 Médio
-    //                 <span>
-    //                   {watch(`axisWeights.medium.${axis.id}`) ?? 5}
-    //                 </span>
-    //                 <div>
-    //                   <Controller
-    //                     name={`axisWeights.medium.${axis.id}`}
-    //                     control={control}
-    //                     defaultValue={5}
-    //                     render={({ field }) => (
-    //                       <input
-    //                         className="w-full"
-    //                         type="range"
-    //                         min={0}
-    //                         max={10}
-    //                         {...field}
-    //                       />
-    //                     )}
-    //                   />
-
-    //                 </div>
-
-    //               </div>
-    //               <div className="ml-4 grid grid-cols-3">
-    //                 Difícil
-    //                 <span>
-    //                   {watch(`axisWeights.hard.${axis.id}`) ?? 5}
-    //                 </span>
-    //                 <div>
-    //                   <Controller
-    //                     name={`axisWeights.hard.${axis.id}`}
-    //                     control={control}
-    //                     defaultValue={5}
-    //                     render={({ field }) => (
-    //                       <input
-    //                         className="w-full"
-    //                         type="range"
-    //                         min={0}
-    //                         max={10}
-    //                         {...field}
-    //                       />
-    //                     )}
-    //                   />
-
-    //                 </div>
-
-    //               </div>
-    //             </div>
-    //           </div>
-    //         ))}
-    //       </div>
-    //     </Card>
-    //   </div>
-    //   <Button type="primary" className="ml-auto mr-6 mt-6">
-    //     Gerar
-    //   </Button>
-    // </>
   )
 }

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

@@ -1,13 +1,35 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import { Button, Card } from "../../../components";
 
 interface Props {
     title: string
+    onAddQuestion: Function,
+    onRemoveQuestion: Function
 }
 
-export const QuestionCard: FC<Props> = ({ title }) => {
+export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion }) => {
+    const questionId = title.replace(/\s+/g, '')
+    
+    const handleAddQuestion = () => {
+        setButtonState({
+            bg: 'bg-red-700', label: 'Remover', method: handleRemoveQuestion
+        })
+        onAddQuestion(title)
+    }
+    
+    const handleRemoveQuestion = () => {
+        setButtonState({
+            bg: '', label: 'Adicionar', method: handleAddQuestion
+        })
+        onRemoveQuestion(questionId)
+    }
+
+    const [buttonState, setButtonState] = useState({
+        bg: '', label: 'Adicionar', method: handleAddQuestion
+    })
+
     return (
-        <div id={title.replace(/\s+/g, '')}>
+        <div id={questionId}>
             <Card title={title} className="mb-5">
                 <div>
                     <div className="grid grid-cols-2 gap-2">
@@ -49,8 +71,9 @@ export const QuestionCard: FC<Props> = ({ title }) => {
                     <div className="mt-6">
                         <hr className="h-4"/>
                         <div className="flex justify-end">
-                            <Button type="primary">
+                            <Button type="primary" className={buttonState.bg}
-                                Adicionar
+                                onClick={buttonState.method}>
+                                {buttonState.label}
                             </Button>
                         </div>
                     </div>

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

@@ -5,9 +5,10 @@ import { Link } from 'react-router-dom';
 type Props = {
     label: string
     id: string
+    onRemoveQuestion: Function
 }
 
-export const SelectedQuestionCard: FC<Props> = ({ label, id }) => {
+export const SelectedQuestionCard: FC<Props> = ({ label, id, onRemoveQuestion }) => {
     return (
         <div className="mx-1 sm:mx-0 mb-4 mt-3 sm:mb-0 border-l-8 border-primary-light flex bg-white hover:bg-unifeso-50 rounded shadow hover:shadow-md cursor-pointer group transition-all duration-500">
             <a className="flex flex-col w-full px-3 py-2"
@@ -16,7 +17,8 @@ export const SelectedQuestionCard: FC<Props> = ({ label, id }) => {
             </a>
             <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' }}>
+                    style={{ left: '-1.5rem' }}
+                    onClick={() => onRemoveQuestion(id)}>
                     <FaTrash />
                 </button>
             </div>

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

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