95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
import React, { FC, useState } from 'react'
|
|
|
|
import { PageInfo, Query, Question, QuestionWhereInput, QuestionStatus } from '../../../__generated__/graphql-schema';
|
|
import { gql, useQuery } from '@apollo/client';
|
|
import { QuestionsList, QuestionsListFragments } from './QuestionsList'
|
|
import { useCurrentUser } from '../../../contexts';
|
|
|
|
const QUESTIONS_QUERY = gql`
|
|
${QuestionsListFragments}
|
|
query QuestionsQuery($first: Int!, $after: String, $before: String, $where: QuestionWhereInput) {
|
|
questions (
|
|
first: $first,
|
|
after: $after,
|
|
before: $before,
|
|
where: $where
|
|
) {
|
|
nodes {
|
|
... QuestionFields
|
|
}
|
|
}
|
|
}
|
|
`
|
|
const PAGE_SIZE = 4
|
|
|
|
type Props = {
|
|
title: string
|
|
where?: QuestionWhereInput
|
|
status?: QuestionStatus
|
|
}
|
|
|
|
export const QuestionsQuery: FC<Props> = ({ title, where, status }) => {
|
|
const { user } = useCurrentUser()
|
|
const [questions, setQuestions] = useState<Question[]>([])
|
|
const [pageInfo, setPageInfo] = useState<PageInfo | undefined>()
|
|
|
|
const updateQuestions = (queryResult: Query) => {
|
|
const { questions: questionConnection } = queryResult
|
|
|
|
setQuestions(questionConnection.nodes as Question[])
|
|
setPageInfo(questionConnection.pageInfo)
|
|
}
|
|
|
|
const whereInput = {
|
|
status,
|
|
userId: user?.id,
|
|
...where
|
|
}
|
|
|
|
const { fetchMore } = useQuery<Query>(QUESTIONS_QUERY, {
|
|
onCompleted: (response) => {
|
|
updateQuestions(response)
|
|
},
|
|
variables: {
|
|
first: PAGE_SIZE,
|
|
where: whereInput,
|
|
},
|
|
fetchPolicy: "network-only",
|
|
})
|
|
|
|
const onNextPageClick = () => {
|
|
fetchMore({
|
|
variables: {
|
|
first: PAGE_SIZE,
|
|
after: pageInfo?.endCursor,
|
|
},
|
|
}).then(({ data }) => {
|
|
updateQuestions(data)
|
|
})
|
|
}
|
|
|
|
const onPreviousPageClick = () => {
|
|
fetchMore({
|
|
variables: {
|
|
first: PAGE_SIZE,
|
|
before: pageInfo?.startCursor,
|
|
},
|
|
}).then(({ data }) => {
|
|
updateQuestions(data)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<QuestionsList
|
|
title={title}
|
|
questions={questions}
|
|
pagination={{
|
|
onNextPageClick: onNextPageClick,
|
|
hasNextPage: pageInfo?.hasNextPage ?? false,
|
|
hasPreviousPage: pageInfo?.hasPreviousPage ?? false,
|
|
onPreviousPageClick: onPreviousPageClick
|
|
}}
|
|
/>
|
|
)
|
|
};
|