Surah.ts: add getters
This commit is contained in:
parent
f28725d0f3
commit
4dd2d20766
4 changed files with 44 additions and 15 deletions
15
src/js/components/TheQuran/AboutSurah.tsx
Normal file
15
src/js/components/TheQuran/AboutSurah.tsx
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Surah } from "lib/Quran";
|
||||||
|
|
||||||
|
export function AboutSurah({surah}: {surah: Surah}) {
|
||||||
|
return (
|
||||||
|
<div className="about-surah">
|
||||||
|
<span>
|
||||||
|
{surah.translatedName}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{surah.transliteratedName}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
|
@ -9,11 +9,10 @@ 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.id} className="ayah fade">
|
<li key={ayah.id} className="ayah fade">
|
||||||
<span>Surah {surahInfo.id}, Ayah {ayah.id}</span>
|
<span>Surah {surah.id}, Ayah {ayah.id}</span>
|
||||||
<p>{ayah.text}</p>
|
<p>{ayah.text}</p>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
type SurahInfo = {
|
type SurahDetails = {
|
||||||
id: string,
|
id: string,
|
||||||
place_of_revelation: string,
|
place_of_revelation: string,
|
||||||
transliterated_name: string,
|
transliterated_name: string,
|
||||||
|
@ -11,10 +11,10 @@ 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: SurahInfo;
|
#details: SurahDetails;
|
||||||
ayat: Ayat;
|
ayat: Ayat;
|
||||||
|
|
||||||
static fromJSON(details: SurahInfo, ayat: Array<[number, string]>): Surah {
|
static fromJSON(details: SurahDetails, ayat: Array<[number, string]>): Surah {
|
||||||
return new Surah(
|
return new Surah(
|
||||||
details,
|
details,
|
||||||
ayat.map(([id, text]) => {
|
ayat.map(([id, text]) => {
|
||||||
|
@ -26,19 +26,32 @@ export class Surah {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(details: SurahInfo, ayat: Ayat) {
|
constructor(details: SurahDetails, ayat: Ayat) {
|
||||||
this.#details = details;
|
this.#details = details;
|
||||||
this.ayat = ayat;
|
this.ayat = ayat;
|
||||||
}
|
}
|
||||||
|
|
||||||
getInfo() {
|
get id() {
|
||||||
return {
|
return this.#details.id;
|
||||||
id: this.#details.id,
|
}
|
||||||
placeOfRevelation: this.#details.place_of_revelation,
|
|
||||||
transliteratedName: this.#details.transliterated_name,
|
get name() {
|
||||||
translatedName: this.#details.translated_name,
|
return String.fromCodePoint(...this.#details.codepoints)
|
||||||
ayahCount: this.#details.verse_count,
|
}
|
||||||
arabicCodePoints: this.#details.codepoints
|
|
||||||
}
|
get transliteratedName() {
|
||||||
|
return this.#details.transliterated_name;
|
||||||
|
}
|
||||||
|
|
||||||
|
get translatedName() {
|
||||||
|
return this.#details.translated_name;
|
||||||
|
}
|
||||||
|
|
||||||
|
get placeOfRevelation() {
|
||||||
|
return this.#details.place_of_revelation;
|
||||||
|
}
|
||||||
|
|
||||||
|
get numberOfAyah() {
|
||||||
|
return this.#details.verse_count;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
|
||||||
import useSurah from "hooks/useSurah";
|
import useSurah from "hooks/useSurah";
|
||||||
import { Timer } from "components/TheQuran/Timer";
|
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 classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
|
||||||
type PageProps = {
|
type PageProps = {
|
||||||
|
@ -42,6 +43,7 @@ function TheSurahPage({locale, surahId}: PageProps) {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
{streamIsLoaded && <AboutSurah surah={surah}/>}
|
||||||
{streamIsLoaded && <Stream surah={surah} stream={stream}/>}
|
{streamIsLoaded && <Stream surah={surah} stream={stream}/>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue