Replace useSurah with Surah.fromDOMNode
Fix https://github.com/ReflectsLight/al-quran/issues/56
This commit is contained in:
parent
f1f94f46ea
commit
3b9c68ebe6
3 changed files with 16 additions and 31 deletions
|
@ -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
|
||||
};
|
||||
}
|
|
@ -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,
|
||||
|
|
|
@ -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)}>
|
||||
|
|
Loading…
Reference in a new issue