Fix linting for the new repo 2

.gitignore

@@ -49,3 +49,4 @@ node_modules/
 #misc
 .direnv
 shell.nix
+.eslintcache

.prettierignore

@@ -2,3 +2,4 @@
 .next/
 pnpm-lock.yaml
 node_modules/
+public/images/

eslint.config.js

@@ -32,18 +32,22 @@ export default defineConfig([
     },
     {
         rules: {
+            // Show stoppers
+            '@typescript-eslint/no-unsafe-assignment': 'error',
+            '@typescript-eslint/no-unsafe-member-access': 'error',
+            '@typescript-eslint/no-unsafe-argument': 'error',
+            '@typescript-eslint/no-unsafe-call': 'error',
+
+            // Keep track of
             'object-shorthand': 'warn',
-            '@typescript-eslint/no-unsafe-assignment': 'warn',
-            '@typescript-eslint/no-unsafe-member-access': 'warn',
-            '@typescript-eslint/no-unsafe-argument': 'warn',
-            '@typescript-eslint/no-unsafe-enum-comparison': 'off',
-            '@typescript-eslint/no-unsafe-call': 'warn',
             '@typescript-eslint/no-unsafe-return': 'warn',
+            '@typescript-eslint/no-unsafe-enum-comparison': 'warn',
+            'react-hooks/set-state-in-effect': 'warn', // Should go back to (default) error when current set are dealt with
             'tailwindcss/no-custom-classname': 'off',
-            'react-hooks/set-state-in-effect': 'off', //temp
-            'react-hooks/preserve-manual-memoization': 'off', //temp
-            'react-hooks/refs': 'off', //temp
-            'react-hooks/immutability': 'off', //temp
+
+            // React Compiler rules (for testing)
+            'react-hooks/refs': 'warn',
+            'react-hooks/immutability': 'warn',
         },
     },
     {

package.json

@@ -87,6 +87,11 @@
         "overrides": {
             "@babel/runtime@<7.26.10": ">=7.26.10",
             "undici@>=6.0.0 <6.21.2": ">=6.21.2"
-        }
+        },
+        "onlyBuiltDependencies": [
+            "esbuild",
+            "sharp",
+            "unrs-resolver"
+        ]
     }
 }

src/app/account/AccountPage.tsx

@@ -74,7 +74,7 @@ export function AccountPage() {
         loggedInUser.data &&
         loggedInUser.data.onboardingStage != OnboardingStage.JOINED
     ) {
-        window.location.href = '/volunteer'
+        window.location.assign('/volunteer')
         return null
     }
 

src/app/account/sections/AccountDetailsSection.tsx

@@ -13,7 +13,7 @@ import { zDiscordUserIsInServerResponse } from '@/contracts/responses'
 import { useFetch } from '@/util/hooks'
 import { skipToken, useQuery } from '@tanstack/react-query'
 import cx from 'classnames'
-import { ChangeEvent, FormEvent, useEffect, useState } from 'react'
+import { ChangeEvent, FormEvent, useState } from 'react'
 import { IoClose } from 'react-icons/io5'
 
 interface AccountDetailsSectionProps {
@@ -35,8 +35,9 @@ export function AccountDetailsSection({
     onSave,
     donorLinkError,
     onDonorLinkSubmit,
-}: AccountDetailsSectionProps) {
+}: Readonly<AccountDetailsSectionProps>) {
     const { ready, onGet } = useFetch()
+    const [lastUserData, setLastUserData] = useState(userData)
     const [updatedUser, setUpdatedUser] = useState(userData)
     const discordUserId = userData.discordUsers?.[0]?.id ?? null
 
@@ -53,9 +54,10 @@ export function AccountDetailsSection({
                 : skipToken,
     })
 
-    useEffect(() => {
+    if (lastUserData !== userData) {
         setUpdatedUser(userData)
-    }, [userData])
+        setLastUserData(userData)
+    }
 
     const membershipDeliverableLabels: Record<
         MembershipDeliverableStatus,
@@ -168,10 +170,17 @@ export function AccountDetailsSection({
         shirtSize: userData.shirtSize ?? null,
     })
     const userHasDonor = !!userData.donors?.length
-
-    useEffect(() => {
-        if (!pendingLinkEmail) return
-
+    const [prevUserAddress, setPrevUserAddress] = useState(userData.address)
+    const [prevUserDonors, setPrevUserDonors] = useState(userData.donors)
+
+    // Possibly deprecated - pendingLinkEmail is only set within this statement, which will never run with it's default value
+    if (
+        pendingLinkEmail &&
+        (userData.address !== prevUserAddress ||
+            userData.donors !== prevUserDonors)
+    ) {
+        setPrevUserAddress(userData.address)
+        setPrevUserDonors(userData.donors)
         const matchedDonor = userData.donors?.find(
             (donor) => normalizeEmail(donor.email) === pendingLinkEmail
         )
@@ -188,7 +197,7 @@ export function AccountDetailsSection({
         setShowDonorLinkForm(false)
         setShowAddressConfirmModal(true)
         setPendingLinkEmail(null)
-    }, [pendingLinkEmail, userData.address, userData.donors])
+    }
 
     const handleChangeDonorEmail = (e: ChangeEvent<HTMLInputElement>) => {
         setDonorLinkForm({

src/app/admin/layout/List.tsx

@@ -482,10 +482,10 @@ function PageSelect({
         if (0 <= newPage && newPage <= maxPage) onChange(newPage)
         else setValue((page + 1).toString())
     }
-
-    useEffect(() => {
-        setValue((page + 1).toString())
-    }, [page])
+    const pageStr = (page + 1).toString()
+    if (value != pageStr) {
+        setValue(pageStr)
+    }
 
     useEffect(() => {
         if (page < 0) onChange(0)

src/app/admin/panels/fundraising/page.tsx

@@ -569,7 +569,6 @@ export default function Page() {
                                       if (inclusiveRangeMs < oneDayMs) {
                                           return
                                       }
-
                                       applyChartViewOverrideRange({
                                           start,
                                           end,

src/app/admin/panels/fundraising/useFundraisingDashboardController.ts

@@ -16,7 +16,7 @@ import {
 import { SortDirection } from '@/contracts/requests'
 import { useActblueQueries } from '@/queries'
 import { keepPreviousData, useQueries, useQuery } from '@tanstack/react-query'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 type ChartBarDisplayMode = 'grouped' | 'stacked'
 
@@ -291,16 +291,6 @@ export function useFundraisingDashboardController() {
         ]
     )
 
-    useEffect(() => {
-        setChartViewOverrideRange(null)
-    }, [startDate, endDate, committedPreset])
-
-    useEffect(() => {
-        if (!zoomEnabled) {
-            setChartViewOverrideRange(null)
-        }
-    }, [zoomEnabled])
-
     const chartBucketQueries = useQueries({
         queries: chartBuckets.map((bucket) => ({
             queryKey: [
@@ -340,11 +330,12 @@ export function useFundraisingDashboardController() {
         })
     }, [chartBuckets, chartBucketQueries])
 
-    useEffect(() => {
-        if (!validGranularityModes.includes(granularityMode)) {
-            setGranularityMode('auto')
-        }
-    }, [validGranularityModes, granularityMode])
+    if (
+        granularityMode != 'auto' &&
+        !validGranularityModes.includes(granularityMode)
+    ) {
+        setGranularityMode('auto')
+    }
 
     const selectedRangeLabel = useMemo(
         () => getSelectedRangeLabel(committedPreset, startDate, endDate),
@@ -398,7 +389,6 @@ export function useFundraisingDashboardController() {
                 return
             }
         }
-
         setChartViewOverrideRange(range)
     }
 

src/app/admin/panels/members/panel_views/DonorView.tsx

@@ -21,7 +21,7 @@ import type { UseQueryResult } from '@tanstack/react-query'
 import cx from 'classnames'
 import { motion } from 'motion/react'
 import Link from 'next/link'
-import React, { ChangeEvent, useEffect, useMemo, useState } from 'react'
+import React, { ChangeEvent, useMemo, useState } from 'react'
 
 export interface DonorViewProps {
     selectedId: number
@@ -144,15 +144,12 @@ export function DonorView({
 
     const [overlayMounted, setOverlayMounted] = useState(false)
     const [overlayOpen, setOverlayOpen] = useState(false)
-
-    useEffect(() => {
-        if (pickingDonor) {
-            setOverlayMounted(true)
-            requestAnimationFrame(() => setOverlayOpen(true))
-        } else if (overlayMounted) {
-            setOverlayOpen(false)
-        }
-    }, [pickingDonor, overlayMounted])
+    if (pickingDonor) {
+        setOverlayMounted(true)
+        requestAnimationFrame(() => setOverlayOpen(true))
+    } else if (overlayMounted) {
+        setOverlayOpen(false)
+    }
 
     const backdropVariants = {
         open: {

src/app/endorsements/components/FilterButtonRow.tsx

@@ -187,6 +187,12 @@ export function FilterButtonRow({
                         })
                     })
                 }
+                if (!mobile && prev) {
+                    // If we're transitioning from mobile to non-mobile, reset the layout
+                    setMobileSearchWidth(null)
+                    setSingleColumnLayout(false)
+                    setShowSearchLabel(false)
+                }
                 return mobile
             })
             if (mobile) {
@@ -207,9 +213,6 @@ export function FilterButtonRow({
 
     useLayoutEffect(() => {
         if (!isMobile) {
-            setMobileSearchWidth(null)
-            setSingleColumnLayout(false)
-            setShowSearchLabel(false)
             return
         }
 

src/app/home/MemberBanner.tsx

@@ -168,7 +168,7 @@ export function safeLogError(err: unknown, prefix = '') {
 export function MemberBanner() {
     const { inView, observe } = useInView()
     const containerRef = useRef<HTMLDivElement>(null)
-    const [visible, setVisible] = useState<boolean>(false)
+    const [latchVisible, setLatchVisible] = useState<boolean>(false)
     const loggedInUser = useCurrentUser()
     const discordId = loggedInUser?.data?.discordUsers?.[0]?.id ?? null
 
@@ -184,13 +184,9 @@ export function MemberBanner() {
         }
     }, [observe])
 
-    useEffect(() => {
-        try {
-            if (inView) setVisible(true)
-        } catch (err) {
-            safeLogError(err, 'inView effect error:')
-        }
-    }, [inView])
+    if (!latchVisible && inView) {
+        setLatchVisible(true)
+    }
 
     return (
         <div className={styles.section}>
@@ -206,7 +202,7 @@ export function MemberBanner() {
                     <motion.div
                         className={styles.cardColumn}
                         initial={{ opacity: 0, y: 50 }}
-                        animate={visible ? { opacity: 1, y: 0 } : {}}
+                        animate={latchVisible ? { opacity: 1, y: 0 } : {}}
                         transition={{ duration: 0.8, ease: 'easeOut' }}
                     >
                         <div className={styles.cardColumnInner}>
@@ -225,7 +221,7 @@ export function MemberBanner() {
                         </div>
                     </motion.div>
 
-                    <MembershipBulletPoints visible={visible} />
+                    <MembershipBulletPoints visible={latchVisible} />
                 </div>
             </div>
         </div>

src/app/home/Volunteer.tsx

@@ -3,7 +3,7 @@
 import styles from './volunteer.module.css'
 import { motion } from 'motion/react'
 import Image from 'next/image'
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 const actions = [
     {
@@ -35,9 +35,7 @@ export function Volunteer() {
         if (divRef.current) observe(divRef.current)
     }, [observe])
 
-    useEffect(() => {
-        if (inView) setVisible(true)
-    }, [inView])
+    if (!visible && inView) setVisible(true)
 
     return (
         <div className={styles.container}>

src/app/login/LoginCard.tsx

@@ -3,6 +3,7 @@
 import { useAuth } from '@/util/hooks'
 import Image from 'next/image'
 import { useSearchParams } from 'next/navigation'
+import { useEffect } from 'react'
 
 export function LoginCard() {
     const { session, onLogin } = useAuth()
@@ -19,10 +20,11 @@ export function LoginCard() {
               ? 'An unknown error occurred. Please try again later.'
               : null
 
-    if (session) {
-        window.location.href = redirect
-        return null
-    }
+    useEffect(() => {
+        if (session) {
+            window.location.href = redirect
+        }
+    }, [session, redirect])
 
     return (
         <div className="flex max-w-[30rem] flex-col items-center justify-center gap-6 rounded-md bg-black-pearl-dark p-8 text-center shadow-lg">

src/app/volunteer/CollectInfoStage.tsx

@@ -5,7 +5,7 @@ import { useFetch, useInit } from '@/util/hooks'
 import Link from 'next/link'
 import phone from 'phone'
 import { Country, isValidCountryPostalCode } from 'postal-code-validator'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 export interface IOnboardingForm {
     firstName: string
@@ -50,12 +50,19 @@ export function CollectInfoStage({
     )
     const [zipCodeError, setZipCodeError] = useState(false)
 
-    const parsePhone = (number: string) =>
-        phone(number, {
+    const parsePhone = (number: string) => {
+        const p = phone(number, {
             country: 'US',
             strictDetection: true,
             validateMobilePrefix: true,
         })
+        if (p.isValid)
+            setForm((f) => ({
+                ...f,
+                phoneNumber: number.substring(2),
+            }))
+        return p
+    }
     const parsedPhone = useMemo(() => parsePhone(phoneNumber), [phoneNumber])
 
     const setFormattedPhoneNumber = (number: string) => {
@@ -99,14 +106,6 @@ export function CollectInfoStage({
 
     useInit(() => setFormattedPhoneNumber(initialForm.phoneNumber))
 
-    useEffect(() => {
-        if (parsedPhone.isValid)
-            setForm((f) => ({
-                ...f,
-                phoneNumber: parsedPhone.phoneNumber.substring(2),
-            }))
-    }, [parsedPhone])
-
     return (
         <div>
             <header>