Fix: Questions button not showing due to incorrect data structure access

src/components/QuranReader/ReadingView/Buttons/QuestionsButton/index.tsx

@@ -24,7 +24,7 @@ const QuestionsButton: React.FC<Props> = ({ verseKey, onActionTriggered }) => {
   const { t, lang } = useTranslation('quran-reader');
   const router = useRouter();
   const [isContentModalOpen, setIsContentModalOpen] = useState(false);
-  const hasQuestions = pageQuestionsCount && pageQuestionsCount[verseKey] > 0;
+  const hasQuestions = pageQuestionsCount && pageQuestionsCount[verseKey]?.total > 0;
   const onButtonClicked = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     e.preventDefault();

src/components/QuranReader/ReadingView/context/PageQuestionsContext.tsx

@@ -1,6 +1,10 @@
 import { createContext, useContext } from 'react';
 
-export const PageQuestionsContext = createContext<Record<string, number> | undefined>(undefined);
+import { QuestionData } from '@/utils/auth/api';
+
+export const PageQuestionsContext = createContext<Record<string, QuestionData> | undefined>(
+  undefined,
+);
 
 export const usePageQuestions = () => {
   const context = useContext(PageQuestionsContext);

src/components/QuranReader/TranslationView/TranslationViewVerse/TranslationPageVerse.tsx

@@ -104,8 +104,8 @@ const TranslationPageVerse: React.FC<TranslationPageVerse> = ({
     };
   }, [isLastVerseInView, verse, verseKeysQueue]);
 
-  const hasQuestions = questionsCount && questionsCount[verse.verseKey] > 0;
-  const hasNotes = notesCount && notesCount[verse.verseKey] > 0;
+  const hasQuestions = questionsCount?.[verse.verseKey]?.total > 0;
+  const hasNotes = notesCount?.[verse.verseKey] > 0;
 
   return (
     <div

src/hooks/auth/useCountRangeQuestions.ts

@@ -2,7 +2,7 @@ import useTranslation from 'next-translate/useTranslation';
 import useSWRImmutable from 'swr/immutable';
 
 import Language from '@/types/Language';
-import { countQuestionsWithinRange } from '@/utils/auth/api';
+import { countQuestionsWithinRange, QuestionData } from '@/utils/auth/api';
 import { makeCountQuestionsWithinRangeUrl } from '@/utils/auth/apiPaths';
 
 type Range = {
@@ -11,18 +11,18 @@ type Range = {
 };
 
 type CountRangeQuestionsResponse = {
-  data: Record<string, number>;
+  data: Record<string, QuestionData>;
   isLoading: boolean;
   error: Error | null;
 };
 
 const useCountRangeQuestions = (questionsRange: Range): CountRangeQuestionsResponse => {
   const { lang } = useTranslation();
-  const { data, isValidating, error } = useSWRImmutable<Record<string, number>>(
+  const { data, isValidating, error } = useSWRImmutable<Record<string, QuestionData>>(
     questionsRange
       ? makeCountQuestionsWithinRangeUrl(questionsRange.from, questionsRange.to, lang as Language)
       : null,
-    async (): Promise<Record<string, number>> => {
+    async (): Promise<Record<string, QuestionData>> => {
       return countQuestionsWithinRange(questionsRange.from, questionsRange.to, lang as Language);
     },
   );

src/utils/auth/api.ts

@@ -478,11 +478,16 @@ export const addCollection = async (collectionName: string) => {
   return postRequest(makeAddCollectionUrl(), { name: collectionName });
 };
 
+export type QuestionData = {
+  types: Record<string, number>;
+  total: number;
+};
+
 export const countQuestionsWithinRange = async (
   from: string,
   to: string,
   language: Language,
-): Promise<Record<string, number>> => {
+): Promise<Record<string, QuestionData>> => {
   return privateFetcher(makeCountQuestionsWithinRangeUrl(from, to, language));
 };