add question area and clear selection button

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -1,68 +1,29 @@
-import { gql, useQuery } from "@apollo/client";
 import React, { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { Navigator } from '../../components';
-
-import { Axis, Query } from "../../__generated__/graphql-schema";
-import { Button, Card, Input, Navigator } from '../../components';
-import { SideBar } from "./components/SideBar";
-import { QuestionCard } from "./components/QuestionCard";
-import { Link } from "react-router-dom";
 import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar";
 import { FiltersSideBar } from "./components/FiltersSideBar";
 import { BottomBar } from "./components/BottomBar";
-
+import { QuestionArea } from "./components/QuestionArea";
-type NewAssessementManualForm = {
-  axisWeights: Record<string, any>
-}
-
-const NEW_ASSESSEMENT_DATA_QUERY = gql`
-  query NewAssessementDataQuery {
-    axes {
-      nodes {
-        id
-        name
-      }
-    }
-  }
-`
 
 export const NewAssessementManual = () => {
-  const { data } = useQuery<Query>(NEW_ASSESSEMENT_DATA_QUERY)
+  const [questions, setQuestions] = useState([
-  const axes = data?.axes.nodes
+    "Question 1", "Question 2", "Question 3", "Question 4",
-
+    "Question 5", "Question 6", "Question 7"])
-  const [questions, setQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([])
+  const [selectedQuestions, setSelectedQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([]) 
-
-  const [subjectsIds, setSubjectsIds] = useState<string[]>([])
-  const { register, control, watch } = useForm<NewAssessementManualForm>({
-    mode: 'onBlur'
-  })
-  
-
-  const addAxisForm = useForm<{ axisId: string }>()
-  
-  const handleAddAxis = (formData: { axisId: string }) => {
-    setSubjectsIds(prev => [...prev, formData.axisId])
-    addAxisForm.reset();
-  }
-
-  const handleRemoveAxis = (axisId: string) => {
-    setSubjectsIds(prev => prev.filter((axis => axis !== axisId)))
-  }
-
-  if (!axes?.length) return null
-
-  const notSelectedAxis: Axis[] = axes.filter((axis) => !subjectsIds.includes(axis.id))
-  const selectedAxis: Axis[] = axes.filter((axis) => subjectsIds.includes(axis.id))
 
   const addQuestion = (label: string, removeHandler: Function) => {
     const id: string = label.replace(/\s+/g, '')
-    if (!questions.find(q => q.id === id)) {
+    if (!selectedQuestions.find(q => q.id === id)) {
-      setQuestions(q => [...q, { id, label, removeHandler }])
+      setSelectedQuestions(q => [...q, { id, label, removeHandler }])
     }
   }
 
   const removeQuestion = (id: string) => {
-    setQuestions(q => q.filter(i => i.id !== id))
+    setSelectedQuestions(q => q.filter(i => i.id !== id))
+  }
+
+  const clearSelectedQuestions = () => {
+    setSelectedQuestions([])
   }
 
   return (
@@ -71,30 +32,12 @@ export const NewAssessementManual = () => {
         <BottomBar/>
         <div className="grid grid-cols-5 gap-4 mt-4 mx-4 pb-20">
           <FiltersSideBar/>
-          <div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6 pb-10">
+          <QuestionArea questions={questions}
-            <QuestionCard title="Question 1"
+            onAddQuestion={addQuestion} onRemoveQuestion={removeQuestion}/>
-              onAddQuestion={addQuestion}
+          <SelectedQuestionsSideBar
-              onRemoveQuestion={removeQuestion}/>
+            questions={selectedQuestions}
-            <QuestionCard title="Question 2"
+            onClearSelectedQuestions={clearSelectedQuestions}
-              onAddQuestion={addQuestion}
+            />
-              onRemoveQuestion={removeQuestion}/>
-            <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 questions={questions}/>
         </div>
     </>
   )

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

@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+import { QuestionCard } from "./QuestionCard";
+
+interface Props {
+    questions: string[]
+    onAddQuestion: Function,
+    onRemoveQuestion: Function
+}
+
+export const QuestionArea: FC<Props> = ({ questions, onAddQuestion, onRemoveQuestion }) => {
+    return (
+        <div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6">
+            {questions.map(question => 
+                <QuestionCard title={question}
+                    onAddQuestion={onAddQuestion}
+                    onRemoveQuestion={onRemoveQuestion}/>)}
+          </div>
+    )
+}

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

@@ -1,21 +1,32 @@
 import React, { FC, } from "react";
 import { SideBar } from "./SideBar";
 import { SelectedQuestionCard } from "./SelectedQuestionCard";
+import { Button } from "../../../components";
 
 type Props = {
     questions: {
         id: string, label: string, removeHandler: Function
     }[]
+    onClearSelectedQuestions: Function
 }
 
-export const SelectedQuestionsSideBar: FC<Props> = ({ questions }) => {
+export const SelectedQuestionsSideBar: FC<Props> = ({ questions, onClearSelectedQuestions }) => {
     return (
         <SideBar header="Questões Selecionadas">
             <div>
                 {questions.length ?
-                    questions.map(q => <SelectedQuestionCard
+                    <>
+                        <div>
+                            {questions.map(q => <SelectedQuestionCard
                                 key={q.id} id={q.id} label={q.label}
-                            onRemoveQuestion={q.removeHandler}/>) :
+                                onRemoveQuestion={q.removeHandler}/>)}
+                        </div>
+                        <div className="flex justify-center mt-6">
+                            <Button type="primary" onClick={() => onClearSelectedQuestions()}>
+                                Limpar Seleção
+                            </Button>
+                        </div>
+                    </> :
                         <h2 className="text-gray-700 mt-3">
                             Nenhuma questão selecionada
                         </h2>