src/js: extract surah id, and locale from location.pathname

src/js/components/TheQuran/Stream.tsx

@@ -9,10 +9,11 @@ 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.num} className="ayah fade">
-        <span>Surah 1, Ayah {ayah.num}</span>
+      <li key={ayah.id} className="ayah fade">
+        <span>Surah {surahInfo.id}, Ayah {ayah.id}</span>
         <p>{ayah.text}</p>
       </li>
     );

src/js/components/TheQuran/Timer.tsx

@@ -15,7 +15,7 @@ export function Timer({surah, ayah, stream, setStream}: TimerProps) {
     if (stream.length === surah.ayat.length) {
       return;
     } else if (ms <= 0) {
-      setStream([...stream, surah.ayat[ayah.num]]);
+      setStream([...stream, surah.ayat[ayah.id]]);
     } else {
       setTimeout(() => setMs(ms - 100), 100);
     }

src/js/lib/Quran/Surah.ts

@@ -1,4 +1,4 @@
-type SurahDetails = {
+type SurahInfo = {
   id: string,
   place_of_revelation: string,
   transliterated_name: string,
@@ -7,38 +7,38 @@ type SurahDetails = {
   slug: string,
   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 class Surah {
-  #details: SurahDetails;
+  #details: SurahInfo;
   ayat: Ayat;
 
-  static fromJSON(details: SurahDetails, ayat: Array<[number, string]>): Surah {
+  static fromJSON(details: SurahInfo, ayat: Array<[number, string]>): Surah {
     return new Surah(
       details,
-      ayat.map(([num, text]) => {
+      ayat.map(([id, text]) => {
         return {
-          num, text,
+          id, text,
           readingTime: text.split(" ").length * 500,
         }
       })
     );
   }
 
-  constructor(details: SurahDetails, ayat: Ayat) {
+  constructor(details: SurahInfo, ayat: Ayat) {
     this.#details = details;
     this.ayat = ayat;
   }
 
-  getDetails() {
-    const {
-      id,
-      place_of_revelation: placeOfRevelation,
-      transliterated_name: transliteratedName,
-      translated_name: translatedName,
-      verse_count: ayahCount,
-      codepoints: arabicCodePoints
-    } = this.#details;
+  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
+    }
   }
 }

src/js/pages/TheSurahPage.tsx

@@ -5,8 +5,13 @@ import { Timer } from "components/TheQuran/Timer";
 import { Stream } from "components/TheQuran/Stream";
 import classNames from "classnames";
 
-function TheSurahPage() {
-  const { surahIsLoaded, surah } = useSurah("en", 1);
+type PageProps = {
+  locale: string,
+  surahId: number
+}
+
+function TheSurahPage({locale, surahId}: PageProps) {
+  const { surahIsLoaded, surah } = useSurah(locale, surahId);
   const [stream, setStream] = useState([]);
   const [theme , setTheme] = useState("moon");
   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"));
-root.render(<TheSurahPage/>);
+root.render(<TheSurahPage locale={locale} surahId={parseInt(surahId)}/>);