Merge pull request #2154 from quran/QF-352

QF-352: Update translation view initial data with the api data

src/components/QuranReader/TranslationView/hooks/useGetVersesCount.ts

@@ -0,0 +1,47 @@
+import { useContext, useMemo } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import useFetchPagesLookup from '@/components/QuranReader/hooks/useFetchPagesLookup';
+import DataContext from '@/contexts/DataContext';
+import { selectIsUsingDefaultFont } from '@/redux/slices/QuranReader/styles';
+import { generateVerseKeysBetweenTwoVerseKeys } from '@/utils/verseKeys';
+
+/**
+ * This hooks calculates the total number of verses based on the verses range
+ * and the current Mushaf settings
+ *
+ * @param {number|string} resourceId
+ * @param {QuranReaderDataType} quranReaderDataType
+ * @param {VersesResponse} initialData
+ * @param {QuranReaderStyles} quranReaderStyles
+ *
+ * @returns {number} versesCount
+ */
+
+const useGetVersesCount = ({
+  resourceId,
+  quranReaderDataType,
+  initialData,
+  quranReaderStyles,
+}): number => {
+  const isUsingDefaultFont = useSelector(selectIsUsingDefaultFont);
+  const { lookupRange } = useFetchPagesLookup(
+    resourceId,
+    quranReaderDataType,
+    initialData,
+    quranReaderStyles,
+    isUsingDefaultFont,
+  );
+
+  const chaptersData = useContext(DataContext);
+
+  const versesCount = useMemo(() => {
+    return generateVerseKeysBetweenTwoVerseKeys(chaptersData, lookupRange.from, lookupRange.to)
+      .length;
+  }, [chaptersData, lookupRange.from, lookupRange.to]);
+
+  return versesCount;
+};
+
+export default useGetVersesCount;

src/components/QuranReader/TranslationView/index.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable max-lines */
 /* eslint-disable react/no-multi-comp */
-import React, { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import onCopyQuranWords from '../onCopyQuranWords';
 import QueryParamMessage from '../QueryParamMessage';
 
+import useGetVersesCount from './hooks/useGetVersesCount';
 import useScrollToVirtualizedVerse from './hooks/useScrollToVirtualizedVerse';
 import styles from './TranslationView.module.scss';
 import TranslationViewVerse from './TranslationViewVerse';
@@ -63,6 +64,14 @@ const TranslationView = ({
   }: { value: string; isQueryParamDifferent: boolean } = useGetQueryParamOrReduxValue(
     QueryParam.WBW_LOCALE,
   );
+
+  const versesCount = useGetVersesCount({
+    resourceId,
+    quranReaderDataType,
+    initialData,
+    quranReaderStyles,
+  });
+
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   useScrollToVirtualizedVerse(
     quranReaderDataType,
@@ -75,7 +84,7 @@ const TranslationView = ({
   useQcfFont(quranReaderStyles.quranFont, verses);
 
   const itemContentRenderer = (verseIdx: number) => {
-    if (verseIdx === initialData.metaData.numberOfVerses) {
+    if (verseIdx === versesCount) {
       return (
         <EndOfScrollingControls
           quranReaderDataType={quranReaderDataType}
@@ -88,7 +97,7 @@ const TranslationView = ({
     return (
       <TranslationViewVerse
         verseIdx={verseIdx}
-        totalVerses={initialData.metaData.numberOfVerses}
+        totalVerses={versesCount}
         quranReaderDataType={quranReaderDataType}
         quranReaderStyles={quranReaderStyles}
         setApiPageToVersesMap={setApiPageToVersesMap}
@@ -123,7 +132,7 @@ const TranslationView = ({
         <Virtuoso
           ref={virtuosoRef}
           useWindowScroll
-          totalCount={initialData.metaData.numberOfVerses + 1}
+          totalCount={versesCount + 1}
           increaseViewportBy={INCREASE_VIEWPORT_BY_PIXELS}
           initialItemCount={1} // needed for SSR.
           itemContent={itemContentRenderer}