From 228a6cddeae7ae9308e20e0099969c946e5de5f5 Mon Sep 17 00:00:00 2001
From: Malted <malted@malted.dev>
Date: Fri, 7 Apr 2023 12:59:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8=20Resolve=20all=20lint=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/background-image.js               |  7 +++-
 components/bank/apply/address-input.js       | 12 +++---
 components/bank/apply/autofill-colour-fix.js |  7 +++-
 components/bank/apply/checkbox.js            |  2 +-
 components/bank/apply/field.js               |  2 +-
 components/bank/apply/form-container.js      |  6 ++-
 components/bank/timeline.js                  | 44 +++++++++++---------
 components/index/cards/button.js             |  2 +-
 components/index/cards/epoch.js              |  2 +-
 components/posts/mention.js                  |  2 +-
 pages/bank/apply.js                          |  2 +-
 pages/bank/fiscal-sponsorship.js             | 15 ++++---
 pages/donate.js                              |  3 +-
 pages/index.js                               | 14 +++----
 pages/philanthropy/supporters.js             |  3 +-
 15 files changed, 70 insertions(+), 53 deletions(-)

diff --git a/components/background-image.js b/components/background-image.js
index 3d278288..14128d4e 100644
--- a/components/background-image.js
+++ b/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>
 )
 
diff --git a/components/bank/apply/address-input.js b/components/bank/apply/address-input.js
index e46c54ac..19eae241 100644
--- a/components/bank/apply/address-input.js
+++ b/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)
         }
     }, [])
 
diff --git a/components/bank/apply/autofill-colour-fix.js b/components/bank/apply/autofill-colour-fix.js
index 3f413ff2..b18d4251 100644
--- a/components/bank/apply/autofill-colour-fix.js
+++ b/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
\ No newline at end of file
+
+export default autofillColourFix
\ No newline at end of file
diff --git a/components/bank/apply/checkbox.js b/components/bank/apply/checkbox.js
index 139e1544..0b4fac64 100644
--- a/components/bank/apply/checkbox.js
+++ b/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
diff --git a/components/bank/apply/field.js b/components/bank/apply/field.js
index 9c9ecddc..50a41ab4 100644
--- a/components/bank/apply/field.js
+++ b/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%'}>
diff --git a/components/bank/apply/form-container.js b/components/bank/apply/form-container.js
index 08d71def..78f67471 100644
--- a/components/bank/apply/form-container.js
+++ b/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
\ No newline at end of file
diff --git a/components/bank/timeline.js b/components/bank/timeline.js
index e62d5c40..a221cca3 100644
--- a/components/bank/timeline.js
+++ b/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>
   )
 }
diff --git a/components/index/cards/button.js b/components/index/cards/button.js
index d3d14c23..259daa78 100644
--- a/components/index/cards/button.js
+++ b/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"
diff --git a/components/index/cards/epoch.js b/components/index/cards/epoch.js
index e8770ba3..4ddbb876 100644
--- a/components/index/cards/epoch.js
+++ b/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'],
diff --git a/components/posts/mention.js b/components/posts/mention.js
index 1638f35b..1aeb839a 100644
--- a/components/posts/mention.js
+++ b/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 (
diff --git a/pages/bank/apply.js b/pages/bank/apply.js
index 8dfdc7f5..a6593fe2 100644
--- a/pages/bank/apply.js
+++ b/pages/bank/apply.js
@@ -41,7 +41,7 @@ export default function Apply() {
         {}
       )
     }
-  })
+  }, [formError, router, step])
 
   return (
     <>
diff --git a/pages/bank/fiscal-sponsorship.js b/pages/bank/fiscal-sponsorship.js
index c6492ff6..7c7d6823 100644
--- a/pages/bank/fiscal-sponsorship.js
+++ b/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()
         }
 
diff --git a/pages/donate.js b/pages/donate.js
index 39190f6d..0cceef6d 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -212,7 +212,8 @@ export default function Donate({ sprig }) {
     if (sprig) {
       window.document.getElementById('sprig-donation').scrollIntoView()
     }
-  }, [])
+  }, [sprig])
+  
   return (
     <Box>
       <Meta
diff --git a/pages/index.js b/pages/index.js
index fbb69d7a..e1400850 100644
--- a/pages/index.js
+++ b/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 (
     <>
diff --git a/pages/philanthropy/supporters.js b/pages/philanthropy/supporters.js
index f0baf641..0e1822b9 100644
--- a/pages/philanthropy/supporters.js
+++ b/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