From 9a14a2e1bb75b74719104b799b148b2f5677ddd8 Mon Sep 17 00:00:00 2001
From: cballevre <celestin.ballevre@protonmail.com>
Date: Mon, 4 Nov 2024 17:55:04 +0100
Subject: [PATCH] fix: Load more files if the current id is not already loaded

---
 src/modules/views/Public/PublicFileViewer.jsx | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/modules/views/Public/PublicFileViewer.jsx b/src/modules/views/Public/PublicFileViewer.jsx
index ccb22cd430..75f99bb2a9 100644
--- a/src/modules/views/Public/PublicFileViewer.jsx
+++ b/src/modules/views/Public/PublicFileViewer.jsx
@@ -1,5 +1,5 @@
 import { useCurrentFolderId } from 'hooks'
-import React, { useMemo } from 'react'
+import React, { useMemo, useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 
 import FooterActionButtons from 'cozy-ui/transpiled/react/Viewer/Footer/FooterActionButtons'
@@ -13,6 +13,8 @@ const PublicFileViewer = () => {
   const { fileId } = useParams()
   const navigate = useNavigate()
 
+  const [fetchingMore, setFetchingMore] = useState(false)
+
   const currentFolderId = useCurrentFolderId()
 
   const filesResult = usePublicFilesQuery(currentFolderId)
@@ -27,6 +29,33 @@ const PublicFileViewer = () => {
     [hasCurrentIndex, currentIndex]
   )
 
+  useEffect(() => {
+    let isMounted = true
+
+    // If we can found the current file but we know there is more file inside the folder
+    const fetchMoreIfNecessary = async () => {
+      if (fetchingMore) {
+        return
+      }
+
+      setFetchingMore(true)
+      try {
+        const currentIndex = viewableFiles.findIndex(f => f.id === fileId)
+        if (currentIndex === -1 && filesResult.hasMore && isMounted) {
+          await filesResult.fetchMore()
+        }
+      } finally {
+        setFetchingMore(false)
+      }
+    }
+
+    fetchMoreIfNecessary()
+
+    return () => {
+      isMounted = false
+    }
+  }, [fetchingMore, filesResult, fileId, viewableFiles])
+
   const handleChange = ({ _id }) => {
     navigate(`../${_id}`, {
       relative: 'path'