Surah.ts: add getters

src/js/components/TheQuran/AboutSurah.tsx

@@ -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>
+  );
+}

src/js/components/TheQuran/Stream.tsx

@@ -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>
     );

src/js/lib/Quran/Surah.ts

@@ -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;
   }
 }

src/js/pages/TheSurahPage.tsx

@@ -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>
   );