Merge pull request #4337 from overleaf/msm-fix-binary-file-multiple-request

Fix for Binary file view repeatedly requesting content

GitOrigin-RevId: af41539ccb92c609bc5f61f49ff09370c10481f6

services/web/frontend/js/features/file-view/components/file-view-text.js

@@ -11,8 +11,12 @@ export default function FileViewText({ file, onLoad, onError }) {
 
   const [textPreview, setTextPreview] = useState('')
   const [shouldShowDots, setShouldShowDots] = useState(false)
+  const [inFlight, setInFlight] = useState(false)
 
   useEffect(() => {
+    if (inFlight) {
+      return
+    }
     let path = `/project/${projectId}/file/${file.id}`
     fetch(path, { method: 'HEAD' })
       .then(response => {
@@ -30,27 +34,26 @@ export default function FileViewText({ file, onLoad, onError }) {
         if (maxSize != null) {
           path += `?range=0-${maxSize}`
         }
-        fetch(path)
-          .then(response => {
-            response.text().then(text => {
-              if (truncated) {
-                text = text.replace(/\n.*$/, '')
-              }
+        return fetch(path).then(response => {
+          return response.text().then(text => {
+            if (truncated) {
+              text = text.replace(/\n.*$/, '')
+            }
 
-              setTextPreview(text)
-              onLoad()
-              setShouldShowDots(truncated)
-            })
-          })
-          .catch(err => {
-            onError()
-            console.error(err)
+            setTextPreview(text)
+            onLoad()
+            setShouldShowDots(truncated)
           })
+        })
       })
       .catch(err => {
+        console.error(err)
         onError()
       })
-  }, [projectId, file.id, onError, onLoad])
+      .finally(() => {
+        setInFlight(false)
+      })
+  }, [projectId, file.id, onError, onLoad, inFlight])
   return (
     <div>
       {textPreview && (

services/web/frontend/js/features/file-view/components/file-view.js

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
@@ -21,18 +21,16 @@ export default function FileView({ file, storeReferencesKeys }) {
   const isUnpreviewableFile =
     !imageExtensions.includes(extension) && !textExtensions.includes(extension)
 
-  function handleLoading() {
-    if (contentLoading) {
-      setContentLoading(false)
-    }
-  }
+  const handleLoad = useCallback(() => {
+    setContentLoading(false)
+  }, [])
 
-  function handleError() {
+  const handleError = useCallback(() => {
     if (!hasError) {
       setContentLoading(false)
       setHasError(true)
     }
-  }
+  }, [hasError])
 
   const content = (
     <>
@@ -41,16 +39,12 @@ export default function FileView({ file, storeReferencesKeys }) {
         <FileViewImage
           fileName={file.name}
           fileId={file.id}
-          onLoad={handleLoading}
+          onLoad={handleLoad}
           onError={handleError}
         />
       )}
       {textExtensions.includes(extension) && (
-        <FileViewText
-          file={file}
-          onLoad={handleLoading}
-          onError={handleError}
-        />
+        <FileViewText file={file} onLoad={handleLoad} onError={handleError} />
       )}
     </>
   )