show only valid options on question year filter

This commit is contained in:
2022-10-17 10:54:24 -03:00
parent f14eeb614d
commit 69b5812386
4 changed files with 46 additions and 23 deletions

View File

@@ -1,16 +1,29 @@
import React, { FC, useState } from "react"; import React, { useState } from "react";
import { FaFilter } from "react-icons/fa"; import { FaFilter } from "react-icons/fa";
import { Navigator } from "../../../components"; import { Navigator } from "../../../components";
import { QuestionsFilter } from "./QuestionFilter"; import { QuestionsFilter } from "./QuestionFilter";
import { QuestionsPainel } from "./QuestionsPainel"; import { QuestionsPainel } from "./QuestionsPainel";
import { FiltersProvider } from './QuestionFilter/QuestionsFilterProvider' 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 = () => { export const List = () => {
const { data } = useQuery<Query>(QuestionListQuery)
const [filterOpen, setFilterOpen] = useState(false); const [filterOpen, setFilterOpen] = useState(false);
return ( return (
<FiltersProvider> <FiltersProvider
questionFilterOptions={data?.questionFilterOptions}
>
<Navigator newQuestion={true}> <Navigator newQuestion={true}>
<li className={"hover:text-white ml-auto"}> <li className={"hover:text-white ml-auto"}>
<button onClick={() => setFilterOpen(true)} className="flex"> <button onClick={() => setFilterOpen(true)} className="flex">

View File

@@ -10,10 +10,12 @@ type Props = {
const CURRENT_YEAR = new Date().getFullYear() 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 }) => { export const QuestionsAuthorshipTypeFilter: FC<Props> = ({ register, setChanged }) => {
const { where } = useFiltersProvider() const { where, questionFilterOptions } = useFiltersProvider()
const yearOptions = questionFilterOptions?.years ?? YEARS
return ( return (
<div> <div>
@@ -24,7 +26,7 @@ export const QuestionsAuthorshipTypeFilter: FC<Props> = ({ register, setChanged
onClick={() => setChanged(true)} onClick={() => setChanged(true)}
> >
<option value="" /> <option value="" />
{YEARS.map((year) => ( {yearOptions.map((year) => (
<option <option
key={`questionYear-${year}`} key={`questionYear-${year}`}
value={year} value={year}

View File

@@ -93,9 +93,12 @@ export const QuestionsFilter: FC<Props> = ({ isOpen, setIsOpen }) => {
return obj; return obj;
}; };
setWhere({ const unifesoAuthorship: boolean | undefined = typeof inputs.authorship === 'undefined' ? undefined : (
unifesoAuthorship: inputs.authorship === 'null' ? null : inputs.authorship === 'true', inputs.authorship === 'true'
...removeKeysWithUndefiend({ )
setWhere(removeKeysWithUndefiend({
unifesoAuthorship,
checkType: valuesFromCheckType.length ? valuesFromCheckType : undefined, checkType: valuesFromCheckType.length ? valuesFromCheckType : undefined,
bloomTaxonomy: valuesFromBloomTaxonomy.length bloomTaxonomy: valuesFromBloomTaxonomy.length
? valuesFromBloomTaxonomy ? valuesFromBloomTaxonomy
@@ -105,8 +108,7 @@ export const QuestionsFilter: FC<Props> = ({ isOpen, setIsOpen }) => {
: undefined, : undefined,
subjectId: inputs.subjectId === "" ? undefined : inputs.subjectId, subjectId: inputs.subjectId === "" ? undefined : inputs.subjectId,
authorshipYear: inputs.authorshipYear === "" ? undefined : [inputs.authorshipYear], authorshipYear: inputs.authorshipYear === "" ? undefined : [inputs.authorshipYear],
}), }));
});
setChanged(false); setChanged(false);
setIsOpen(false); setIsOpen(false);

View File

@@ -2,17 +2,17 @@ import React, {
createContext, createContext,
useState, useState,
useMemo, useMemo,
FC,
useContext, useContext,
Dispatch, Dispatch,
SetStateAction, SetStateAction,
} from 'react' } from 'react'
import { QuestionWhereInput } from '../../../../__generated__/graphql-schema' import { Query, QuestionWhereInput } from '../../../../__generated__/graphql-schema'
type ProviderValue = { type ProviderValue = {
where: QuestionWhereInput where: QuestionWhereInput
setWhere: Dispatch<SetStateAction<QuestionWhereInput>> setWhere: Dispatch<SetStateAction<QuestionWhereInput>>
questionFilterOptions?: Query['questionFilterOptions']
} }
const FiltersContext = createContext<ProviderValue | null>(null) const FiltersContext = createContext<ProviderValue | null>(null)
@@ -27,12 +27,18 @@ export const useFiltersProvider = () => {
return context 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 [where, setWhere] = useState<QuestionWhereInput>({})
const providerValue = useMemo(() => ({ where, setWhere }), [ const providerValue = useMemo(() => ({ where, setWhere, questionFilterOptions }), [
where, where,
setWhere, setWhere,
questionFilterOptions,
]) ])
return ( return (