🚨 Resolve all lint errors

components/background-image.js

@@ -10,6 +10,7 @@ import Image from 'next/image'
 
 const BGImg = ({
   gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',
+  alt = '',
   ...props
 }) => (
   <Box
@@ -35,7 +36,11 @@ const BGImg = ({
       '~ *': { position: 'relative' }
     }}
   >
-    <Image layout="responsive" {...props} />
+    <Image
+      layout="responsive"
+      alt={alt}
+      {...props}
+    />
   </Box>
 )
 

components/bank/apply/address-input.js

@@ -43,7 +43,9 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
     //TODO: Navigate suggestions with arrow keys.
 
     useEffect(() => {
-        if (!window.google || !input.current) return
+        const inputEl = input.current
+        
+        if (!window.google || !inputEl) return
 
         const service = new window.google.maps.places.AutocompleteService()
         
@@ -64,13 +66,13 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
         }
 
         document.addEventListener('click', clickOutside)
-        input.current.addEventListener('input', onInput)
-        input.current.addEventListener('focus', onInput)
+        inputEl.addEventListener('input', onInput)
+        inputEl.addEventListener('focus', onInput)
         
         return () => {
             document.removeEventListener('click', clickOutside)
-            input.current?.removeEventListener('input', onInput)
-            input.current?.removeEventListener('focus', onInput)
+            inputEl.removeEventListener('input', onInput)
+            inputEl.removeEventListener('focus', onInput)
         }
     }, [])
 

components/bank/apply/autofill-colour-fix.js

@@ -1,7 +1,10 @@
-export default {
+//TODO: Move to main theme
+
+const autofillColourFix = {
     '&:-webkit-autofill': {
         boxShadow: '0 0 0 100px #252429 inset !important',
         WebkitTextFillColor: 'white',
     },
 }
-//TODO: Move to main theme
+
+export default autofillColourFix

components/bank/apply/checkbox.js

@@ -14,7 +14,7 @@ export default function Checkbox({ name, defaultChecked=false, size=38 }) {
             const input = document.getElementById(name)
             input && setChecked(value === 'true')
         }
-    }, [])
+    }, [name])
 
     return (<>
         <input

components/bank/apply/field.js

@@ -15,7 +15,7 @@ export default function Field({ name, label, description, col = true, requiredFi
             const input = document.getElementById(name)
             if (input) input.value = value
         }
-    }, [])
+    }, [name])
     
     return (
         <FlexCol gap={2} width={'100%'}>

components/bank/apply/form-container.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 import { Box } from 'theme-ui'
 
-export default forwardRef(({ children }, ref) => {   
+const formContainer = forwardRef(({ children }, ref) => {   
     return (
         <Box
             ref={ref}
@@ -23,3 +23,7 @@ export default forwardRef(({ children }, ref) => {
         </Box>
     )
 })
+
+https://stackoverflow.com/a/67993106/10652680
+formContainer.displayName = 'formContainer'
+export default formContainer

components/bank/timeline.js

@@ -10,7 +10,11 @@ function Step({ stepIndex, label }) {
       maxWidth: ['24rem', null, '12rem'],
       gap: 3
     }}>
-      <Image src={`/bank/timeline-steps/step${stepIndex}.svg`} sx={{ flexShrink: 0 }} />
+      <Image
+        src={`/bank/timeline-steps/step${stepIndex}.svg`}
+        sx={{ flexShrink: 0 }}
+        alt=''
+      />
       <Text variant='lead' sx={{
         textAlign: ['left', null, 'center'], 
         margin: '0px !important'
@@ -30,26 +34,26 @@ export default function Timeline() {
 
   return (
     <Slide>
-        <Flex sx={{
-          flexDirection: ['column', null, 'row'],
-          justifyContent: 'space-between',
-          gap: 4,
-          maxWidth: ['300px', null, '1200px'],
-          mx: 'auto',
-          position: 'relative'
-        }}>
-          {labels.map((label, idx) => <Step stepIndex={idx + 1} label={label} key={idx} />)}
-          <Box sx={{
+      <Flex sx={{
+        flexDirection: ['column', null, 'row'],
+        justifyContent: 'space-between',
+        gap: 4,
+        maxWidth: ['300px', null, '1200px'],
+        mx: 'auto',
+        position: 'relative'
+      }}>
+        {labels.map((label, idx) => <Step stepIndex={idx + 1} label={label} key={idx} />)}
+        <Box sx={{
           border: 'solid #8492a6',
-            borderWidth: '3px 3px 0 0',
-            position: 'absolute',
-            top: stepSideLength / 2,
-            left: '10%', // TODO: make this dynamic
-            right: ['auto', null, '10%'],
-            bottom: [stepSideLength / 2, null, 'auto'],
-            zIndex: -1,
-          }} />
-        </Flex>
+          borderWidth: '3px 3px 0 0',
+          position: 'absolute',
+          top: stepSideLength / 2,
+          left: '10%', // TODO: make this dynamic
+          right: ['auto', null, '10%'],
+          bottom: [stepSideLength / 2, null, 'auto'],
+          zIndex: -1,
+        }} />
+      </Flex>
     </Slide>
   )
 }

components/index/cards/button.js

@@ -42,7 +42,7 @@ export default function Buttons({
           backdropFilter: 'blur(2px)',
           fontWeight: fontWeight
         }}
-        as={'a'}
+        as='a'
         href={link || '/'}
         target="_blank"
         rel="noreferrer"

components/index/cards/epoch.js

@@ -133,7 +133,7 @@ export default function Epoch() {
       />
       <Grid columns={[1, 1, '1fr 1.5fr']} sx={{ position: 'relative' }}>
         <Box>
-          <img
+          <Image
             src="https://cloud-jzsq7jfvg-hack-club-bot.vercel.app/0group_9.png"
             sx={{
               width: ['220px', '220px', '240px', '350px'],

components/posts/mention.js

@@ -9,7 +9,7 @@ const Mention = memo(function Mention({ username }) {
     fetch(`https://scrapbook.hackclub.com/api/profiles/${trim(username)}`)
       .then(r => r.json())
       .then(profile => setImg(profile.avatar))
-      .catch(e => console.error(e))
+      .catch(console.error)
   }, [username])
 
   return (

pages/bank/apply.js

@@ -41,7 +41,7 @@ export default function Apply() {
         {}
       )
     }
-  })
+  }, [formError, router, step])
 
   return (
     <>

pages/bank/fiscal-sponsorship.js

@@ -103,7 +103,7 @@ function Bullet({ glow=true, icon, href, children }) {
     )
 }
 
-function BulletBox({ padding = '2rem', children }) {
+function BulletBox({ padding='2rem', children }) {
     return (
         <Box
             as='ul'
@@ -133,22 +133,21 @@ export default function FiscalSponsorship() {
     const gridRef = useRef()
     const glowRef = useRef()
 
-    const scrollPos = 0
-    const mousePos = [0, 0]
+    const scrollPos = useRef(0)
+    const mousePos = useRef([0, 0])
 
     const setGlowMaskPosition = () => {
-        const finalPos = [-mousePos[0], -mousePos[1] + scrollPos]
+        const finalPos = [-mousePos.current[0], -mousePos.current[1] + scrollPos.current]
         glowRef.current.style.maskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
         glowRef.current.style.WebkitMaskPosition = `${finalPos[0]}px ${finalPos[1]}px`;
     }
 
     useEffect(() => {
         const handleScroll = (e) => {
-            const s = -window.scrollY / 10
+            scrollPos.current = -window.scrollY / 10
 
-            gridRef.current.style.transform = `translateY(${s}px)`
+            gridRef.current.style.transform = `translateY(${scrollPos.current}px)`
 
-            scrollPos = s
             setGlowMaskPosition()
         }
 
@@ -158,7 +157,7 @@ export default function FiscalSponsorship() {
             glowRef.current.style.left = x + 'px'
             glowRef.current.style.top = y + 'px'
 
-            mousePos = [x, y]
+            mousePos.current = [x, y]
             setGlowMaskPosition()
         }
 

pages/donate.js

@@ -212,7 +212,8 @@ export default function Donate({ sprig }) {
     if (sprig) {
       window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [])
+  }, [sprig])
+  
   return (
     <Box>
       <Meta

pages/index.js

@@ -9,7 +9,7 @@ import {
   Link,
   Text
 } from 'theme-ui'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
@@ -62,12 +62,10 @@ function Page({
   let [slackKey, setSlackKey] = useState(0)
   let [key, setKey] = useState(0)
 
-  let jsConfetti;
-
-  console.info(gitHubData)
+  let jsConfetti = useRef();
 
   useEffect(() => {
-    jsConfetti = new JSConfetti()
+    jsConfetti.current = new JSConfetti()
     
     window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
     window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `
@@ -76,7 +74,7 @@ function Page({
   const easterEgg = () => {
     alert('Hey, you typed the Konami Code!')
 
-    jsConfetti.addConfetti({
+    jsConfetti.current.addConfetti({
       confettiColors: [ // Hack Club colours!
         '#ec3750',
         '#ff8c37',
@@ -95,7 +93,7 @@ function Page({
         setReveal(false)
       }, 2000)
     }
-  }, [hover])
+  }, [reveal, hover])
 
   const [count, setCount] = useState(0)
 
@@ -121,7 +119,7 @@ function Page({
     if (count === images.length - 1) {
       setCount(0)
     }
-  }, [count])
+  }, [count, images.length])
 
   return (
     <>

pages/philanthropy/supporters.js

@@ -124,7 +124,8 @@ export default function Donate({ sprig }) {
     if (sprig) {
       window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [])
+  }, [sprig])
+
   return (
     <Box>
       <Meta