Merge pull request #2025 from quran/fix-font-issue

Fix Quran reader when switching languages
quran · Sep 14, 2023 · 14c0dd0 · 14c0dd0
2 parents 8ff73ed + cb96a67
commit 14c0dd0
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 49 deletions.
diff --git a/src/components/QuranReader/ReadingView/PageContainer.tsx b/src/components/QuranReader/ReadingView/PageContainer.tsx
@@ -1,7 +1,5 @@
-import React, { useEffect, useMemo, useContext } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
-import { useSelector as useXstateSelector } from '@xstate/react';
-import { useSelector } from 'react-redux';
 import useSWRImmutable from 'swr/immutable';
 
 import { getPageNumberByPageIndex } from '../utils/page';
@@ -10,10 +8,8 @@ import Page from './Page';
 import ReadingViewSkeleton from './ReadingViewSkeleton';
 
 import { getReaderViewRequestKey, verseFetcher } from '@/components/QuranReader/api';
-import { selectIsUsingDefaultWordByWordLocale } from '@/redux/slices/QuranReader/readingPreferences';
+import useIsUsingDefaultSettings from '@/hooks/useIsUsingDefaultSettings';
 import QuranReaderStyles from '@/redux/types/QuranReaderStyles';
-import { selectIsUsingDefaultReciter } from 'src/xstate/actors/audioPlayer/selectors';
-import { AudioPlayerMachineContext } from 'src/xstate/AudioPlayerMachineContext';
 import { VersesResponse } from 'types/ApiResponses';
 import LookupRecord from 'types/LookupRecord';
 import Verse from 'types/Verse';
@@ -27,7 +23,6 @@ type Props = {
   pageIndex: number;
   setMushafPageToVersesMap: (data: Record<number, Verse[]>) => void;
   initialData: VersesResponse;
-  isUsingDefaultFont: boolean;
 };
 
 const getPageVersesRange = (
@@ -75,7 +70,6 @@ const PageContainer: React.FC<Props> = ({
   pageIndex,
   setMushafPageToVersesMap,
   initialData,
-  isUsingDefaultFont,
 }: Props): JSX.Element => {
   const pageNumber = useMemo(
     () => getPageNumberByPageIndex(pageIndex, pagesVersesRange),
@@ -86,16 +80,8 @@ const PageContainer: React.FC<Props> = ({
     [initialData.verses, pageIndex, pageNumber],
   );
 
-  const audioService = useContext(AudioPlayerMachineContext);
-  const isUsingDefaultReciter = useXstateSelector(audioService, (state) =>
-    selectIsUsingDefaultReciter(state),
-  );
-  const isUsingDefaultWordByWordLocale = useSelector(selectIsUsingDefaultWordByWordLocale);
-  const shouldUseInitialData =
-    pageIndex === 0 &&
-    isUsingDefaultFont &&
-    isUsingDefaultReciter &&
-    isUsingDefaultWordByWordLocale;
+  const isUsingDefaultSettings = useIsUsingDefaultSettings();
+  const shouldUseInitialData = pageIndex === 0 && isUsingDefaultSettings;
   const { data: verses, isValidating } = useSWRImmutable(
     getReaderViewRequestKey({
       pageNumber,

diff --git a/src/components/QuranReader/ReadingView/index.tsx b/src/components/QuranReader/ReadingView/index.tsx
@@ -171,7 +171,6 @@ const ReadingView = ({
 
     return (
       <PageContainer
-        isUsingDefaultFont={isUsingDefaultFont}
         pagesVersesRange={pagesVersesRange}
         quranReaderStyles={quranReaderStyles}
         reciterId={reciterId}

diff --git a/...components/QuranReader/TranslationView/TranslationViewVerse/hooks/useDedupedFetchVerse.ts b/...components/QuranReader/TranslationView/TranslationViewVerse/hooks/useDedupedFetchVerse.ts
@@ -1,26 +1,18 @@
-import { useContext, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
-import { useSelector as useXstateSelector } from '@xstate/react';
 import useTranslation from 'next-translate/useTranslation';
 import { useRouter } from 'next/router';
-import { useSelector } from 'react-redux';
 import useSWRImmutable from 'swr/immutable';
 
 import { getTranslationViewRequestKey, verseFetcher } from '@/components/QuranReader/api';
-import { getTranslationsInitialState } from '@/redux/defaultSettings/util';
-import { selectIsUsingDefaultWordByWordLocale } from '@/redux/slices/QuranReader/readingPreferences';
-import { selectIsUsingDefaultFont } from '@/redux/slices/QuranReader/styles';
-import { selectIsUsingDefaultTranslations } from '@/redux/slices/QuranReader/translations';
+import useIsUsingDefaultSettings from '@/hooks/useIsUsingDefaultSettings';
 import QuranReaderStyles from '@/redux/types/QuranReaderStyles';
 import { VersesResponse } from '@/types/ApiResponses';
 import { Mushaf, QuranReaderDataType } from '@/types/QuranReader';
 import Verse from '@/types/Verse';
-import { areArraysEqual } from '@/utils/array';
 import { makeBookmarksRangeUrl } from '@/utils/auth/apiPaths';
 import { isLoggedIn } from '@/utils/auth/login';
 import { getPageNumberFromIndexAndPerPage } from '@/utils/number';
-import { selectIsUsingDefaultReciter } from 'src/xstate/actors/audioPlayer/selectors';
-import { AudioPlayerMachineContext } from 'src/xstate/AudioPlayerMachineContext';
 
 interface QuranReaderParams {
   quranReaderDataType: QuranReaderDataType;
@@ -65,34 +57,18 @@ const useDedupedFetchVerse = ({
 
   const { lang } = useTranslation();
 
-  const defaultTranslations = getTranslationsInitialState(lang).selectedTranslations;
   const translationParams = useMemo(
     () =>
       (router.query.translations as string)?.split(',')?.map((translation) => Number(translation)),
     [router.query.translations],
   );
 
-  const audioService = useContext(AudioPlayerMachineContext);
-
-  const isUsingDefaultReciter = useXstateSelector(audioService, (state) =>
-    selectIsUsingDefaultReciter(state),
-  );
-  const isUsingDefaultWordByWordLocale = useSelector(selectIsUsingDefaultWordByWordLocale);
-  const isUsingDefaultTranslations = useSelector(selectIsUsingDefaultTranslations);
-  const isUsingDefaultFont = useSelector(selectIsUsingDefaultFont);
-
   const pageNumber = getPageNumberFromIndexAndPerPage(verseIdx, initialData.pagination.perPage);
 
   const idxInPage = verseIdx % initialData.pagination.perPage;
 
-  const shouldUseInitialData =
-    pageNumber === 1 &&
-    isUsingDefaultFont &&
-    isUsingDefaultReciter &&
-    isUsingDefaultWordByWordLocale &&
-    isUsingDefaultTranslations &&
-    (!translationParams || areArraysEqual(defaultTranslations, translationParams));
-
+  const isUsingDefaultSettings = useIsUsingDefaultSettings({ translations: translationParams });
+  const shouldUseInitialData = pageNumber === 1 && isUsingDefaultSettings;
   const { data: verses } = useSWRImmutable(
     getTranslationViewRequestKey({
       quranReaderDataType,

diff --git a/src/hooks/useIsUsingDefaultSettings.tsx b/src/hooks/useIsUsingDefaultSettings.tsx
@@ -0,0 +1,59 @@
+import { useContext, useMemo } from 'react';
+
+import { useSelector as useXstateSelector } from '@xstate/react';
+import useTranslation from 'next-translate/useTranslation';
+import { useSelector } from 'react-redux';
+
+import {
+  getQuranReaderStylesInitialState,
+  getTranslationsInitialState,
+} from '@/redux/defaultSettings/util';
+import { selectIsUsingDefaultWordByWordLocale } from '@/redux/slices/QuranReader/readingPreferences';
+import { selectQuranFont, selectQuranMushafLines } from '@/redux/slices/QuranReader/styles';
+import { selectIsUsingDefaultTranslations } from '@/redux/slices/QuranReader/translations';
+import { areArraysEqual } from '@/utils/array';
+import { selectIsUsingDefaultReciter } from '@/xstate/actors/audioPlayer/selectors';
+import { AudioPlayerMachineContext } from '@/xstate/AudioPlayerMachineContext';
+
+const useIsUsingDefaultSettings = ({ translations }: { translations?: number[] } = {}) => {
+  const { lang } = useTranslation();
+  const audioService = useContext(AudioPlayerMachineContext);
+  const isUsingDefaultReciter = useXstateSelector(audioService, (state) =>
+    selectIsUsingDefaultReciter(state),
+  );
+  const isUsingDefaultWordByWordLocale = useSelector(selectIsUsingDefaultWordByWordLocale);
+  const isUsingDefaultTranslations = useSelector(selectIsUsingDefaultTranslations);
+
+  const quranFont = useSelector(selectQuranFont);
+  const mushafLines = useSelector(selectQuranMushafLines);
+
+  const defaultState = useMemo(() => {
+    return {
+      quranReaderStyles: getQuranReaderStylesInitialState(lang),
+      translations: getTranslationsInitialState(lang),
+    };
+  }, [lang]);
+
+  const isUsingDefaultFont =
+    defaultState.quranReaderStyles.quranFont === quranFont &&
+    defaultState.quranReaderStyles.mushafLines === mushafLines;
+
+  const areTranslationsEqual = useMemo(() => {
+    if (!translations) {
+      return false;
+    }
+
+    return areArraysEqual(defaultState.translations.selectedTranslations, translations);
+  }, [translations, defaultState.translations.selectedTranslations]);
+
+  const isUsingDefaultSettings =
+    isUsingDefaultFont && isUsingDefaultReciter && isUsingDefaultWordByWordLocale;
+
+  if (translations) {
+    return isUsingDefaultSettings && isUsingDefaultTranslations && areTranslationsEqual;
+  }
+
+  return isUsingDefaultSettings;
+};
+
+export default useIsUsingDefaultSettings;
diff --git a/src/redux/slices/QuranReader/styles.ts b/src/redux/slices/QuranReader/styles.ts
@@ -110,11 +110,14 @@ export const quranReaderStylesSlice = createSlice({
         PreferenceGroup.QURAN_READER_STYLES
       ] as QuranReaderStyles;
       if (remotePreferences) {
-        const { quranFont: defaultQuranFont } = getQuranReaderStylesInitialState(locale);
+        const { quranFont: defaultQuranFont, mushafLines: defaultMushafLines } =
+          getQuranReaderStylesInitialState(locale);
         return {
           ...state,
           ...remotePreferences,
-          isUsingDefaultFont: defaultQuranFont === remotePreferences.quranFont,
+          isUsingDefaultFont:
+            defaultQuranFont === remotePreferences.quranFont &&
+            defaultMushafLines === remotePreferences.mushafLines,
         };
       }
       return state;