Merge pull request #1916 from codeforboston/main

Deploy to PROD 8/17/25

Author: Mephistic

.all-contributorsrc

@@ -722,6 +722,24 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "yasminekarni",
+      "name": "yasminekarni",
+      "avatar_url": "https://avatars.githubusercontent.com/u/47721405?v=4",
+      "profile": "https://github.com/yasminekarni",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "chaoyi09",
+      "name": "Chaoyi Jiang",
+      "avatar_url": "https://avatars.githubusercontent.com/u/117859839?v=4",
+      "profile": "http://chaoyijiang.com",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitType": "docs"

.github/actions/setup-repo/action.yml

@@ -4,7 +4,7 @@ inputs:
   node-version:
     description: "Version used by actions/setup-node"
     required: true
-    default: "18"
+    default: "20"
   yarn-version:
     description: "Version of Yarn used to install dependencies"
     required: true

.github/workflows/deploy-backend-dev.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Setup Build Environment
         uses: ./.github/actions/setup-repo
       - name: Build and Deploy to Firebase
-        uses: w9jds/firebase-action@v13.0.2
+        uses: w9jds/firebase-action@v13.18.0
         with:
           args: deploy --force --only firestore,functions:maple,storage
         env:

.github/workflows/deploy-prod.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Build Environment
         uses: ./.github/actions/setup-repo
       - name: Build and Deploy to Firebase
-        uses: w9jds/firebase-action@v13.0.2
+        uses: w9jds/firebase-action@v13.18.0
         with:
           args: deploy --force --only firestore,functions:maple,storage
         env:

README.md

@@ -4,6 +4,7 @@ import { ChangeEventHandler, useCallback, useEffect, useState } from "react"
 import { Button, Col, Form, InputGroup, Row, Spinner } from "../bootstrap"
 import { AttachmentInfo, UseDraftTestimonyAttachment } from "../db"
 import { External } from "../links"
+import { useTranslation } from "next-i18next"
 
 export function Attachment({
   attachment,
@@ -65,11 +66,10 @@ const Label = ({
 }: {
   attachment: UseDraftTestimonyAttachment
 }) => {
+  const { t } = useTranslation("attachment")
   return (
     <Form.Label>
-      <span className="me-1">
-        (Optional) Provide your testimony as a file attachment
-      </span>
+      <span className="me-1">{t("provide_testimony_as_file")}</span>
       {status === "loading" && <Spinner animation="border" size="sm" />}
       {status === "error" && (
         <FontAwesomeIcon icon={faExclamationTriangle} className="text-danger" />
@@ -85,13 +85,10 @@ export const AttachmentLink = ({
   attachment: AttachmentInfo
   className?: string
 }) => {
-  const linkLabel = [
-    "Attached",
-    name ?? "Testimony",
-    size ? formatSize(size) : null
-  ]
-    .filter(Boolean)
-    .join(" - ")
+  const { t } = useTranslation("attachment")
+  const linkLabelParts = [t("attached"), name ?? t("testimony")]
+  if (size) linkLabelParts.push(formatSize(size))
+  const linkLabel = linkLabelParts.join(" - ")
   return (
     <External className={className} href={url}>
       {linkLabel}
@@ -106,13 +103,10 @@ const Attached = ({
   attachment: UseDraftTestimonyAttachment
   confirmRemove: boolean
 }) => {
+  const { t } = useTranslation("attachment")
   const { url, name, size, id, remove, status } = attachment
   const onClick = () => {
-    if (
-      !confirmRemove ||
-      confirm("Are you sure you want to remove your attachment?")
-    )
-      remove()
+    if (!confirmRemove || confirm(t("confirm_remove"))) remove()
   }
   return (
     <Row className="align-items-center">
@@ -128,7 +122,7 @@ const Attached = ({
           onClick={onClick}
           disabled={status === "loading"}
         >
-          Remove
+          {t("remove")}
         </Button>
       </Col>
     </Row>
@@ -140,19 +134,18 @@ const StatusMessage = ({
 }: {
   attachment: UseDraftTestimonyAttachment
 }) => {
+  const { t } = useTranslation("attachment")
   if (status === "error") {
     let message: string
     if (error?.code === "storage/unauthorized") {
-      message = "Invalid file. Please upload PDF's less than 10 MB"
+      message = t("error.storage_unauthorized")
     } else {
-      message = "Something went wrong. Please try again."
+      message = t("error.generic")
     }
 
     return <Form.Text className="text-danger">{message}</Form.Text>
   } else if (status === "ok" && !id) {
-    return (
-      <Form.Text>Files must be PDF documents and less than 10 MB.</Form.Text>
-    )
+    return <Form.Text>{t("file_requirements")}</Form.Text>
   } else {
     return null
   }

components/CommentModal/Attachment.tsx

@@ -25,7 +25,7 @@ import {
 } from "./StyledEditProfileComponents"
 import { TestimoniesTab } from "./TestimoniesTab"
 import { useFlags } from "components/featureFlags"
-import LoginPage from "components/Login/login"
+import LoginPage from "components/Login/Login"
 import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
 
 const tabTitle = ["about-you", "testimonies", "following"] as const
@@ -137,7 +137,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/EditProfilePage.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[] = []
@@ -44,12 +48,12 @@ export function FollowingTab({ className }: { className?: string }) {
     })
     if (billsFollowing.length === 0 && billList.length != 0) {
       setBillsFollowing(billList)
-    }
+    } // this limits the code from falling into an infinite loop
   }, [subscriptionRef, uid, billsFollowing])
 
   useEffect(() => {
     uid ? billsFollowingQuery() : null
-  })
+  }, [uid, billsFollowingQuery])
 
   const orgsFollowingQuery = useCallback(async () => {
     if (!subscriptionRef) return // handle the case where subscriptionRef is null
@@ -67,7 +71,7 @@ export function FollowingTab({ className }: { className?: string }) {
 
     if (usersFollowing.length === 0 && usersList.length != 0) {
       setUsersFollowing(usersList)
-    }
+    } // this limits the code from falling into an infinite loop
   }, [subscriptionRef, uid, usersFollowing])
 
   const fetchFollowedItems = useCallback(async () => {
@@ -104,6 +108,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 +131,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 +140,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 +168,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/FollowingTab.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>