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;
|
#details: SurahDetails;
|
||||||
ayat: Ayat;
|
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 {
|
static fromJSON(locale: Locale, details: SurahDetails, ayat: Array<[number, string]>): Surah {
|
||||||
return new Surah(
|
return new Surah(
|
||||||
details,
|
details,
|
||||||
|
|
|
@ -6,9 +6,7 @@ import { Timer } from "components/TheQuran/Timer";
|
||||||
import { Stream } from "components/TheQuran/Stream";
|
import { Stream } from "components/TheQuran/Stream";
|
||||||
import { AboutSurah } from "components/TheQuran/AboutSurah";
|
import { AboutSurah } from "components/TheQuran/AboutSurah";
|
||||||
import { ThemeSelect } from "components/TheQuran/ThemeSelect";
|
import { ThemeSelect } from "components/TheQuran/ThemeSelect";
|
||||||
import { Locale } from "lib/Quran";
|
import { Locale, Surah } from "lib/Quran";
|
||||||
import useSurah from "hooks/useSurah";
|
|
||||||
|
|
||||||
|
|
||||||
interface PageProps {
|
interface PageProps {
|
||||||
locale: Locale;
|
locale: Locale;
|
||||||
|
@ -16,21 +14,21 @@ interface PageProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
function TheSurahPage({ locale, surahId }: 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 [stream, setStream] = useState([]);
|
||||||
const [theme, setTheme] = useState(getCookie("theme") || "moon");
|
const [theme, setTheme] = useState(getCookie("theme") || "moon");
|
||||||
const readyToRender = stream.length > 0;
|
const readyToRender = stream.length > 0;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (surahIsLoaded) {
|
document.title = [
|
||||||
document.title = [
|
"Al-Quran:",
|
||||||
"Al-Quran:",
|
surah.transliteratedName,
|
||||||
surah.transliteratedName,
|
`(${surah.translatedName})`,
|
||||||
`(${surah.translatedName})`,
|
].join(" ");
|
||||||
].join(" ");
|
setStream([surah.ayat[stream.length]]);
|
||||||
setStream([surah.ayat[stream.length]]);
|
}, []);
|
||||||
}
|
|
||||||
}, [surahIsLoaded]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(theme, "theme", locale)}>
|
<div className={classNames(theme, "theme", locale)}>
|
||||||
|
|
Loading…
Reference in a new issue