fix: avoid conditional hook rendering

2026-01-09 12:27:59 -05:00 · 2025-01-15 14:05:02 -03:00
parent 5770e77c62
commit e9e8caa221
7 changed files with 30 additions and 47 deletions
--- a/pages/[fund]/account/my-donations.tsx
+++ b/pages/[fund]/account/my-donations.tsx
@@ -3,13 +3,7 @@ import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import Head from 'next/head'

-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogFooter,
-  DialogHeader,
-} from '../../../components/ui/dialog'
+import { Dialog } from '../../../components/ui/dialog'
 import {
  Table,
  TableBody,
@@ -31,11 +25,11 @@ function MyDonations() {
  const fundSlug = useFundSlug()
  const [attestationModalIsOpen, setAttestationModalIsOpen] = useState(false)
  const [attestation, setAttestation] = useState<{ message: string; signature: string } | null>()
+  const donationListQuery = trpc.donation.donationList.useQuery(
+    { fundSlug: fundSlug! },
+    { enabled: !!fundSlug }
+  )

-  // Conditionally render hooks should be ok in this case
-  if (!fundSlug) return <></>
-
-  const donationListQuery = trpc.donation.donationList.useQuery({ fundSlug })
  const getDonationAttestationMutation = trpc.donation.getDonationAttestation.useMutation()

  async function getAttestation(donationId: string) {
@@ -44,6 +38,8 @@ function MyDonations() {
    setAttestationModalIsOpen(true)
  }

+  if (!fundSlug) return <></>
+
  return (
    <>
      <Head>
--- a/pages/[fund]/account/my-memberships.tsx
+++ b/pages/[fund]/account/my-memberships.tsx
@@ -27,10 +27,11 @@ function MyMemberships() {
  const [attestationModalIsOpen, setAttestationModalIsOpen] = useState(false)
  const [attestation, setAttestation] = useState<{ message: string; signature: string } | null>()

-  // Conditionally render hooks should be ok in this case
-  if (!fundSlug) return <></>
+  const membershipListQuery = trpc.donation.membershipList.useQuery(
+    { fundSlug: fundSlug! },
+    { enabled: !!fundSlug }
+  )

-  const membershipListQuery = trpc.donation.membershipList.useQuery({ fundSlug })
  const getMembershipAttestationMutation = trpc.donation.getMembershipAttestation.useMutation()

  async function getAttestation(donationId?: string, subscriptionId?: string) {
@@ -42,6 +43,8 @@ function MyMemberships() {
    setAttestationModalIsOpen(true)
  }

+  if (!fundSlug) return <></>
+
  return (
    <>
      <Head>
--- a/pages/[fund]/account/point-history.tsx
+++ b/pages/[fund]/account/point-history.tsx
@@ -19,15 +19,14 @@ dayjs.extend(localizedFormat)
 function PointHistory() {
  const fundSlug = useFundSlug()

-  // Conditionally render hooks should be ok in this case
-  if (!fundSlug) return <></>
-
  const getHistoryQuery = trpc.perk.getHistory.useQuery()

+  if (!fundSlug) return <></>
+
  return (
    <>
      <Head>
-        <title>{funds[fundSlug].title} - Point History</title>
+        <title>{funds[fundSlug!].title} - Point History</title>
      </Head>

      <div className="w-full max-w-5xl mx-auto flex flex-col">
--- a/pages/[fund]/perks.tsx
+++ b/pages/[fund]/perks.tsx
@@ -7,10 +7,9 @@ import PerkList from '../../components/PerkList'
 function Perks() {
  const fundSlug = useFundSlug()

-  // Conditionally render hooks should be ok in this case
-  if (!fundSlug) return <></>
+  const getFundPerksQuery = trpc.perk.getFundPerks.useQuery({ fundSlug: fundSlug! })

-  const getFundPerksQuery = trpc.perk.getFundPerks.useQuery({ fundSlug: fundSlug })
+  if (!fundSlug) return <></>

  return (
    <>
--- a/pages/[fund]/projects/index.tsx
+++ b/pages/[fund]/projects/index.tsx
@@ -8,29 +8,20 @@ import { useFundSlug } from '../../../utils/use-fund-slug'
 import { funds, fundSlugs } from '../../../utils/funds'

 const AllProjects: NextPage<{ projects: ProjectItem[] }> = ({ projects }) => {
-  const [modalOpen, setModalOpen] = useState(false)
-  const [selectedProject, setSelectedProject] = useState<ProjectItem>()
  const [sortedProjects, setSortedProjects] = useState<ProjectItem[]>()
  const fundSlug = useFundSlug()

  useEffect(() => {
    setSortedProjects(projects.sort(() => 0.5 - Math.random()))
  }, [projects])
-
-  function closeModal() {
-    setModalOpen(false)
-  }
-
-  function openPaymentModal(project: ProjectItem) {
-    setSelectedProject(project)
-    setModalOpen(true)
-  }
-
  if (!fundSlug) return <></>

  return (
    <>
-      <Head>{fundSlug && <title>{funds[fundSlug].title} | Projects</title>}</Head>
+      <Head>
+        <title>{funds[fundSlug].title} - Projects</title>
+      </Head>
+
      <section className="flex flex-col items-center">
        <div className="flex justify-between items-center pb-8 w-full">
          <h1 className="py-4 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
--- a/pages/monero/apply.tsx
+++ b/pages/monero/apply.tsx
@@ -15,11 +15,7 @@ export default function Apply() {
  const { toast } = useToast()
  const applyMutation = trpc.application.submitApplication.useMutation()

-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm()
+  const { register, handleSubmit } = useForm()

  async function onSubmit(data: Record<string, string>) {
    if (!fundSlug) return
@@ -72,11 +68,11 @@ export default function Apply() {
          </div>
          <h2 id="Eligibility">Eligibility</h2>
          <p>
-            All developers and researchers are eligible to apply, regardless of educational attainment or
-            occupation. However, as a nonprofit organization registered under U.S. tax laws, MAGIC
-            Grants is required to comply with certain laws when disbursing funds to grant
-            recipients. Grant recipients must complete a Due Diligence checklist, which are the last
-            two pages of{' '}
+            All developers and researchers are eligible to apply, regardless of educational
+            attainment or occupation. However, as a nonprofit organization registered under U.S. tax
+            laws, MAGIC Grants is required to comply with certain laws when disbursing funds to
+            grant recipients. Grant recipients must complete a Due Diligence checklist, which are
+            the last two pages of{' '}
            <a href="https://magicgrants.org/funds/MAGIC%20Fund%20Grant%20Disbursement%20Process%20and%20Requirements.pdf">
              this document
            </a>
@@ -283,8 +279,8 @@ export default function Apply() {
        <p>
          After submitting your application, please allow our team up to three weeks to review your
          application. Email us at{' '}
-          <a href={`mailto:${fundSlugToRecipientEmail[fundSlug]}`}>
-            {fundSlugToRecipientEmail[fundSlug]}
+          <a href={`mailto:${fundSlugToRecipientEmail[fundSlug!]}`}>
+            {fundSlugToRecipientEmail[fundSlug!]}
          </a>{' '}
          if you have any questions.
        </p>
--- a/utils/use-fund-slug.ts
+++ b/utils/use-fund-slug.ts
@@ -1,5 +1,4 @@
 import { useRouter } from 'next/router'
-import { FundSlug } from '@prisma/client'

 import { getFundSlugFromUrlPath } from './funds'