Surah.ts: add getters

This commit is contained in:
0x1eef 2022-10-31 13:37:25 -03:00
parent f28725d0f3
commit 4dd2d20766
4 changed files with 44 additions and 15 deletions

View 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>
);
}

View file

@ -9,11 +9,10 @@ type StreamProps = {
export function Stream({surah, stream}: StreamProps) {
const endOfStream = stream.length === surah.ayat.length;
const surahInfo = surah.getInfo();
const ayat = stream.map((ayah: Ayah) => {
return (
<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>
</li>
);

View file

@ -1,4 +1,4 @@
type SurahInfo = {
type SurahDetails = {
id: string,
place_of_revelation: string,
transliterated_name: string,
@ -11,10 +11,10 @@ export type Ayah = {id: number, text: string, readingTime: number};
export type Ayat = Array<Ayah>;
export class Surah {
#details: SurahInfo;
#details: SurahDetails;
ayat: Ayat;
static fromJSON(details: SurahInfo, ayat: Array<[number, string]>): Surah {
static fromJSON(details: SurahDetails, ayat: Array<[number, string]>): Surah {
return new Surah(
details,
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.ayat = ayat;
}
getInfo() {
return {
id: this.#details.id,
placeOfRevelation: this.#details.place_of_revelation,
transliteratedName: this.#details.transliterated_name,
translatedName: this.#details.translated_name,
ayahCount: this.#details.verse_count,
arabicCodePoints: this.#details.codepoints
}
get id() {
return this.#details.id;
}
get name() {
return String.fromCodePoint(...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;
}
}

View file

@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
import useSurah from "hooks/useSurah";
import { Timer } from "components/TheQuran/Timer";
import { Stream } from "components/TheQuran/Stream";
import { AboutSurah } from "components/TheQuran/AboutSurah";
import classNames from "classnames";
type PageProps = {
@ -42,6 +43,7 @@ function TheSurahPage({locale, surahId}: PageProps) {
/>
</div>
}
{streamIsLoaded && <AboutSurah surah={surah}/>}
{streamIsLoaded && <Stream surah={surah} stream={stream}/>}
</div>
);