src/js: extract surah id, and locale from location.pathname
This commit is contained in:
parent
bb4bd38671
commit
f28725d0f3
4 changed files with 29 additions and 22 deletions
|
@ -9,10 +9,11 @@ type StreamProps = {
|
||||||
|
|
||||||
export function Stream({surah, stream}: StreamProps) {
|
export function Stream({surah, stream}: StreamProps) {
|
||||||
const endOfStream = stream.length === surah.ayat.length;
|
const endOfStream = stream.length === surah.ayat.length;
|
||||||
|
const surahInfo = surah.getInfo();
|
||||||
const ayat = stream.map((ayah: Ayah) => {
|
const ayat = stream.map((ayah: Ayah) => {
|
||||||
return (
|
return (
|
||||||
<li key={ayah.num} className="ayah fade">
|
<li key={ayah.id} className="ayah fade">
|
||||||
<span>Surah 1, Ayah {ayah.num}</span>
|
<span>Surah {surahInfo.id}, Ayah {ayah.id}</span>
|
||||||
<p>{ayah.text}</p>
|
<p>{ayah.text}</p>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
|
|
@ -15,7 +15,7 @@ export function Timer({surah, ayah, stream, setStream}: TimerProps) {
|
||||||
if (stream.length === surah.ayat.length) {
|
if (stream.length === surah.ayat.length) {
|
||||||
return;
|
return;
|
||||||
} else if (ms <= 0) {
|
} else if (ms <= 0) {
|
||||||
setStream([...stream, surah.ayat[ayah.num]]);
|
setStream([...stream, surah.ayat[ayah.id]]);
|
||||||
} else {
|
} else {
|
||||||
setTimeout(() => setMs(ms - 100), 100);
|
setTimeout(() => setMs(ms - 100), 100);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
type SurahDetails = {
|
type SurahInfo = {
|
||||||
id: string,
|
id: string,
|
||||||
place_of_revelation: string,
|
place_of_revelation: string,
|
||||||
transliterated_name: string,
|
transliterated_name: string,
|
||||||
|
@ -7,38 +7,38 @@ type SurahDetails = {
|
||||||
slug: string,
|
slug: string,
|
||||||
codepoints: Array<number>
|
codepoints: Array<number>
|
||||||
}
|
}
|
||||||
export type Ayah = {num: number, text: string, readingTime: number};
|
export type Ayah = {id: number, text: string, readingTime: number};
|
||||||
export type Ayat = Array<Ayah>;
|
export type Ayat = Array<Ayah>;
|
||||||
|
|
||||||
export class Surah {
|
export class Surah {
|
||||||
#details: SurahDetails;
|
#details: SurahInfo;
|
||||||
ayat: Ayat;
|
ayat: Ayat;
|
||||||
|
|
||||||
static fromJSON(details: SurahDetails, ayat: Array<[number, string]>): Surah {
|
static fromJSON(details: SurahInfo, ayat: Array<[number, string]>): Surah {
|
||||||
return new Surah(
|
return new Surah(
|
||||||
details,
|
details,
|
||||||
ayat.map(([num, text]) => {
|
ayat.map(([id, text]) => {
|
||||||
return {
|
return {
|
||||||
num, text,
|
id, text,
|
||||||
readingTime: text.split(" ").length * 500,
|
readingTime: text.split(" ").length * 500,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(details: SurahDetails, ayat: Ayat) {
|
constructor(details: SurahInfo, ayat: Ayat) {
|
||||||
this.#details = details;
|
this.#details = details;
|
||||||
this.ayat = ayat;
|
this.ayat = ayat;
|
||||||
}
|
}
|
||||||
|
|
||||||
getDetails() {
|
getInfo() {
|
||||||
const {
|
return {
|
||||||
id,
|
id: this.#details.id,
|
||||||
place_of_revelation: placeOfRevelation,
|
placeOfRevelation: this.#details.place_of_revelation,
|
||||||
transliterated_name: transliteratedName,
|
transliteratedName: this.#details.transliterated_name,
|
||||||
translated_name: translatedName,
|
translatedName: this.#details.translated_name,
|
||||||
verse_count: ayahCount,
|
ayahCount: this.#details.verse_count,
|
||||||
codepoints: arabicCodePoints
|
arabicCodePoints: this.#details.codepoints
|
||||||
} = this.#details;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,8 +5,13 @@ import { Timer } from "components/TheQuran/Timer";
|
||||||
import { Stream } from "components/TheQuran/Stream";
|
import { Stream } from "components/TheQuran/Stream";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
|
||||||
function TheSurahPage() {
|
type PageProps = {
|
||||||
const { surahIsLoaded, surah } = useSurah("en", 1);
|
locale: string,
|
||||||
|
surahId: number
|
||||||
|
}
|
||||||
|
|
||||||
|
function TheSurahPage({locale, surahId}: PageProps) {
|
||||||
|
const { surahIsLoaded, surah } = useSurah(locale, surahId);
|
||||||
const [stream, setStream] = useState([]);
|
const [stream, setStream] = useState([]);
|
||||||
const [theme , setTheme] = useState("moon");
|
const [theme , setTheme] = useState("moon");
|
||||||
const streamIsLoaded = !!stream.length;
|
const streamIsLoaded = !!stream.length;
|
||||||
|
@ -42,5 +47,6 @@ function TheSurahPage() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const [locale, surahId] = location.pathname.split('/').filter((e) => e);
|
||||||
const root = ReactDOM.createRoot(document.querySelector(".surah"));
|
const root = ReactDOM.createRoot(document.querySelector(".surah"));
|
||||||
root.render(<TheSurahPage/>);
|
root.render(<TheSurahPage locale={locale} surahId={parseInt(surahId)}/>);
|
||||||
|
|
Loading…
Reference in a new issue