add questions query

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -4,15 +4,60 @@ import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar"
 import { FiltersSideBar } from "./components/FiltersSideBar";
 import { BottomBar } from "./components/BottomBar";
 import { QuestionArea } from "./components/QuestionArea";
+import { gql, useQuery } from "@apollo/client";
+import { Query, Question } from "../../__generated__/graphql-schema";
+
+const QuestionFragments = gql`
+  fragment QuestionFields on Question {
+    id
+    authorship
+    authorshipYear
+    bloomTaxonomy
+    body
+    checkType
+    difficulty
+    status
+    subject {
+      axis {
+        name
+      }
+      category {
+        name
+      }
+      name
+    }
+  }
+`
+
+const QUESTIONS_QUERY = gql`
+  ${QuestionFragments}
+  query {
+    questions {
+      nodes {
+        ...QuestionFields
+      }
+    }
+  }
+`
 
 export const NewAssessementManual = () => {
-  const [questions, setQuestions] = useState([
-    "Question 1", "Question 2", "Question 3", "Question 4",
-    "Question 5", "Question 6", "Question 7"])
+  // const [questions, setQuestions] = useState([
+  //   "Question 1", "Question 2", "Question 3", "Question 4",
+  //   "Question 5", "Question 6", "Question 7"])
+  const [questions, setQuestions] = useState<Question[]>([])
   const [selectedQuestions, setSelectedQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([]) 
 
+  const { fetchMore } = useQuery<Query>(QUESTIONS_QUERY, {
+    onCompleted: (respose) => {
+      const { questions: questionConnection } = respose
+      setQuestions(questionConnection.nodes as Question[])
+      console.log(respose)
+    },
+    fetchPolicy: "network-only"
+  })
+
   const addQuestion = (label: string, removeHandler: Function) => {
-    const id: string = label.replace(/\s+/g, '')
+    const id: string = label.replace(/\s+/g, '_')
     if (!selectedQuestions.find(q => q.id === id)) {
       setSelectedQuestions(q => [...q, { id, label, removeHandler }])
     }
@@ -26,6 +71,8 @@ export const NewAssessementManual = () => {
     setSelectedQuestions([])
   }
 
+  fetchMore({})
+
   return (
     <>
         <Navigator home />

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

@@ -1,8 +1,9 @@
 import React, { FC } from "react";
 import { QuestionCard } from "./QuestionCard";
+import { Question } from "../../../__generated__/graphql-schema";
 
 interface Props {
-    questions: string[]
+    questions: Question[]
     onAddQuestion: Function,
     onRemoveQuestion: Function
 }
@@ -11,7 +12,7 @@ export const QuestionArea: FC<Props> = ({ questions, onAddQuestion, onRemoveQues
     return (
         <div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6">
             {questions.map(question => 
-                <QuestionCard title={question}
+                <QuestionCard key={question.id} question={question}
                     onAddQuestion={onAddQuestion}
                     onRemoveQuestion={onRemoveQuestion}/>)}
           </div>

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

@@ -1,18 +1,24 @@
 import React, { FC, useState } from "react";
 import { Button, Card } from "../../../components";
 import { QuestionCardField } from "./QuestionCardField";
+import { Question } from "../../../__generated__/graphql-schema";
+import { NodeId } from "../../../utils/graphql";
+import { BLOOM_TAXONOMY, CHECK_TYPE, DIFFICULTY } from "../../../utils/types";
 
 interface Props {
-    title: string
+    question: Question
     onAddQuestion: Function,
     onRemoveQuestion: Function
 }
 
-export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion }) => {
+export const QuestionCard: FC<Props> = ({ question, onAddQuestion, onRemoveQuestion }) => {
     const [collapsed, setCollapsed] = useState(false)
     
-    const questionId = title.replace(/\s+/g, '')
-    
+    const title = `Questão ${NodeId.decode(question.id).id}`
+    const difficulty = DIFFICULTY.find(item => item.value === question.difficulty)?.label
+    const bloomTaxonomy = BLOOM_TAXONOMY.find(item => item.value === question.bloomTaxonomy)?.label
+    const checkType = CHECK_TYPE.find(item => item.value === question.checkType)?.label
+
     const handleAddQuestion = () => {
         setButtonState({
             bg: 'bg-red-700', label: 'Remover', method: handleRemoveQuestion
@@ -24,7 +30,7 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
         setButtonState({
             bg: '', label: 'Adicionar', method: handleAddQuestion
         })
-        onRemoveQuestion(questionId)
+        onRemoveQuestion(question.id)
     }
 
     const [buttonState, setButtonState] = useState({
@@ -32,23 +38,21 @@ export const QuestionCard: FC<Props> = ({ title, onAddQuestion, onRemoveQuestion
     })
 
     return (
-        <div id={questionId}>
+        <div id={title.replace(/\s+/g, '_')}>
             <Card title={title} className="mb-5">
                 <div>
                     {!collapsed && <div className="grid grid-cols-2 gap-2">
-                        <QuestionCardField label="Grau de Dificuldade" value="Média"/>
-                        <QuestionCardField label="Categoria" value="Modelagem"/>
-                        <QuestionCardField label="Eixo de Formação" value="Infra Sistemas"/>
-                        <QuestionCardField label="Assunto" value="Fisica"/>
-                        <QuestionCardField label="Habilidade Cognitiva" value="Compreender"/>
-                        <QuestionCardField label="Tipo" value="Resposta Multipla"/>
-                        <QuestionCardField label="Autoria" value="UNIFESO" />
-                        <QuestionCardField label="Ano" value="2023"/>
+                        <QuestionCardField label="Grau de Dificuldade" value={difficulty}/>
+                        <QuestionCardField label="Categoria" value={question.subject?.category.name}/>
+                        <QuestionCardField label="Eixo de Formação" value={question.subject?.axis.name}/>
+                        <QuestionCardField label="Assunto" value={question.subject?.name}/>
+                        <QuestionCardField label="Habilidade Cognitiva" value={bloomTaxonomy}/>
+                        <QuestionCardField label="Tipo" value={checkType}/>
+                        <QuestionCardField label="Autoria" value={question.authorship} />
+                        <QuestionCardField label="Ano" value={question.authorshipYear}/>
                         <div className="col-span-2">
                             <span className="text-gray-700">Enunciado:</span>
-                            <div>
-                                ijodsjidsoifidfsiojsdfiojdsfiodfs ijdf iodsf iosd iojdf sijodsf iojdsf ioj sdfiojdf sioj dfsiojsdf iojdfs ijodsfijoidfsijodfsijdfsijo dsiofd ijosdfjiofdsidsfio
-                            </div>
+                            <div dangerouslySetInnerHTML={{__html: question.body ?? ''}}></div>
                         </div>
                     </div>}
                     <div className="mt-6">

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

@@ -1,15 +1,16 @@
 import React, { FC } from "react";
+import { Maybe } from "../../../__generated__/graphql-schema";
 
 interface Props {
     label: string,
-    value: string
+    value?: Maybe<string>
 }
 
 export const QuestionCardField: FC<Props> = ({ label, value }) => {
     return (
         <div>
             <span className="text-gray-700">{`${label}: `}</span>
-            <span>{value}</span>
+            <span>{value ?? ''}</span>
         </div>    
     )
 }