Adjusted the savedPageIndex function in 'flow' read-mode

brownbeardeveloper · May 28, 2024 · 377cca5 · 377cca5
1 parent fe71524
commit 377cca5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/components/read-mode-flow.jsx b/src/components/read-mode-flow.jsx
@@ -28,10 +28,11 @@ export default function ReadModeFlow({ cookiePermission, savedPageIndex, setSave
     } else {
       console.error('Error: There is no saved page index or cookie.');
     }
-  }, [pefObject, bookView, savedPageIndex]); // remove savedPageIndex and use callback 
+  }, [pefObject, bookView]); // remove savedPageIndex and use callback 
 
   useEffect(() => {
     if (autoSave) {
+
       // Get the scrollable element by its ID
       const scrollableElement = document.getElementById("pages-scrollable-element");
       if (!scrollableElement) return;
@@ -40,12 +41,14 @@ export default function ReadModeFlow({ cookiePermission, savedPageIndex, setSave
         const pages = scrollableElement.querySelectorAll("[id^='page-']");
         let lastVisiblePageIndex = null;
 
+        // Get the top position of the scrollable element
+        const scrollableElementTop = scrollableElement.getBoundingClientRect().top;
+
         // Loop through each page to determine which one is currently visible
         pages.forEach(page => {
           const rect = page.getBoundingClientRect();
-          // Check if the top of the page is within the viewport of the scrollable element
-          // and if the bottom of the page is below the top of the scrollable element
-          if (rect.top >= 0 && rect.bottom <= scrollableElement.clientHeight) {
+          // Check if the bottom of the H3 page-id is above or equal to the top of the viewport of the scrollable element          
+          if (rect.top <= scrollableElementTop) {
             lastVisiblePageIndex = parseInt(page.id.replace("page-", ""), 10);
           }
         });
@@ -212,6 +215,10 @@ export default function ReadModeFlow({ cookiePermission, savedPageIndex, setSave
           </div>
         }
 
+        <div className="bg-red-500">
+          debug savedPageIndex: {savedPageIndex}
+        </div>
+
         {cookiePermission === CookieEnum.DENIED &&
           <div className="bg-yellow-200 border border-yellow-300 px-4 py-2 mt-5 mb-1 rounded relative w-full text-center" role="alert">
             <span tabIndex={0}>

diff --git a/src/components/upload-file.jsx b/src/components/upload-file.jsx
@@ -45,6 +45,7 @@ export default function UploadFile({ setSavedPageIndex, setReadmode, pefObject,
             } else {
                 alert(`Fel: Filtypen ${event.target.files[0].type} som du försöker ladda är inte en PEF-fil.`);
                 setFileLoadStatus(FileLoadStatusEnum.FAILED)
+                setFileName('filen kunde inte laddas upp.')
             }
         } else {
             setFileName('ingen fil vald');
@@ -159,9 +160,9 @@ export default function UploadFile({ setSavedPageIndex, setReadmode, pefObject,
                 )}
 
                 {fileLoadStatus === FileLoadStatusEnum.FAILED && (
-                    <div className="flex flex-row items-center bg-red-100 text-red-700 rounded-lg pl-5 p-3 shadow-md max-w-md">
+                    <div className="flex flex-row items-center bg-red-100 text-red-700 rounded pl-5 p-3 shadow-md max-w-md">
                         <span className="font-semibold text-sm" tabIndex={0}>
-                            Uppladdningen misslyckades. Uppdatera sidan och försök igen innan du kontaktar kundtjänsten <a href="https://www.legimus.se/kontakt/kontakta-mtm/" class="underline">här</a>.
+                            Uppladdningen misslyckades. Uppdatera sidan och försök igen innan du kontaktar kundtjänsten <a href="/kontakt" class="underline">här</a>.
                         </span>
                     </div>
                 )}