From d7812b8e185417037f9feb45669d5ad77f93ecf4 Mon Sep 17 00:00:00 2001
From: Toby Brown <hi@tobyb.dev>
Date: Wed, 13 Mar 2024 16:49:30 +0000
Subject: [PATCH] remaking button deacitvation

---
 components/slack/arrows.js | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/components/slack/arrows.js b/components/slack/arrows.js
index 4ca20750..de55e0df 100644
--- a/components/slack/arrows.js
+++ b/components/slack/arrows.js
@@ -1,5 +1,5 @@
 import { VisibilityContext } from 'react-horizontal-scrolling-menu'
-import { useContext, useEffect, useState } from 'react'
+import { useContext } from 'react'
 import Icon from '@hackclub/icons'
 import { Box, Link } from 'theme-ui'
 
@@ -31,34 +31,26 @@ function Arrow({ direction, disabled, onClick }) {
 }
 
 export function LeftArrow() {
-  const { scrollPrev, visibleElements, isFirstItemVisible } =
+  const { scrollPrev } =
     useContext(VisibilityContext)
-  const [disabled, setDisabled] = useState(false)
 
-  useEffect(() => {
-    if (visibleElements.length) {
-      setDisabled(isFirstItemVisible)
-    }
-  }, [isFirstItemVisible, visibleElements])
+  const visibility = useContext(VisibilityContext)
+  const isVisible = visibility.useIsVisible("first", false);
 
   return (
-    <Arrow direction="left" disabled={disabled} onClick={() => scrollPrev()} />
+    <Arrow direction="left" disabled={isVisible} onClick={() => scrollPrev()} />
   )
 }
 
 export function RightArrow() {
-  const { scrollNext, visibleElements, isLastItemVisible } =
+  const { scrollNext } =
     useContext(VisibilityContext)
-  const [disabled, setDisabled] = useState(false)
 
-  useEffect(() => {
-    if (visibleElements.length) {
-      setDisabled(isLastItemVisible)
-    }
-  }, [isLastItemVisible, visibleElements])
+  const visibility = useContext(VisibilityContext)
+  const isVisible = visibility.useIsVisible("last", false);
 
   return (
-    <Arrow direction="right" disabled={disabled} onClick={() => scrollNext()} />
+    <Arrow direction="right" disabled={isVisible} onClick={() => scrollNext()} />
   )
 }