From 69b5812386ee600e817251c67a8c41b38dadb02a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <geonizeli@hey.com>
Date: Mon, 17 Oct 2022 10:54:24 -0300
Subject: [PATCH] show only valid options on question year filter

---
 app/javascript/pages/question/List/List.tsx   | 17 +++++++++--
 .../QuestionsAuthorshipTypeFilter.tsx         |  8 +++--
 .../List/QuestionFilter/QuestionsFilter.tsx   | 30 ++++++++++---------
 .../QuestionsFilterProvider.tsx               | 14 ++++++---
 4 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/app/javascript/pages/question/List/List.tsx b/app/javascript/pages/question/List/List.tsx
index 0cea382..776da6c 100644
--- a/app/javascript/pages/question/List/List.tsx
+++ b/app/javascript/pages/question/List/List.tsx
@@ -1,16 +1,29 @@
-import React, { FC, useState } from "react";
+import React, { useState } from "react";
 import { FaFilter } from "react-icons/fa";
 
 import { Navigator } from "../../../components";
 import { QuestionsFilter } from "./QuestionFilter";
 import { QuestionsPainel } from "./QuestionsPainel";
 import { FiltersProvider } from './QuestionFilter/QuestionsFilterProvider'
+import { gql, useQuery } from "@apollo/client";
+import { Query } from "../../../__generated__/graphql-schema";
+
+const QuestionListQuery = gql`
+  query DashboardQuery {
+    questionFilterOptions {
+      years
+    }
+  }
+`
 
 export const List = () => {
+  const { data } = useQuery<Query>(QuestionListQuery)
   const [filterOpen, setFilterOpen] = useState(false);
 
   return (
-    <FiltersProvider>
+    <FiltersProvider
+      questionFilterOptions={data?.questionFilterOptions}
+    >
       <Navigator newQuestion={true}>
         <li className={"hover:text-white ml-auto"}>
           <button onClick={() => setFilterOpen(true)} className="flex">
diff --git a/app/javascript/pages/question/List/QuestionFilter/QuestionsAuthorshipTypeFilter.tsx b/app/javascript/pages/question/List/QuestionFilter/QuestionsAuthorshipTypeFilter.tsx
index a211a40..20f49c5 100644
--- a/app/javascript/pages/question/List/QuestionFilter/QuestionsAuthorshipTypeFilter.tsx
+++ b/app/javascript/pages/question/List/QuestionFilter/QuestionsAuthorshipTypeFilter.tsx
@@ -10,10 +10,12 @@ type Props = {
 
 const CURRENT_YEAR = new Date().getFullYear()
 
-const YEARS = range(1900, CURRENT_YEAR + 1).reverse()
+const YEARS = range(1900, CURRENT_YEAR + 1).reverse().map(toString)
 
 export const QuestionsAuthorshipTypeFilter: FC<Props> = ({ register, setChanged }) => {
-  const { where } = useFiltersProvider()
+  const { where, questionFilterOptions } = useFiltersProvider()
+
+  const yearOptions = questionFilterOptions?.years ?? YEARS
 
   return (
     <div>
@@ -24,7 +26,7 @@ export const QuestionsAuthorshipTypeFilter: FC<Props> = ({ register, setChanged
         onClick={() => setChanged(true)}
       >
         <option value="" />
-        {YEARS.map((year) => (
+        {yearOptions.map((year) => (
           <option
             key={`questionYear-${year}`}
             value={year}
diff --git a/app/javascript/pages/question/List/QuestionFilter/QuestionsFilter.tsx b/app/javascript/pages/question/List/QuestionFilter/QuestionsFilter.tsx
index 9a01aee..445e41f 100644
--- a/app/javascript/pages/question/List/QuestionFilter/QuestionsFilter.tsx
+++ b/app/javascript/pages/question/List/QuestionFilter/QuestionsFilter.tsx
@@ -93,20 +93,22 @@ export const QuestionsFilter: FC<Props> = ({ isOpen, setIsOpen }) => {
       return obj;
     };
 
-    setWhere({
-      unifesoAuthorship: inputs.authorship === 'null' ? null : inputs.authorship === 'true',
-      ...removeKeysWithUndefiend({
-        checkType: valuesFromCheckType.length ? valuesFromCheckType : undefined,
-        bloomTaxonomy: valuesFromBloomTaxonomy.length
-          ? valuesFromBloomTaxonomy
-          : undefined,
-        difficulty: valuesFromDifficulty.length
-          ? valuesFromDifficulty
-          : undefined,
-        subjectId: inputs.subjectId === "" ? undefined : inputs.subjectId,
-        authorshipYear: inputs.authorshipYear === "" ? undefined : [inputs.authorshipYear],
-      }),
-    });
+    const unifesoAuthorship: boolean | undefined = typeof inputs.authorship === 'undefined' ? undefined : (
+      inputs.authorship === 'true'
+    )
+
+    setWhere(removeKeysWithUndefiend({
+      unifesoAuthorship,
+      checkType: valuesFromCheckType.length ? valuesFromCheckType : undefined,
+      bloomTaxonomy: valuesFromBloomTaxonomy.length
+        ? valuesFromBloomTaxonomy
+        : undefined,
+      difficulty: valuesFromDifficulty.length
+        ? valuesFromDifficulty
+        : undefined,
+      subjectId: inputs.subjectId === "" ? undefined : inputs.subjectId,
+      authorshipYear: inputs.authorshipYear === "" ? undefined : [inputs.authorshipYear],
+    }));
 
     setChanged(false);
     setIsOpen(false);
diff --git a/app/javascript/pages/question/List/QuestionFilter/QuestionsFilterProvider.tsx b/app/javascript/pages/question/List/QuestionFilter/QuestionsFilterProvider.tsx
index c0033c2..17c132e 100644
--- a/app/javascript/pages/question/List/QuestionFilter/QuestionsFilterProvider.tsx
+++ b/app/javascript/pages/question/List/QuestionFilter/QuestionsFilterProvider.tsx
@@ -2,17 +2,17 @@ import React, {
   createContext,
   useState,
   useMemo,
-  FC,
   useContext,
   Dispatch,
   SetStateAction,
 } from 'react'
 
-import { QuestionWhereInput } from '../../../../__generated__/graphql-schema'
+import { Query, QuestionWhereInput } from '../../../../__generated__/graphql-schema'
 
 type ProviderValue = {
   where: QuestionWhereInput
   setWhere: Dispatch<SetStateAction<QuestionWhereInput>>
+  questionFilterOptions?: Query['questionFilterOptions']
 }
 
 const FiltersContext = createContext<ProviderValue | null>(null)
@@ -27,12 +27,18 @@ export const useFiltersProvider = () => {
   return context
 }
 
-export const FiltersProvider: FC = ({ children }) => {
+type FiltersProviderProps = {
+  children: React.ReactNode
+  questionFilterOptions?: Query['questionFilterOptions']
+}
+
+export const FiltersProvider = ({ children, questionFilterOptions }: FiltersProviderProps) => {
   const [where, setWhere] = useState<QuestionWhereInput>({})
 
-  const providerValue = useMemo(() => ({ where, setWhere }), [
+  const providerValue = useMemo(() => ({ where, setWhere, questionFilterOptions }), [
     where,
     setWhere,
+    questionFilterOptions,
   ])
 
   return (