Replace useSurah with Surah.fromDOMNode

Fix https://github.com/ReflectsLight/al-quran/issues/56

src/js/hooks/useSurah.ts

@@ -1,18 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Quran, Locale } from 'lib/Quran';
-
-export default function (locale: Locale, surahId: number) {
-  const [surah, setSurah] = useState(null);
-
-  useEffect(() => {
-    const path = `/${locale}/${surahId}/surah.json`;
-    const text = document.querySelector<HTMLElement>(`script[src="${path}"]`).innerText;
-    const json = JSON.parse(text);
-    setSurah(Quran.Surah.fromJSON(locale, json.shift(), json));
-  }, []);
-
-  return {
-    surah,
-    surahIsLoaded: surah !== null
-  };
-}

src/js/lib/Quran/Surah.ts

@@ -28,6 +28,11 @@ export class Surah {
   #details: SurahDetails;
   ayat: Ayat;
 
+  static fromDOMNode(locale: Locale, node: HTMLScriptElement) {
+    const json = JSON.parse(node.innerText);
+    return Surah.fromJSON(locale, json.shift(), json);
+  }
+
   static fromJSON(locale: Locale, details: SurahDetails, ayat: Array<[number, string]>): Surah {
     return new Surah(
       details,

src/js/pages/TheSurahPage.tsx

@@ -6,9 +6,7 @@ import { Timer } from "components/TheQuran/Timer";
 import { Stream } from "components/TheQuran/Stream";
 import { AboutSurah } from "components/TheQuran/AboutSurah";
 import { ThemeSelect } from "components/TheQuran/ThemeSelect";
-import { Locale } from "lib/Quran";
-import useSurah from "hooks/useSurah";
-
+import { Locale, Surah } from "lib/Quran";
 
 interface PageProps {
   locale: Locale;
@@ -16,21 +14,21 @@ interface PageProps {
 }
 
 function TheSurahPage({ locale, surahId }: PageProps) {
-  const { surahIsLoaded, surah } = useSurah(locale, surahId);
+  const path = `/${locale}/${surahId}/surah.json`;
+  const node: HTMLScriptElement = document.querySelector(`script[src="${path}"]`);
+  const surah = Surah.fromDOMNode(locale, node);
   const [stream, setStream] = useState([]);
   const [theme, setTheme] = useState(getCookie("theme") || "moon");
   const readyToRender = stream.length > 0;
 
   useEffect(() => {
-    if (surahIsLoaded) {
-      document.title = [
-        "Al-Quran:",
-        surah.transliteratedName,
-        `(${surah.translatedName})`,
-      ].join(" ");
-      setStream([surah.ayat[stream.length]]);
-    }
-  }, [surahIsLoaded]);
+    document.title = [
+      "Al-Quran:",
+      surah.transliteratedName,
+      `(${surah.translatedName})`,
+    ].join(" ");
+    setStream([surah.ayat[stream.length]]);
+  }, []);
 
   return (
     <div className={classNames(theme, "theme", locale)}>