show only valid options on question year filter
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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 (
|
||||||
|
|||||||
Reference in New Issue
Block a user