mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:15:57 -05:00
d6de6da781
* [web] Remove unnecessary divs around `fileInfo` * [web] Add file-view SCSS style * [web] Simplify `TPRFileViewInfo` * [web] Add div for action buttons * [web] Misc. simplifications * [web] Add Overleaf logo in bg when selecting multiple files * [web] Add message when multiple files are selected * [web] Add .full-size class * [web] Import styles from LESS file * [web] Update icons, use MaterialIcon * [web] Use OLButton * [web] Add missing space between icons and text * [web] Adjust margins * [web] Fix alert button * [web] Update Alerts * [web] Update `FileViewLoadingIndicator` * [web] Fix test "shows a loading indicator..." This was failing because `LoadingSpinner` is shown after a setTimeout. Maybe we can skip this setTimeout when delay==0 ? * [web] Remove Row/Col around error notifications * [web] Replace `!!` by `Boolean` Co-authored-by: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> * [web] Use `alert` class in BS3 only Co-authored-by: Ilkin Ismailov <ilkin.ismailov@overleaf.com> * [web] Update "Go to settings" to OLButton Co-authored-by: Ilkin Ismailov <ilkin.ismailov@overleaf.com> * [web] Use `BootstrapVersionSwitcher` instead of `isBootstrap5` Co-authored-by: Ilkin Ismailov <ilkin.ismailov@overleaf.com> * [web] Align Alert content to the left in BS5 * [web] Remove `leadingIcon` on Refresh buttons * [web] Make the download link be an OLButton * [web] Set `tpr-refresh-error` in BS3 only Co-authored-by: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> * [web] Use `var(--white);` instead of `white` Co-authored-by: Rebeka <rebeka.dekany@overleaf.com> * [web] Update OLButton size (small -> sm) --------- Co-authored-by: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> Co-authored-by: Ilkin Ismailov <ilkin.ismailov@overleaf.com> Co-authored-by: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Co-authored-by: Rebeka <rebeka.dekany@overleaf.com> GitOrigin-RevId: 04f369c0f1a53d47619a1570648ee58de5050751
105 lines
3 KiB
TypeScript
105 lines
3 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useProjectContext } from '../../../shared/context/project-context'
|
|
import { debugConsole } from '@/utils/debugging'
|
|
import useAbortController from '../../../shared/hooks/use-abort-controller'
|
|
import { BinaryFile } from '@/features/file-view/types/binary-file'
|
|
import { useSnapshotContext } from '@/features/ide-react/context/snapshot-context'
|
|
|
|
const MAX_FILE_SIZE = 2 * 1024 * 1024
|
|
|
|
export default function FileViewText({
|
|
file,
|
|
onLoad,
|
|
onError,
|
|
}: {
|
|
file: BinaryFile
|
|
onLoad: () => void
|
|
onError: () => void
|
|
}) {
|
|
const { _id: projectId } = useProjectContext()
|
|
const { fileTreeFromHistory } = useSnapshotContext()
|
|
|
|
const [textPreview, setTextPreview] = useState('')
|
|
const [shouldShowDots, setShouldShowDots] = useState(false)
|
|
const [inFlight, setInFlight] = useState(false)
|
|
|
|
const fetchContentLengthController = useAbortController()
|
|
const fetchDataController = useAbortController()
|
|
|
|
useEffect(() => {
|
|
if (inFlight) {
|
|
return
|
|
}
|
|
let path = fileTreeFromHistory
|
|
? `/project/${projectId}/blob/${file.hash}`
|
|
: `/project/${projectId}/file/${file.id}`
|
|
const fetchContentLengthTimeout = setTimeout(
|
|
() => fetchContentLengthController.abort(),
|
|
10000
|
|
)
|
|
let fetchDataTimeout: number | undefined
|
|
fetch(path, { method: 'HEAD', signal: fetchContentLengthController.signal })
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('HTTP Error Code: ' + response.status)
|
|
return response.headers.get('Content-Length')
|
|
})
|
|
.then(fileSize => {
|
|
let truncated = false
|
|
let maxSize = null
|
|
if (fileSize && Number(fileSize) > MAX_FILE_SIZE) {
|
|
truncated = true
|
|
maxSize = MAX_FILE_SIZE
|
|
}
|
|
|
|
if (maxSize != null) {
|
|
path += `?range=0-${maxSize}`
|
|
}
|
|
fetchDataTimeout = window.setTimeout(
|
|
() => fetchDataController.abort(),
|
|
60000
|
|
)
|
|
return fetch(path, { signal: fetchDataController.signal }).then(
|
|
response => {
|
|
return response.text().then(text => {
|
|
if (truncated) {
|
|
text = text.replace(/\n.*$/, '')
|
|
}
|
|
|
|
setTextPreview(text)
|
|
onLoad()
|
|
setShouldShowDots(truncated)
|
|
})
|
|
}
|
|
)
|
|
})
|
|
.catch(err => {
|
|
debugConsole.error('Error fetching file contents', err)
|
|
onError()
|
|
})
|
|
.finally(() => {
|
|
setInFlight(false)
|
|
clearTimeout(fetchContentLengthTimeout)
|
|
clearTimeout(fetchDataTimeout)
|
|
})
|
|
}, [
|
|
fileTreeFromHistory,
|
|
projectId,
|
|
file.id,
|
|
file.hash,
|
|
onError,
|
|
onLoad,
|
|
inFlight,
|
|
fetchContentLengthController,
|
|
fetchDataController,
|
|
])
|
|
return (
|
|
Boolean(textPreview) && (
|
|
<div className="text-preview">
|
|
<div className="scroll-container">
|
|
<p>{textPreview}</p>
|
|
{shouldShowDots && <p>...</p>}
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
}
|