feat: added Juz Table of Contents (PR #3)

Adding Juz (Part) Table of Contents (TOC) in Sidebar

Author: HouariZegai

package-lock.json

@@ -7,25 +7,28 @@ import { LanguageProvider } from './contexts/LanguageContext';
 import Index from './pages/Index';
 import NotFound from './pages/NotFound';
 import { ThemeProvider } from 'next-themes';
+import { BrowserProvider } from './contexts/BrowserContext/BrowserProvider';
 
 const queryClient = new QueryClient();
 
 const App = () => (
   <QueryClientProvider client={queryClient}>
     <LanguageProvider>
-      <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-        <TooltipProvider>
-          <Toaster />
-          <Sonner />
-          <BrowserRouter>
-            <Routes>
-              <Route path="/" element={<Index />} />
-              {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-          </BrowserRouter>
-        </TooltipProvider>
-      </ThemeProvider>
+      <BrowserProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          <TooltipProvider>
+            <Toaster />
+            <Sonner />
+            <BrowserRouter>
+              <Routes>
+                <Route path="/" element={<Index />} />
+                {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            </BrowserRouter>
+          </TooltipProvider>
+        </ThemeProvider>
+      </BrowserProvider>
     </LanguageProvider>
   </QueryClientProvider>
 );

src/App.tsx

@@ -1,77 +1,31 @@
-import { useEffect, useRef, useState } from 'react';
-import { useIsMobile } from '@/hooks/use-mobile';
-import { Button } from '@/components/ui/button';
-import { ChevronLeft, ChevronRight, SkipBack, SkipForward } from 'lucide-react';
 import PageViewer from './PageViewer';
+import { Button } from '@/components/ui/button';
 import { useLanguage } from '@/contexts/LanguageContext';
+import { useBrowseQuran } from '@/lib/viewmodels/browse-quran.viewmodel';
+import { ChevronLeft, ChevronRight, SkipBack, SkipForward } from 'lucide-react';
 
 interface DocumentViewerProps {
   className?: string;
 }
 
 export default function DocumentViewer({ className }: DocumentViewerProps) {
-  const { t, isRTL, currentLanguage } = useLanguage();
-  const isMobile = useIsMobile();
   const totalPages = 604; // Total number of pages in the document
-  const [currentPage, setCurrentPage] = useState<number>(1);
-
-  // Navigation state
-  const [gotoPage, setGotoPage] = useState<string>('1');
-  const [gotoError, setGotoError] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Calculate page increment based on view and RTL
-  const pageIncrement = isMobile ? 1 : 2;
-
-  // Adjust page number when switching between mobile/desktop
-  useEffect(() => {
-    if (!isMobile && currentPage % 2 === 0) {
-      setCurrentPage((prev) => prev - 1);
-    }
-  }, [isMobile, currentPage]);
-
-  // Navigation handlers with RTL consideration
-  const goToNextPages = () => {
-    setCurrentPage((prev) => Math.min(totalPages, prev + pageIncrement));
-  };
-
-  const goToPreviousPages = () => {
-    setCurrentPage((prev) => Math.max(1, prev - pageIncrement));
-  };
-
-  const goToFirstPage = () => {
-    setCurrentPage(1);
-  };
-
-  const goToLastPage = () => {
-    const lastPage = isMobile ? totalPages : totalPages % 2 === 0 ? totalPages - 1 : totalPages;
-    setCurrentPage(lastPage);
-  };
-
-  const handleGoto = () => {
-    const page = parseInt(gotoPage, 10);
-    if (isNaN(page) || page < 1 || page > totalPages) {
-      setGotoError(t('pageNumberError', { min: 1, max: totalPages }));
-      inputRef.current?.focus();
-    } else {
-      setCurrentPage(page);
-      setGotoError(null);
-      setGotoPage(String(page));
-      inputRef.current?.blur();
-    }
-  };
-
-  const handleGotoInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      handleGoto();
-    }
-  };
+  const { t, isRTL, currentLanguage } = useLanguage();
 
-  useEffect(() => {
-    setGotoPage(String(currentPage));
-    setGotoError(null);
-  }, [currentPage]);
+  const {
+    isMobile,
+    currentPage,
+    gotoPage,
+    gotoError,
+    inputRef,
+    setGotoPage,
+    handleGoto,
+    handleGotoInputKeyDown,
+    goToNextPages,
+    goToPreviousPages,
+    goToFirstPage,
+    goToLastPage,
+  } = useBrowseQuran(totalPages);
 
   const getPageDisplay = () => {
     if (isMobile) {
@@ -81,7 +35,7 @@ export default function DocumentViewer({ className }: DocumentViewerProps) {
           pageNumber={currentPage}
           totalPages={totalPages}
           className="animate-fadeIn aspect-[3/4] w-full max-w-md"
-        />
+        />,
       ];
     }
 
@@ -97,22 +51,24 @@ export default function DocumentViewer({ className }: DocumentViewerProps) {
         pageNumber={currentPage}
         totalPages={totalPages}
         className="animate-slideInLeft aspect-[3/4] w-1/2 max-w-md"
-      />
+      />,
     ];
   };
 
   const getNavigationIcons = () => {
-    return isRTL ? {
-      first: <SkipForward className="h-4 w-4" />,
-      previous: <ChevronRight className="h-4 w-4" />,
-      next: <ChevronLeft className="h-4 w-4" />,
-      last: <SkipBack className="h-4 w-4" />
-    } : {
-      first: <SkipBack className="h-4 w-4" />,
-      previous: <ChevronLeft className="h-4 w-4" />,
-      next: <ChevronRight className="h-4 w-4" />,
-      last: <SkipForward className="h-4 w-4" />
-    };
+    return isRTL
+      ? {
+          first: <SkipForward className="h-4 w-4" />,
+          previous: <ChevronRight className="h-4 w-4" />,
+          next: <ChevronLeft className="h-4 w-4" />,
+          last: <SkipBack className="h-4 w-4" />,
+        }
+      : {
+          first: <SkipBack className="h-4 w-4" />,
+          previous: <ChevronLeft className="h-4 w-4" />,
+          next: <ChevronRight className="h-4 w-4" />,
+          last: <SkipForward className="h-4 w-4" />,
+        };
   };
 
   const icons = getNavigationIcons();
@@ -121,7 +77,11 @@ export default function DocumentViewer({ className }: DocumentViewerProps) {
     <div className={className} dir={isRTL ? 'rtl' : 'ltr'}>
       <div className="flex flex-col items-center space-y-8">
         {/* Pages container */}
-        <div className={`flex w-full items-center justify-center gap-1 md:gap-2 lg:gap-3 ${isRTL ? 'flex-row-reverse' : 'flex-row'}`}>
+        <div
+          className={`flex w-full items-center justify-center gap-1 md:gap-2 lg:gap-3 ${
+            isRTL ? 'flex-row-reverse' : 'flex-row'
+          }`}
+        >
           {getPageDisplay()}
         </div>
 

src/components/DocumentViewer.tsx

@@ -0,0 +1,53 @@
+import { BrowserContext } from '@/contexts/BrowserContext/BrowserContext';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { jozList } from '@/data/joz';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { X } from 'lucide-react';
+import React, { useContext } from 'react';
+
+const Sidebar = ({ setIsSidebarOpen }: { setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>> }) => {
+  const { isRTL } = useLanguage();
+  const isMobile = useIsMobile();
+
+  const { setCurrentPage } = useContext(BrowserContext);
+
+  return (
+    <aside
+      className={` ${
+        isMobile
+          ? 'fixed inset-0 z-50 flex flex-col bg-gray-100/95 px-4 pt-16 dark:bg-gray-800/95'
+          : `sticky top-20 max-h-[80vh] min-w-[220px] transform overflow-y-auto rounded-xl p-4 shadow-md ${
+              isRTL ? '' : 'md:order-first'
+            }`
+      } bg-gray-100 text-black transition-all duration-300 ease-in-out dark:bg-gray-800 dark:text-white`}
+    >
+      {isMobile && (
+        <button
+          onClick={() => setIsSidebarOpen(false)}
+          className={`absolute top-4 ${isRTL ? 'left-4' : 'right-4'} rounded-full bg-gray-200 p-2 dark:bg-gray-700`}
+        >
+          <X size={20} />
+        </button>
+      )}
+
+      <h2 className="mb-4 text-lg font-semibold tracking-wide">{isRTL ? 'قائمة الأجزاء' : 'Joz List'}</h2>
+      <ul className={`space-y-2 ${isMobile ? 'flex-1 overflow-y-auto' : ''}`}>
+        {jozList.map((element, index) => (
+          <li
+            key={index}
+            onClick={(e) => {
+              e.preventDefault();
+              setCurrentPage(element.page);
+              if (isMobile) setIsSidebarOpen(false);
+            }}
+            className="cursor-pointer rounded-md px-3 py-2 text-sm font-medium transition-all hover:scale-105 hover:bg-green-200 dark:hover:bg-green-700"
+          >
+            {element.name[isRTL ? 'ar' : 'en']}
+          </li>
+        ))}
+      </ul>
+    </aside>
+  );
+};
+
+export default Sidebar;

src/components/Sidebar.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+interface BrowserContextType {
+  gotoError: string | null;
+  setGotoError: React.Dispatch<React.SetStateAction<string>>;
+  gotoPage: string;
+  setGotoPage: React.Dispatch<React.SetStateAction<string>>;
+  currentPage: number;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const BrowserContext = createContext<BrowserContextType | undefined>(undefined);

src/contexts/BrowserContext/BrowserContext.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode, useState } from 'react';
+import { BrowserContext } from './BrowserContext';
+
+interface BrowserProviderProps {
+  children: ReactNode;
+}
+
+export const BrowserProvider: React.FC<BrowserProviderProps> = ({ children }) => {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [gotoPage, setGotoPage] = useState<string>('1');
+  const [gotoError, setGotoError] = useState<string | null>(null);
+
+  return (
+    <BrowserContext.Provider
+      value={{
+        currentPage,
+        setCurrentPage,
+        gotoPage,
+        setGotoPage,
+        gotoError,
+        setGotoError,
+      }}
+    >
+      {children}
+    </BrowserContext.Provider>
+  );
+};

src/contexts/BrowserContext/BrowserProvider.tsx

@@ -25,6 +25,7 @@ export const translations = {
     goTo: 'إنتقال',
     firstPage: 'الصفحة الأولى',
     previousPage: 'الصفحة السابقة',
+    lastPage: 'الصفحة السابقة',
     nextPage: 'الصفحة التالية',
     of: 'من',
     pageNumber: 'رقم الصفحة',
@@ -42,11 +43,12 @@ export const translations = {
     goTo: 'Go To',
     firstPage: 'First Page',
     previousPage: 'Previous Page',
+    lastPage: 'Last Page',
     nextPage: 'Next Page',
     of: 'of',
     pageNumber: 'Page Number',
     pageNumberError: 'Invalid page number',
-  }
+  },
 };
 
 export type TranslationKey = keyof (typeof translations)['ar'];
@@ -58,4 +60,5 @@ export interface LanguageContextType {
   isRTL: boolean;
   supportedLanguages: typeof SUPPORTED_LANGUAGES;
   isLoading: boolean;
+  currentLanguage: string; // Add this property
 }