From ce7d38e95bfc60697e03a6881e2098fe5af6f578 Mon Sep 17 00:00:00 2001
From: WindowsCrashed <windowscrashed0000@gmail.com>
Date: Fri, 25 Aug 2023 23:44:31 -0300
Subject: [PATCH] add filters query

---
 .../pages/assessment/NewAssessmentManual.tsx  |  12 +-
 .../assessment/components/FiltersSideBar.tsx  | 106 +++++++++++-------
 .../assessment/components/QuestionCard.tsx    |   5 +-
 .../components/SelectFilterField.tsx          |   2 +-
 4 files changed, 74 insertions(+), 51 deletions(-)

diff --git a/app/javascript/pages/assessment/NewAssessmentManual.tsx b/app/javascript/pages/assessment/NewAssessmentManual.tsx
index 4856477..b86cf40 100644
--- a/app/javascript/pages/assessment/NewAssessmentManual.tsx
+++ b/app/javascript/pages/assessment/NewAssessmentManual.tsx
@@ -41,17 +41,13 @@ const QUESTIONS_QUERY = gql`
 `
 
 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[]>([])
   const [selectedQuestions, setSelectedQuestions] = useState<{id: string, label: string, removeHandler: Function}[]>([]) 
 
-  const { fetchMore } = useQuery<Query>(QUESTIONS_QUERY, {
-    onCompleted: (respose) => {
-      const { questions: questionConnection } = respose
+  useQuery<Query>(QUESTIONS_QUERY, {
+    onCompleted: (response) => {
+      const { questions: questionConnection } = response
       setQuestions(questionConnection.nodes as Question[])
-      console.log(respose)
     },
     fetchPolicy: "network-only"
   })
@@ -71,8 +67,6 @@ export const NewAssessementManual = () => {
     setSelectedQuestions([])
   }
 
-  fetchMore({})
-
   return (
     <>
         <Navigator home />
diff --git a/app/javascript/pages/assessment/components/FiltersSideBar.tsx b/app/javascript/pages/assessment/components/FiltersSideBar.tsx
index b87b665..8cba45a 100644
--- a/app/javascript/pages/assessment/components/FiltersSideBar.tsx
+++ b/app/javascript/pages/assessment/components/FiltersSideBar.tsx
@@ -1,55 +1,83 @@
-import React, { FC, } from "react";
+import React, { FC, useState, } from "react";
 import { SideBar } from "./SideBar";
-import { SelectedQuestionCard } from "./SelectedQuestionCard";
 import { Button } from "../../../components";
 import { SelectFilterField } from "./SelectFilterField";
 import { RangeFilterField } from "./RangeFilterField";
+import { BLOOM_TAXONOMY, CHECK_TYPE, DIFFICULTY } from "../../../utils/types";
+import { gql, useQuery } from "@apollo/client";
+import { Axis, Category, Query, Subject } from "../../../__generated__/graphql-schema";
+
+const FILTERS_QUERY = gql`
+  query {
+    categories {
+        nodes {
+            id
+            name
+        }
+    }
+    axes {
+        nodes {
+            id
+            name
+        }
+    }
+    subjects {
+        nodes {
+            id
+            name
+        }
+    }
+  }
+`
 
 type Props = {
-    questions?: {
-        id: string, label: string, removeHandler: Function
-    }[]
+
 }
 
 export const FiltersSideBar: FC<Props> = () => {
+    const [categories, setCategories] = useState<Category[]>([])
+    const [axis, setAxis] = useState<Axis[]>([])
+    const [subjects, setSubjects] = useState<Subject[]>([])
+
+    const difficulties = DIFFICULTY.map(item => ({id: item.value, label: item.label}))
+    const bloomTaxonomyTypes = BLOOM_TAXONOMY.map(item => ({id: item.value, label: item.label}))
+    const checkTypes = CHECK_TYPE.map(item => ({id: item.value, label: item.label}))
+    const authorshipTypes = [
+        {id: 1, label: 'Própria'},
+        {id: 2, label: 'Outro'},
+    ]
+
+    useQuery<Query>(FILTERS_QUERY, {
+        onCompleted: (response) => {
+            const {
+                categories: categoriesConnection,
+                axes: axisConnection,
+                subjects: subjectConnection
+            } = response
+            setCategories(categoriesConnection.nodes as Category[])
+            setAxis(axisConnection.nodes as Axis[])
+            setSubjects(subjectConnection.nodes as Subject[])
+        },
+        fetchPolicy: "network-only"
+      })
+
     return (
         <SideBar header="Filtros">
             <div className="mt-3">
                 <form className="flex flex-col gap-4">
-                    <SelectFilterField label="Grau de Dificuldade:" options={[
-                        {id: 1, label: 'Fácil'},
-                        {id: 2, label: 'Média'},
-                        {id: 3, label: 'Difícil'}
-                    ]}/>
-                    <SelectFilterField label="Categoria:" options={[
-                        {id: 1, label: 'Conhecimentos Básicos'},
-                        {id: 2, label: 'Redes e Sistemas Computacionais'},
-                        {id: 3, label: 'Modelagem e Simulacao'}
-                    ]}/>
-                    <SelectFilterField label="Eixo de Formação:" options={[
-                        {id: 1, label: 'Infraestrutura de Sistemas Computacionais'},
-                        {id: 2, label: 'Sistemas de Software'},
-                        {id: 3, label: 'Algoritmos de Alto Desempenho'}
-                    ]}/>
-                    <SelectFilterField label="Assunto:" options={[
-                        {id: 1, label: 'Cálculo'},
-                        {id: 2, label: 'Pesquisa Operacional'},
-                        {id: 3, label: 'Sistemas Digitais'}
-                    ]}/>
-                    <SelectFilterField label="Habilidade Cognitiva:" options={[
-                        {id: 1, label: 'Recordar'},
-                        {id: 2, label: 'Compreender'},
-                        {id: 3, label: 'Criar'}
-                    ]}/>
-                    <SelectFilterField label="Tipo:" options={[
-                        {id: 1, label: 'Resposta Multipla'},
-                        {id: 2, label: 'Lacuna'},
-                        {id: 3, label: 'Foco Negativo'}
-                    ]}/>
-                    <SelectFilterField label="Autoria:" options={[
-                        {id: 1, label: 'Própria'},
-                        {id: 2, label: 'Outro'},
-                    ]}/>
+                    <SelectFilterField label="Grau de Dificuldade:" options={difficulties}/>
+                    <SelectFilterField label="Categoria:" options={
+                            categories.map(item => ({id: item.id, label: item.name}))
+                        }/>
+                    <SelectFilterField label="Eixo de Formação:" options={
+                            axis.map(item => ({id: item.id, label: item.name}))   
+                        }/>
+                    <SelectFilterField label="Assunto:" options={
+                            subjects.map(item => ({id: item.id, label: item.name}))   
+                        }/>
+                    <SelectFilterField label="Habilidade Cognitiva:" options={bloomTaxonomyTypes}/>
+                    <SelectFilterField label="Tipo:" options={checkTypes}/>
+                    <SelectFilterField label="Autoria:" options={authorshipTypes}/>
                     <RangeFilterField label="Ano:"/>  
                     <div className="w-full flex flex-col mt-2 gap-3">
                         <Button type="primary" htmlType="submit">
diff --git a/app/javascript/pages/assessment/components/QuestionCard.tsx b/app/javascript/pages/assessment/components/QuestionCard.tsx
index 494ceb3..e770e81 100644
--- a/app/javascript/pages/assessment/components/QuestionCard.tsx
+++ b/app/javascript/pages/assessment/components/QuestionCard.tsx
@@ -15,6 +15,7 @@ export const QuestionCard: FC<Props> = ({ question, onAddQuestion, onRemoveQuest
     const [collapsed, setCollapsed] = useState(false)
     
     const title = `Questão ${NodeId.decode(question.id).id}`
+    const htmlId = title.replace(/\s+/g, '_')
     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
@@ -30,7 +31,7 @@ export const QuestionCard: FC<Props> = ({ question, onAddQuestion, onRemoveQuest
         setButtonState({
             bg: '', label: 'Adicionar', method: handleAddQuestion
         })
-        onRemoveQuestion(question.id)
+        onRemoveQuestion(htmlId)
     }
 
     const [buttonState, setButtonState] = useState({
@@ -38,7 +39,7 @@ export const QuestionCard: FC<Props> = ({ question, onAddQuestion, onRemoveQuest
     })
 
     return (
-        <div id={title.replace(/\s+/g, '_')}>
+        <div id={htmlId}>
             <Card title={title} className="mb-5">
                 <div>
                     {!collapsed && <div className="grid grid-cols-2 gap-2">
diff --git a/app/javascript/pages/assessment/components/SelectFilterField.tsx b/app/javascript/pages/assessment/components/SelectFilterField.tsx
index 3b5891d..3a33852 100644
--- a/app/javascript/pages/assessment/components/SelectFilterField.tsx
+++ b/app/javascript/pages/assessment/components/SelectFilterField.tsx
@@ -1,7 +1,7 @@
 import React, { FC, } from "react";
 
 type Props = {
-    options: {id: number, label: string,}[]
+    options: {id: number | string, label: string,}[]
     label: string
 }