feat: add pagination to Edit Profile page sections

Author: chaoyi09

components/EditProfilePage/EditProfilePage.tsx

@@ -134,7 +134,9 @@ export function EditProfileForm({
       content: (
         <TestimoniesTab
           publishedTestimonies={publishedTestimonies.items.result ?? []}
-          draftTestimonies={draftTestimonies.result ?? []}
+          publishedTestimoniesPagination={publishedTestimonies.pagination}
+          draftTestimonies={draftTestimonies.items.result ?? []}
+          draftTestimoniesPagination={draftTestimonies.pagination}
         />
       )
     },

components/EditProfilePage/FollowingTab.tsx

@@ -1,5 +1,4 @@
 import { collection, getDocs, query, where } from "firebase/firestore"
-import { getFunctions } from "firebase/functions"
 import { useTranslation } from "next-i18next"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useAuth } from "../auth"
@@ -10,6 +9,7 @@ import UnfollowItem, { UnfollowModalConfig } from "./UnfollowModal"
 import { FollowedItem } from "./FollowingTabComponents"
 import { BillElement, UserElement } from "./FollowingTabComponents"
 import { deleteItem } from "components/shared/FollowingQueries"
+import { PaginationButtons } from "../table"
 
 export function FollowingTab({ className }: { className?: string }) {
   const { user } = useAuth()
@@ -29,6 +29,10 @@ export function FollowingTab({ className }: { className?: string }) {
   const [billsFollowing, setBillsFollowing] = useState<BillElement[]>([])
   const [usersFollowing, setUsersFollowing] = useState<UserElement[]>([])
 
+  const [currentBillsPage, setCurrentBillsPage] = useState(1)
+  const [currentUsersPage, setCurrentUsersPage] = useState(1)
+  const itemsPerPage = 10
+
   const billsFollowingQuery = useCallback(async () => {
     if (!subscriptionRef) return // handle the case where subscriptionRef is null
     const billList: BillElement[] = []
@@ -42,14 +46,12 @@ export function FollowingTab({ className }: { className?: string }) {
       // doc.data() is never undefined for query doc snapshots
       billList.push(doc.data().billLookup)
     })
-    if (billsFollowing.length === 0 && billList.length != 0) {
-      setBillsFollowing(billList)
-    }
-  }, [subscriptionRef, uid, billsFollowing])
+    setBillsFollowing(billList)
+  }, [subscriptionRef, uid])
 
   useEffect(() => {
     uid ? billsFollowingQuery() : null
-  })
+  }, [uid, billsFollowingQuery])
 
   const orgsFollowingQuery = useCallback(async () => {
     if (!subscriptionRef) return // handle the case where subscriptionRef is null
@@ -104,6 +106,21 @@ export function FollowingTab({ className }: { className?: string }) {
     setUnfollow(null)
   }
 
+  const getPaginatedBills = () => {
+    const startIndex = (currentBillsPage - 1) * itemsPerPage
+    const endIndex = startIndex + itemsPerPage
+    return billsFollowing.slice(startIndex, endIndex)
+  }
+
+  const getPaginatedUsers = () => {
+    const startIndex = (currentUsersPage - 1) * itemsPerPage
+    const endIndex = startIndex + itemsPerPage
+    return usersFollowing.slice(startIndex, endIndex)
+  }
+
+  const totalBillsPages = Math.ceil(billsFollowing.length / itemsPerPage)
+  const totalUsersPages = Math.ceil(usersFollowing.length / itemsPerPage)
+
   const { t } = useTranslation("editProfile")
 
   return (
@@ -112,7 +129,7 @@ export function FollowingTab({ className }: { className?: string }) {
         <div className={`mx-4 mt-3 d-flex flex-column gap-3`}>
           <Stack>
             <h2>{t("follow.bills")}</h2>
-            {billsFollowing.map((element: BillElement, index: number) => (
+            {getPaginatedBills().map((element: BillElement, index: number) => (
               <FollowedItem
                 key={index}
                 index={index}
@@ -121,14 +138,26 @@ export function FollowingTab({ className }: { className?: string }) {
                 type={"bill"}
               />
             ))}
+            {billsFollowing.length > 0 && (
+              <PaginationButtons
+                pagination={{
+                  currentPage: currentBillsPage,
+                  hasNextPage: currentBillsPage < totalBillsPages,
+                  hasPreviousPage: currentBillsPage > 1,
+                  nextPage: () => setCurrentBillsPage(prev => prev + 1),
+                  previousPage: () => setCurrentBillsPage(prev => prev - 1),
+                  itemsPerPage
+                }}
+              />
+            )}
           </Stack>
         </div>
       </TitledSectionCard>
       <TitledSectionCard className={`${className}`}>
         <div className={`mx-4 mt-3 d-flex flex-column gap-3`}>
           <Stack>
             <h2 className="pb-3">{t("follow.orgs")}</h2>
-            {usersFollowing.map((element: UserElement, index: number) => (
+            {getPaginatedUsers().map((element: UserElement, index: number) => (
               <FollowedItem
                 key={index}
                 index={index}
@@ -137,6 +166,18 @@ export function FollowingTab({ className }: { className?: string }) {
                 type={"org"}
               />
             ))}
+            {usersFollowing.length > 0 && (
+              <PaginationButtons
+                pagination={{
+                  currentPage: currentUsersPage,
+                  hasNextPage: currentUsersPage < totalUsersPages,
+                  hasPreviousPage: currentUsersPage > 1,
+                  nextPage: () => setCurrentUsersPage(prev => prev + 1),
+                  previousPage: () => setCurrentUsersPage(prev => prev - 1),
+                  itemsPerPage
+                }}
+              />
+            )}
           </Stack>
         </div>
       </TitledSectionCard>

components/EditProfilePage/TestimoniesTab.tsx

@@ -4,16 +4,21 @@ import { TitledSectionCard } from "../shared"
 import { TestimonyItem } from "components/TestimonyCard/TestimonyItem"
 import { SortTestimonyDropDown } from "components/TestimonyCard/SortTestimonyDropDown"
 import { TestimonyFAQ } from "./TestimonyFAQ"
-import { Testimony } from "../db"
+import { Testimony, DraftTestimony, Pagination } from "../db"
 import { useTranslation } from "next-i18next"
+import { PaginationButtons } from "../table"
 
 export const TestimoniesTab = ({
   publishedTestimonies,
+  publishedTestimoniesPagination,
   draftTestimonies,
+  draftTestimoniesPagination,
   className
 }: {
   publishedTestimonies: Testimony[]
-  draftTestimonies: Testimony[]
+  publishedTestimoniesPagination?: Pagination
+  draftTestimonies: DraftTestimony[]
+  draftTestimoniesPagination?: Pagination
   className?: string
 }) => {
   const [orderBy, setOrderBy] = useState<string>()
@@ -58,17 +63,23 @@ export const TestimoniesTab = ({
                 onProfilePage={true}
               />
             ))}
+            {publishedTestimoniesPagination && (
+              <PaginationButtons pagination={publishedTestimoniesPagination} />
+            )}
           </TitledSectionCard>
           <TitledSectionCard className="mt-3 mb-4">
             <h2>{t("testimonies.draft")}</h2>
             {draftTestimonies.map(t => (
               <TestimonyItem
-                key={t.authorUid + t.billId + t.publishedAt}
-                testimony={t}
+                key={t.billId + t.court + t.position}
+                testimony={t as any}
                 isUser={true}
                 onProfilePage={true}
               />
             ))}
+            {draftTestimoniesPagination && (
+              <PaginationButtons pagination={draftTestimoniesPagination} />
+            )}
           </TitledSectionCard>
         </Col>
         <Col>

components/db/testimony/useDraftTestimonyListing.ts

@@ -1,29 +1,56 @@
-import { getDocs, collection } from "firebase/firestore"
+import {
+  getDocs,
+  collection,
+  limit,
+  startAfter,
+  orderBy
+} from "firebase/firestore"
 import { firestore } from "../../firebase"
 import { nullableQuery } from "../common"
-import { Testimony } from "./types"
-import { useAsync } from "react-async-hook"
+import { DraftTestimony } from "./types"
+import { createTableHook } from "../createTableHook"
+
+type Refinement = {
+  uid: string
+}
+
+const initialRefinement = (uid: string): Refinement => ({
+  uid
+})
+
+const useTable = createTableHook<DraftTestimony, Refinement, unknown>({
+  getPageKey: i => i.billId,
+  getItems: listTestimony,
+  name: "draft testimony"
+})
 
 export type UseDraftTestimonyListing = ReturnType<
   typeof useDraftTestimonyListing
 >
 export function useDraftTestimonyListing({ uid }: { uid: string }) {
-  const items = useAsync(
-    () => {
-      return listTestimony(uid)
-    },
-    [uid],
-    {
-      onSuccess: data => data
-    }
+  const { pagination, items, refine, refinement } = useTable(
+    initialRefinement(uid)
   )
 
-  return items
+  return {
+    pagination,
+    items,
+    refine
+  }
 }
 
-async function listTestimony(uid: string): Promise<Testimony[]> {
+async function listTestimony(
+  refinement: Refinement,
+  limitCount: number,
+  startAfterKey: unknown | null
+): Promise<DraftTestimony[]> {
   const result = await getDocs(
-    nullableQuery(collection(firestore, `/users/${uid}/draftTestimony`))
+    nullableQuery(
+      collection(firestore, `/users/${refinement.uid}/draftTestimony`),
+      orderBy("billId"), // Draft doesn't have publishedAt, use billId instead
+      limit(limitCount),
+      startAfterKey !== null && startAfter(startAfterKey)
+    )
   )
-  return result.docs.map(d => d.data() as Testimony)
+  return result.docs.map(d => d.data() as DraftTestimony)
 }

public/locales/en/editProfile.json

@@ -23,8 +23,8 @@
     "error": "An error occured. Please refresh the page."
   },
   "follow": {
-    "bills": "Bills You Follow",
-    "orgs": "Users You Follow",
+    "bills": "Bills I Follow",
+    "orgs": "Users I Follow",
     "unfollow": "Unfollow"
   },
   "confirmation": {