From 0ef11405f47634b47a630ea84a6856ec7a53f4c6 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Tue, 29 Oct 2024 13:05:06 -0300
Subject: [PATCH] Typescript errors: zero

---
 etc/tsconfig.json                           | 1 +
 src/js/components/Select/LanguageSelect.tsx | 2 +-
 src/js/components/Select/Option.tsx         | 2 +-
 src/js/components/Select/ThemeSelect.tsx    | 2 +-
 src/js/components/SurahStream/index.tsx     | 5 ++---
 src/js/index.tsx                            | 5 -----
 6 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/etc/tsconfig.json b/etc/tsconfig.json
index ebd57af..049869a 100644
--- a/etc/tsconfig.json
+++ b/etc/tsconfig.json
@@ -10,6 +10,7 @@
     "target": "ES5",
     "moduleResolution": "node",
     "esModuleInterop": true,
+    "jsxImportSource": "preact",
     "jsx": "react-jsx",
     "lib": [ "ES2020", "DOM" ],
     "typeRoots": ["../src/js/types/globals.d.ts", "../node_modules/@types"],
diff --git a/src/js/components/Select/LanguageSelect.tsx b/src/js/components/Select/LanguageSelect.tsx
index 45f11b7..c933448 100644
--- a/src/js/components/Select/LanguageSelect.tsx
+++ b/src/js/components/Select/LanguageSelect.tsx
@@ -42,7 +42,7 @@ export function LanguageSelect() {
         const ctx = el?.getAttribute("data-context");
         if (ctx === "language-select") {
           const anchor = getNextRef(e, refs)?.current;
-          anchor.focus();
+          anchor?.focus();
         }
       }
     }
diff --git a/src/js/components/Select/Option.tsx b/src/js/components/Select/Option.tsx
index 28b3130..2489497 100644
--- a/src/js/components/Select/Option.tsx
+++ b/src/js/components/Select/Option.tsx
@@ -2,7 +2,7 @@ import type { ReactNode, AnchorHTMLAttributes, ForwardedRef } from "preact/compa
 type Rest = AnchorHTMLAttributes<HTMLAnchorElement>;
 type Props = {
   value: string;
-  children: ReactNode;
+  children?: ReactNode;
 } & Rest;
 
 function Component(props: Props, ref: ForwardedRef<HTMLAnchorElement>) {
diff --git a/src/js/components/Select/ThemeSelect.tsx b/src/js/components/Select/ThemeSelect.tsx
index 4419e2b..34eb1b3 100644
--- a/src/js/components/Select/ThemeSelect.tsx
+++ b/src/js/components/Select/ThemeSelect.tsx
@@ -36,7 +36,7 @@ export function ThemeSelect() {
         const ctx = el?.getAttribute("data-context");
         if (ctx === "theme-select") {
           const anchor = getNextRef(e, refs)?.current;
-          anchor.focus();
+          anchor?.focus();
         }
       }
     }
diff --git a/src/js/components/SurahStream/index.tsx b/src/js/components/SurahStream/index.tsx
index c19edc0..adf9dc6 100644
--- a/src/js/components/SurahStream/index.tsx
+++ b/src/js/components/SurahStream/index.tsx
@@ -45,9 +45,8 @@ export function SurahStream({ surahId, localeId, t }: Props) {
         history.back();
       }
     }
-    const el = document.activeElement;
-    el.addEventListener("keydown", onKeyPress);
-    return () => el.removeEventListener("keydown", onKeyPress);
+    document.addEventListener("keydown", onKeyPress);
+    return () => document.removeEventListener("keydown", onKeyPress);
   }, []);
 
   useEffect(() => {
diff --git a/src/js/index.tsx b/src/js/index.tsx
index e45fabb..3be6c90 100644
--- a/src/js/index.tsx
+++ b/src/js/index.tsx
@@ -62,15 +62,10 @@ const App = (function () {
     const [locale, setLocale] = useLocale();
     return (
       <SettingsContext.Provider value={{ locale, setLocale, theme, setTheme }}>
-        {/* @ts-expect-error fixme */}
         <Router>
-          {/* @ts-expect-error fixme */}
           <Route path="/index.html" component={SurahRedirect} />
-          {/* @ts-expect-error fixme */}
           <Route path="/:localeId/index.html" component={SurahIndex} t={t} />
-          {/* @ts-expect-error fixme */}
           <Route path="/:localeId/:surahId" component={SurahStream} t={t} />
-          {/* @ts-expect-error fixme */}
           <Route path="/:localeId/random" component={RandomSurah} />
         </Router>
       </SettingsContext.Provider>