refactor(bookmarks): improve code quality and type safety

- Create useBookmarkBase hook for shared bookmark functionality
- Extract useCollections and useBookmarkCollections hooks from SaveToCollectionAction
- Add isBookmarkSyncError utility to centralize error checking
- Strengthen Bookmark type to use BookmarkType enum instead of string
- Standardize API parameter naming (mushafId) with proper TypeScript types
- Refactor usePageBookmark and useVerseBookmark to use base hook
- Fix BookmarkIcon to properly use useVerseBookmark hook
- Use reactive useIsLoggedIn hook consistently across components
- Add Sentry error logging to useSyncUserData
- Rename Collection to CollectionOption in SaveToCollectionModal for clarity

Author: AhmedCodeGuy

src/components/Collection/SaveToCollectionModal/SaveToCollectionModal.tsx

@@ -15,16 +15,20 @@ import { logButtonClick, logEvent } from '@/utils/eventLogger';
 import { RuleType } from 'types/FieldRule';
 import { FormFieldType } from 'types/FormField';
 
-export type Collection = {
+/**
+ * UI-specific collection type for the save modal with checked state
+ * This is different from types/Collection which is the API response type
+ */
+export type CollectionOption = {
   id: string;
   name: string;
   checked?: boolean;
 };
 
 type SaveToCollectionModalProps = {
   isOpen: boolean;
-  collections: Collection[];
-  onCollectionToggled: (collection: Collection, newValue: boolean) => void;
+  collections: CollectionOption[];
+  onCollectionToggled: (collection: CollectionOption, newValue: boolean) => void;
   onNewCollectionCreated: (name: string) => Promise<void>;
   onClose?: () => void;
   verseKey: string;
@@ -68,7 +72,7 @@ const SaveToCollectionModal = ({
     logButtonClick('save_to_collection_add_new_collection');
   };
 
-  const handleCheckboxChange = (collection: Collection) => (checked: boolean) => {
+  const handleCheckboxChange = (collection: CollectionOption) => (checked: boolean) => {
     const eventData = {
       verseKey,
       collectionId: collection.id,

src/components/QuranReader/TranslationView/BookmarkIcon.tsx

@@ -1,92 +1,49 @@
-/* eslint-disable react-func/max-lines-per-function */
-import { useMemo } from 'react';
-
 import classNames from 'classnames';
 import useTranslation from 'next-translate/useTranslation';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { useSWRConfig } from 'swr';
+import { shallowEqual, useSelector } from 'react-redux';
 
 import styles from './TranslationViewCell.module.scss';
 
 import Button, { ButtonSize, ButtonVariant } from '@/dls/Button/Button';
-import { ToastStatus, useToast } from '@/dls/Toast/Toast';
+import useVerseBookmark from '@/hooks/useVerseBookmark';
 import BookmarkedIcon from '@/icons/bookmark.svg';
-import { selectBookmarks, toggleVerseBookmark } from '@/redux/slices/QuranReader/bookmarks';
 import { selectQuranReaderStyles } from '@/redux/slices/QuranReader/styles';
 import { getMushafId } from '@/utils/api';
-import { deleteBookmarkById } from '@/utils/auth/api';
-import { makeBookmarkUrl } from '@/utils/auth/apiPaths';
-import { isLoggedIn } from '@/utils/auth/login';
 import { logButtonClick } from '@/utils/eventLogger';
-import BookmarksMap from 'types/BookmarksMap';
-import BookmarkType from 'types/BookmarkType';
 import Verse from 'types/Verse';
 
 type Props = {
   verse: Verse;
-  pageBookmarks: BookmarksMap | undefined;
   bookmarksRangeUrl: string;
 };
 
-const BookmarkIcon: React.FC<Props> = ({ verse, pageBookmarks, bookmarksRangeUrl }) => {
+/**
+ * BookmarkIcon component that shows a bookmark icon for bookmarked verses.
+ * Only renders when the verse is bookmarked.
+ *
+ * @returns {JSX.Element | null} The bookmark icon button or null if not bookmarked
+ */
+const BookmarkIcon: React.FC<Props> = ({ verse, bookmarksRangeUrl }) => {
   const { t } = useTranslation('quran-reader');
   const quranReaderStyles = useSelector(selectQuranReaderStyles, shallowEqual);
-  const bookmarkedVerses = useSelector(selectBookmarks, shallowEqual);
-  const { cache, mutate } = useSWRConfig();
-  const toast = useToast();
-  const dispatch = useDispatch();
-
-  const isVerseBookmarked = useMemo(() => {
-    const isUserLoggedIn = isLoggedIn();
-    if (isUserLoggedIn && pageBookmarks) {
-      return !!pageBookmarks[verse.verseKey];
-    }
-    return !!bookmarkedVerses[verse.verseKey];
-  }, [bookmarkedVerses, pageBookmarks, verse.verseKey]);
+  const mushafId = getMushafId(quranReaderStyles.quranFont, quranReaderStyles.mushafLines).mushaf;
 
+  const { isVerseBookmarked, handleToggleBookmark } = useVerseBookmark({
+    verse: {
+      verseKey: verse.verseKey,
+      verseNumber: verse.verseNumber,
+      chapterId: verse.chapterId,
+    },
+    mushafId,
+    bookmarksRangeUrl,
+  });
+
+  // Only show the icon when the verse is bookmarked
   if (!isVerseBookmarked) return null;
 
-  const mushafId = getMushafId(quranReaderStyles.quranFont, quranReaderStyles.mushafLines).mushaf;
-
   const onClick = () => {
     logButtonClick('translation_view_un_bookmark_verse');
-
-    if (isLoggedIn()) {
-      const bookmarkedVersesRange = cache.get(bookmarksRangeUrl);
-      const nextBookmarkedVersesRange = {
-        ...bookmarkedVersesRange,
-        [verse.verseKey]: !isVerseBookmarked,
-      };
-      mutate(bookmarksRangeUrl, nextBookmarkedVersesRange, {
-        revalidate: false,
-      });
-
-      cache.delete(
-        makeBookmarkUrl(
-          mushafId,
-          Number(verse.chapterId),
-          BookmarkType.Ayah,
-          Number(verse.verseNumber),
-        ),
-      );
-
-      const bookmarkId = pageBookmarks[verse.verseKey].id;
-      if (bookmarkId) {
-        deleteBookmarkById(bookmarkId).catch((err) => {
-          if (err.status === 400) {
-            toast(t('common:error.bookmark-sync'), {
-              status: ToastStatus.Error,
-            });
-            return;
-          }
-          toast(t('common:error.general'), {
-            status: ToastStatus.Error,
-          });
-        });
-      }
-    } else {
-      dispatch(toggleVerseBookmark(verse.verseKey));
-    }
+    handleToggleBookmark();
   };
 
   return (