Added useCallback in page-by-page read-mode

brownbeardeveloper · May 23, 2024 · 540eff1 · 540eff1
1 parent 4e5d0cc
commit 540eff1
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 124 deletions.
diff --git a/.github/workflows/azure-static-web-apps-calm-rock-07ad32503.yml b/.github/workflows/azure-static-web-apps-calm-rock-07ad32503.yml
diff --git a/src/components/read-mode-page.jsx b/src/components/read-mode-page.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import useDocumentTitle from "../functions/useDocumentTile.js";
 import brailleTranslator from "../functions/translator/brailleTranslator.js";
 import { filterUnnecessarySentence } from "../functions/filterSetences.js"
@@ -16,63 +16,9 @@ export default function ReadModePageByPage({ savedPageIndex, setSavedPageIndex,
 
   useDocumentTitle(pefObject.metaData.titel);
 
-  useEffect(() => {
-    // Resave the pages array when it changes
-    renderPagesFromPefObject();
-  }, [pefObject, bookView]);
-
-  useEffect(() => {
-    if (currentPageIndex === null && savedPageIndex) {
-      setCurrentPageIndex(savedPageIndex)
-    } else if (autoSave && currentPageIndex) {
-      setSavedPageIndex(currentPageIndex)
-    }
-  }, [autoSave, currentPageIndex, savedPageIndex]);
-
-  function handleNextPageBtn() {
-    if (currentPageIndex < maxPageIndex) {
-      setCurrentPageIndex(currentPageIndex + 1);
-    } else {
-      alert("Fel: Det finns inga fler sidor i boken.");
-    }
-  }
-
-  function handlePreviousPageBtn() {
-    if (currentPageIndex > firstPageIndex) {
-      setCurrentPageIndex(currentPageIndex - 1);
-    } else {
-      alert("Fel: Du kan inte gå längre bakåt i den här boken.");
-    }
-  }
-
-  function handleSetCurrentPage(index) {
-    if (currentPageIndex === index) {
-      if (index === firstPageIndex) {
-        alert('Du är redan på den första sidan.')
-      } else {
-        alert(`Du är redan på sidan ${index}.`)
-      }
-    } else {
-      setCurrentPageIndex(index)
-      return true
-    }
-  }
-
-  // Render the current page in html 
-  function showCurrentPage(pageIndex) {
-    if (pageIndex < firstPageIndex) {
-      return pages[firstPageIndex]
-    } else {
-      return pages[pageIndex]
-    }
-  }
-
-  function renderPagesFromPefObject() {
-    // Array to store pages
+  const renderPagesFromPefObject = useCallback(() => {
     const pagesFromPefObject = [];
-    // Variable to store index of the first page
     let firstPageIndex;
-    // Variable to track current page index
     let pageIndex = 1;
 
     const volumes = pefObject.bodyData.volumes;
@@ -85,22 +31,16 @@ export default function ReadModePageByPage({ savedPageIndex, setSavedPageIndex,
           if (section.pages) {
             const sectionPages = section.pages;
             for (let k = 0; k < sectionPages.length; k++) {
-
-              // Apply manipulation to page index if necessary
               k = manipulatePageIndexToRemoveUnnecessaryPages(sectionPages, k);
-              const page = sectionPages[k]
-              const thisPageIndex = pageIndex
+              const page = sectionPages[k];
+              const thisPageIndex = pageIndex;
               pageIndex++;
 
-              // Generate JSX element for page content
               const pageElement = page && page.rows && (
                 <div key={`${i}-${j}-${k}`}>
-                  <h3 id={`page-${thisPageIndex}`}
-                    className="font-black"
-                    tabIndex={0}>
+                  <h3 id={`page-${thisPageIndex}`} className="font-black" tabIndex={0}>
                     Sida {thisPageIndex}
                   </h3>
-
                   {page.rows.map((row, l) => (
                     <div key={`${i}-${j}-${k}-${l}`}>
                       <span>
@@ -113,19 +53,12 @@ export default function ReadModePageByPage({ savedPageIndex, setSavedPageIndex,
                 </div>
               );
 
-              // Save the page element if it's the first page index and there's a page element
               if (!firstPageIndex && pageElement) {
                 firstPageIndex = thisPageIndex;
                 pagesFromPefObject[thisPageIndex] = pageElement;
-              }
-              // Save the page element if there's a page element
-              else if (pageElement) {
+              } else if (pageElement) {
                 pagesFromPefObject[thisPageIndex] = pageElement;
-              }
-              // Move the page index back one page if the page element is empty
-              else {
-                // Use the following line for debugging to log which page index is missing
-                // console.error("Page index undefined:", thisPageIndex, "Page element:", pageElement);
+              } else {
                 pageIndex--;
               }
             }
@@ -134,15 +67,64 @@ export default function ReadModePageByPage({ savedPageIndex, setSavedPageIndex,
       }
     }
 
-    // Save the pages object into the pages array
     setPages(pagesFromPefObject);
-    // Set the start page index
     setFirstPageIndex(firstPageIndex);
-    // Set the maximum page index
     setMaxPageIndex(pageIndex - 1);
-    // Set the first page as the current page if there's no saved page index    
     if (savedPageIndex == null) setCurrentPageIndex(firstPageIndex);
-  };
+  }, [pefObject, bookView, savedPageIndex]);
+
+  useEffect(() => {
+    renderPagesFromPefObject();
+  }, [renderPagesFromPefObject]);
+
+  useEffect(() => {
+    if (currentPageIndex === null && savedPageIndex !== null) {
+      setCurrentPageIndex(savedPageIndex);
+    } else if (autoSave && currentPageIndex !== null) {
+      setSavedPageIndex(currentPageIndex);
+    }
+  }, [autoSave, currentPageIndex, savedPageIndex, setSavedPageIndex]);
+
+
+
+  function handleNextPageBtn() {
+    if (currentPageIndex < maxPageIndex) {
+      setCurrentPageIndex(currentPageIndex + 1);
+    } else {
+      alert("Fel: Det finns inga fler sidor i boken.");
+    }
+  }
+
+  function handlePreviousPageBtn() {
+    if (currentPageIndex > firstPageIndex) {
+      setCurrentPageIndex(currentPageIndex - 1);
+    } else {
+      alert("Fel: Du kan inte gå längre bakåt i den här boken.");
+    }
+  }
+
+  function handleSetCurrentPage(index) {
+    if (currentPageIndex === index) {
+      if (index === firstPageIndex) {
+        alert('Du är redan på den första sidan.')
+      } else {
+        alert(`Du är redan på sidan ${index}.`)
+      }
+    } else {
+      setCurrentPageIndex(index)
+      return true
+    }
+  }
+
+  // Render the current page in html 
+  function showCurrentPage(pageIndex) {
+    if (pageIndex < firstPageIndex) {
+      return pages[firstPageIndex]
+    } else {
+      return pages[pageIndex]
+    }
+  }
+
 
 
   return (