fix: error at chapter has verse below 20

aacmal · Jun 26, 2023 · 1eeefc3 · 1eeefc3
1 parent 3b3d0ad
commit 1eeefc3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/components/quranReader/DynamicSurahVerse.tsx b/src/components/quranReader/DynamicSurahVerse.tsx
@@ -57,6 +57,17 @@ const DynamicSurahVerse = ({ totalData, chapterId }: Props) => {
     });
   };
 
+  const initData = () => {
+    getVersesByChapter({
+      chapterId,
+      page: 2,
+      per_page: LIMIT,
+    }).then((res) => {
+      setPaginationData(res.pagination);
+      setData(res.verses);
+    });
+  };
+
   useEffect(() => {
     if (!highlightedVerse || !ref.current || !autoScroll) return;
     const idAndVerse = highlightedVerse.split(':');
@@ -74,21 +85,6 @@ const DynamicSurahVerse = ({ totalData, chapterId }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [highlightedWord]);
 
-  useEffect(() => {
-    function getInitialData() {
-      getVersesByChapter({
-        chapterId,
-        page: 2,
-        per_page: LIMIT,
-      }).then((res) => {
-        setPaginationData(res.pagination);
-        setData(res.verses);
-      });
-    }
-
-    getInitialData();
-  }, []);
-
   const renderRow = (index: number) => {
     const dataIndex = data.findIndex(
       (item) => item.verse_number - LIMIT - 1 === index
@@ -112,12 +108,13 @@ const DynamicSurahVerse = ({ totalData, chapterId }: Props) => {
 
   return (
     <Virtuoso
-      totalCount={totalData - LIMIT}
+      totalCount={totalData > 20 ? totalData - LIMIT : 0}
       useWindowScroll
       itemContent={renderRow}
       rangeChanged={loadMoreData}
       itemsRendered={(items) => setItemsRendered(items)}
       ref={ref}
+      startReached={initData}
     />
   );
 };

diff --git a/src/components/quranReader/QuranReader.tsx b/src/components/quranReader/QuranReader.tsx
@@ -1,8 +1,11 @@
-import Verses from './Verses';
 import Bismillah from './Bismillah';
 import { Verse } from '@utils/types/Verse';
 import InitialSurahVerse from './InitialSurahVerse';
-import DynamicSurahVerse from './DynamicSurahVerse';
+import dynamic from 'next/dynamic';
+
+const DynamicSurahVerse = dynamic(() => import('./DynamicSurahVerse'), {
+  ssr: false,
+});
 
 type QuranReaderProps = {
   versesData: Verse[];