feat: scroll to ayah

src/components/TopBar/DropdownSurahLists/DropdownSurahLists.tsx

@@ -3,10 +3,10 @@
 import classNames from 'classnames';
 import React, { useState, useCallback } from 'react';
 import ChapterLists from './ChapterLists';
-import IndexOfChapterLists from './IndexOfChapterLists';
 import Link from 'next/link';
 import { ChevronIcon, ArrowIcon } from '../../icons';
 import { LocalChapter } from 'data/chapter/type';
+import VerseList from './VerseList';
 
 type DropdownSurahListsProps = {
   chapterLists: LocalChapter[];
@@ -90,7 +90,7 @@ const DropdownSurahLists = ({
             }
             chapterActive={chapterActive}
           />
-          <IndexOfChapterLists
+          <VerseList
             chapterLists={chapterLists}
             chapterId={chapterActive - 1} // -1 because array start from 0
           />

src/components/TopBar/DropdownSurahLists/IndexOfChapterLists.tsx → src/components/TopBar/DropdownSurahLists/VerseList.tsx

@@ -1,25 +1,14 @@
 import classNames from 'classnames';
 import { LocalChapter } from 'data/chapter/type';
-import { useCallback } from 'react';
+import { useRouter } from 'next/navigation';
 
-type IndexOfChapterListsProps = {
+type VerseListProps = {
   chapterLists: LocalChapter[];
   chapterId: number;
 };
 
-const IndexOfChapterLists = ({
-  chapterLists,
-  chapterId,
-}: IndexOfChapterListsProps) => {
-  const scrollToSpecificVerse = useCallback((verseKey: string) => {
-    const verseElement = document.querySelector(
-      `[data-verse="${verseKey}"]`
-    ) as HTMLElement;
-
-    if (!verseElement) return;
-    const verseYLocation = verseElement.offsetTop;
-    window.scrollTo(0, verseYLocation - 120);
-  }, []);
+const VerseList = ({ chapterLists, chapterId }: VerseListProps) => {
+  const router = useRouter();
 
   return (
     <ul
@@ -31,10 +20,10 @@ const IndexOfChapterLists = ({
         .fill(0)
         .map((key, index) => (
           <li
-            key={index}
             onClick={() =>
-              scrollToSpecificVerse(`${chapterId + 1}:${index + 1}`)
+              router.push(`/quran/surah/${chapterId + 1}?ayah=${index + 1}`)
             }
+            key={index}
             className="p-1 cursor-pointer hover:bg-emerald-100 dark:hover:bg-emerald-400 dark:hover:text-slate-100 hover:text-emerald-500 rounded flex items-center"
           >
             {index + 1}
@@ -44,4 +33,4 @@ const IndexOfChapterLists = ({
   );
 };
 
-export default IndexOfChapterLists;
+export default VerseList;

src/components/quranReader/FetchInfiniteVerse.tsx

@@ -9,6 +9,7 @@ import { getVerses } from '@utils/verse';
 import useQuranReader from '@stores/quranReaderStore';
 import { shallow } from 'zustand/shallow';
 import useSettings from '@stores/settingsStore';
+import { useSearchParams } from 'next/navigation';
 
 type Props = {
   totalData: number;
@@ -21,6 +22,7 @@ const FetchInfiniteVerse = ({ totalData, id, getVerseBy }: Props) => {
   const [data, setData] = useState<Verse[]>([]);
   const [paginationData, setPaginationData] = useState<VersePagination>();
   const [itemsRendered, setItemsRendered] = useState<ListItem<any>[]>();
+  const searchParams = useSearchParams();
 
   const ref = useRef<VirtuosoHandle>(null);
   const { highlightedWord, highlightedVerse, currentChapter } = useQuranReader(
@@ -86,6 +88,16 @@ const FetchInfiniteVerse = ({ totalData, id, getVerseBy }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [highlightedWord]);
 
+  useEffect(() => {
+    if (!searchParams.get('ayah')) return;
+    const verseNumber = Number(searchParams.get('ayah'));
+    if (verseNumber <= LIMIT) return; // because the first verse is already rendered on the server
+    ref.current.scrollToIndex({
+      index: verseNumber - LIMIT - 1,
+      align: 'center',
+    });
+  }, [searchParams]);
+
   const renderRow = (index: number) => {
     const dataIndex = index;
     if (!data[dataIndex]) {

src/components/quranReader/InitialSurahVerse.tsx

@@ -1,6 +1,7 @@
 import { Verse } from '@utils/types/Verse';
 import React from 'react';
 import Verses from './Verses';
+import ScrollToAyah from './ScrollToAyah';
 
 type Props = {
   versesData: Verse[];
@@ -9,6 +10,7 @@ type Props = {
 const InitialSurahVerse = ({ versesData }: Props) => {
   return (
     <>
+      <ScrollToAyah />
       {versesData.map((verse) => (
         <Verses
           key={verse.id}

src/components/quranReader/ScrollToAyah.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useParams, useSearchParams } from 'next/navigation';
+import React, { useEffect } from 'react';
+
+const ScrollToAyah = () => {
+  const searchParams = useSearchParams();
+  const params = useParams();
+
+  useEffect(() => {
+    if (!searchParams.has('ayah')) return;
+    const ayah = searchParams.get('ayah');
+    if (Number(ayah) > 20) return;
+    const verseElement = document.querySelector(
+      `[data-verse="${params.chapterId}:${ayah}"]`
+    ) as HTMLElement;
+
+    if (!verseElement) return;
+
+    verseElement.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'center',
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams]);
+  return <></>;
+};
+
+export default ScrollToAyah;

src/components/quranReader/Verses.tsx

@@ -37,7 +37,7 @@ const Verses = ({
     return (
       <>
         <div
-          id={verse_number.toString()}
+          id={id.toString()}
           className="flex justify-between py-3 md:flex-row flex-col"
         >
           <div className="flex md:flex-col flex-row items-center mb-4">