From 97df92292aeb5dedb205f5e228b2651278fd38dc Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Sun, 30 Oct 2022 21:38:24 +0800
Subject: [PATCH] [questions][feat] add load more button for all paginated
 queries

---
 .../questions/PaginationLoadMoreButton.tsx    | 25 +++++++++++++++++++
 .../answer/[answerId]/[answerSlug]/index.tsx  |  7 +++++-
 .../[questionId]/[questionSlug]/index.tsx     | 13 ++++++++--
 apps/portal/src/pages/questions/browse.tsx    | 20 ++++-----------
 4 files changed, 47 insertions(+), 18 deletions(-)
 create mode 100644 apps/portal/src/components/questions/PaginationLoadMoreButton.tsx

diff --git a/apps/portal/src/components/questions/PaginationLoadMoreButton.tsx b/apps/portal/src/components/questions/PaginationLoadMoreButton.tsx
new file mode 100644
index 00000000..0d6a55be
--- /dev/null
+++ b/apps/portal/src/components/questions/PaginationLoadMoreButton.tsx
@@ -0,0 +1,25 @@
+import type { UseInfiniteQueryResult } from 'react-query';
+import { Button } from '@tih/ui';
+
+export type PaginationLoadMoreButtonProps = {
+  query: UseInfiniteQueryResult;
+};
+
+export default function PaginationLoadMoreButton(
+  props: PaginationLoadMoreButtonProps,
+) {
+  const {
+    query: { hasNextPage, isFetchingNextPage, fetchNextPage },
+  } = props;
+  return (
+    <Button
+      disabled={!hasNextPage || isFetchingNextPage}
+      isLoading={isFetchingNextPage}
+      label={hasNextPage ? 'Load more' : 'Nothing more to load'}
+      variant="tertiary"
+      onClick={() => {
+        fetchNextPage();
+      }}
+    />
+  );
+}
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
index 74ffec20..5481240a 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
@@ -8,6 +8,7 @@ import { Button, TextArea } from '@tih/ui';
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
+import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
 import SortOptionsSelect from '~/components/questions/SortOptionsSelect';
 
 import { APP_TITLE } from '~/utils/questions/constants';
@@ -47,11 +48,12 @@ export default function QuestionPage() {
     { answerId: answerId as string },
   ]);
 
-  const { data: answerCommentsData } = trpc.useInfiniteQuery(
+  const answerCommentInfiniteQuery = trpc.useInfiniteQuery(
     [
       'questions.answers.comments.getAnswerComments',
       {
         answerId: answerId as string,
+        limit: 5,
         sortOrder: commentSortOrder,
         sortType: commentSortType,
       },
@@ -62,6 +64,8 @@ export default function QuestionPage() {
     },
   );
 
+  const { data: answerCommentsData } = answerCommentInfiniteQuery;
+
   const { mutate: addComment } = trpc.useMutation(
     'questions.answers.comments.user.create',
     {
@@ -168,6 +172,7 @@ export default function QuestionPage() {
                       />
                     )),
                 )}
+                <PaginationLoadMoreButton query={answerCommentInfiniteQuery} />
               </div>
             </div>
           </div>
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index 7daf8927..7cfe0533 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -9,6 +9,7 @@ import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem'
 import FullQuestionCard from '~/components/questions/card/question/FullQuestionCard';
 import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
+import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
 import SortOptionsSelect from '~/components/questions/SortOptionsSelect';
 
 import { APP_TITLE } from '~/utils/questions/constants';
@@ -80,10 +81,11 @@ export default function QuestionPage() {
 
   const utils = trpc.useContext();
 
-  const { data: commentData } = trpc.useInfiniteQuery(
+  const commentInfiniteQuery = trpc.useInfiniteQuery(
     [
       'questions.questions.comments.getQuestionComments',
       {
+        limit: 5,
         questionId: questionId as string,
         sortOrder: commentSortOrder,
         sortType: commentSortType,
@@ -95,6 +97,8 @@ export default function QuestionPage() {
     },
   );
 
+  const { data: commentData } = commentInfiniteQuery;
+
   const { mutate: addComment } = trpc.useMutation(
     'questions.questions.comments.user.create',
     {
@@ -106,10 +110,11 @@ export default function QuestionPage() {
     },
   );
 
-  const { data: answerData } = trpc.useInfiniteQuery(
+  const answerInfiniteQuery = trpc.useInfiniteQuery(
     [
       'questions.answers.getAnswers',
       {
+        limit: 5,
         questionId: questionId as string,
         sortOrder: answerSortOrder,
         sortType: answerSortType,
@@ -121,6 +126,8 @@ export default function QuestionPage() {
     },
   );
 
+  const { data: answerData } = answerInfiniteQuery;
+
   const { mutate: addAnswer } = trpc.useMutation(
     'questions.answers.user.create',
     {
@@ -256,6 +263,7 @@ export default function QuestionPage() {
                           />
                         )),
                     )}
+                    <PaginationLoadMoreButton query={commentInfiniteQuery} />
                   </div>
                 </div>
               </Collapsible>
@@ -311,6 +319,7 @@ export default function QuestionPage() {
                   />
                 )),
             )}
+            <PaginationLoadMoreButton query={answerInfiniteQuery} />
           </div>
         </div>
       </div>
diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx
index 9a62ba87..9565bc97 100644
--- a/apps/portal/src/pages/questions/browse.tsx
+++ b/apps/portal/src/pages/questions/browse.tsx
@@ -10,6 +10,7 @@ import { Button, SlideOut } from '@tih/ui';
 import QuestionOverviewCard from '~/components/questions/card/question/QuestionOverviewCard';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
 import FilterSection from '~/components/questions/filter/FilterSection';
+import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
 import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
 import CompanyTypeahead from '~/components/questions/typeahead/CompanyTypeahead';
 import LocationTypeahead from '~/components/questions/typeahead/LocationTypeahead';
@@ -145,12 +146,7 @@ export default function QuestionsBrowsePage() {
       : undefined;
   }, [selectedQuestionAge]);
 
-  const {
-    data: questionsQueryData,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-  } = trpc.useInfiniteQuery(
+  const questionsInfiniteQuery = trpc.useInfiniteQuery(
     [
       'questions.questions.getQuestionsByFilter',
       {
@@ -171,6 +167,8 @@ export default function QuestionsBrowsePage() {
     },
   );
 
+  const { data: questionsQueryData } = questionsInfiniteQuery;
+
   const questionCount = useMemo(() => {
     if (!questionsQueryData) {
       return undefined;
@@ -504,15 +502,7 @@ export default function QuestionsBrowsePage() {
                       );
                     }),
                 )}
-                <Button
-                  disabled={!hasNextPage || isFetchingNextPage}
-                  isLoading={isFetchingNextPage}
-                  label={hasNextPage ? 'Load more' : 'Nothing more to load'}
-                  variant="tertiary"
-                  onClick={() => {
-                    fetchNextPage();
-                  }}
-                />
+                <PaginationLoadMoreButton query={questionsInfiniteQuery} />
                 {questionCount === 0 && (
                   <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
                     <NoSymbolIcon className="h-6 w-6" />