move move frontend to progress-test

app/javascript/pages/question/List/QuestionsQuery.tsx

@@ -0,0 +1,95 @@
+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
+      }}
+    />
+  )
+};