From fa8a06adf35ec3954569ac75e6f27c65dc5fa420 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Sat, 26 Oct 2024 03:14:33 -0300
Subject: [PATCH] Address type errors in SurahIndex/index.tsx

---
 src/js/components/SurahIndex/index.tsx | 32 +++++++++++++++-----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/js/components/SurahIndex/index.tsx b/src/js/components/SurahIndex/index.tsx
index 41a9b86..291eef6 100644
--- a/src/js/components/SurahIndex/index.tsx
+++ b/src/js/components/SurahIndex/index.tsx
@@ -20,19 +20,21 @@ export function SurahIndex({ localeId, t }: Props) {
     Quran.surahs.length,
   );
 
-  function getNextRef(e) {
-    const { target } = e;
-    const index = Number(target.getAttribute("data-index"));
-    if (e.key === "ArrowDown") {
-      return refs[index + 1];
-    } else if (e.key === "ArrowUp") {
-      return refs[index - 1];
-    } else {
-      return refs[index];
+  function getNextRef(e: KeyboardEvent) {
+    if (e.target instanceof HTMLAnchorElement) {
+      const { target } = e;
+      const index = Number(target.getAttribute("data-index"));
+      if (e.key === "ArrowDown") {
+        return refs[index + 1];
+      } else if (e.key === "ArrowUp") {
+        return refs[index - 1];
+      } else {
+        return refs[index];
+      }
     }
   }
 
-  function getNextScrollTop(e) {
+  function getNextScrollTop(e: KeyboardEvent) {
     const ul = ulRef.current;
     if (e.key === "ArrowDown") {
       return ul.scrollTop - 35;
@@ -52,16 +54,18 @@ export function SurahIndex({ localeId, t }: Props) {
   }, []);
 
   useEffect(() => {
-    const onKeyPress = (e) => {
+    const onKeyPress = (e: KeyboardEvent) => {
       const ul = ulRef.current;
       const anchor = getNextRef(e).current;
       anchor.focus();
       ul.scroll({ behavior: "auto" });
       ul.scrollTop = getNextScrollTop(e);
     };
-    refs.forEach((ref) => {
-      const el = ref.current;
-      el.addEventListener("keydown", onKeyPress);
+    refs.forEach((ref: React.RefObject<HTMLAnchorElement>) => {
+      if (ref.current) {
+        const el = ref.current;
+        el.addEventListener("keydown", onKeyPress);
+      }
     });
   }, [refs]);