overleaf/services/web/frontend/js/features/file-view/components/file-view-refresh-button.tsx
M Fahru 8b9f69012c Merge pull request #13947 from overleaf/mf-tw-tpr-not-original-importer
Improve user behaviour on Mendeley/Zotero refresh screen UI

GitOrigin-RevId: 50f83e88f14e1708d46dcfbd53c4e7d62684b4dc
2023-10-05 08:05:05 +00:00

76 lines
2.3 KiB
TypeScript

import {
type Dispatch,
type SetStateAction,
useCallback,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import classNames from 'classnames'
import Icon from '@/shared/components/icon'
import { postJSON } from '@/infrastructure/fetch-json'
import { useProjectContext } from '@/shared/context/project-context'
import useAbortController from '@/shared/hooks/use-abort-controller'
import { useUserContext } from '@/shared/context/user-context'
import { hasProvider, type BinaryFile } from '../types/binary-file'
import { Nullable } from '../../../../../types/utils'
type FileViewRefreshButtonProps = {
setRefreshError: Dispatch<SetStateAction<Nullable<string>>>
file: BinaryFile
}
export default function FileViewRefreshButton({
setRefreshError,
file,
}: FileViewRefreshButtonProps) {
const { signal } = useAbortController()
const { t } = useTranslation()
const [refreshing, setRefreshing] = useState(false)
const { _id: projectId } = useProjectContext()
const { id: userId } = useUserContext()
const isMendeleyOrZotero =
hasProvider(file, 'mendeley') || hasProvider(file, 'zotero')
let isImporter
if (isMendeleyOrZotero) {
isImporter = file.linkedFileData.importer_id === userId
}
const buttonClickable = isMendeleyOrZotero ? isImporter : true
const refreshFile = useCallback(() => {
setRefreshing(true)
// Replacement of the file handled by the file tree
window.expectingLinkedFileRefreshedSocketFor = file.name
const body = {
shouldReindexReferences: isMendeleyOrZotero || /\.bib$/.test(file.name),
}
postJSON(`/project/${projectId}/linked_file/${file.id}/refresh`, {
signal,
body,
})
.then(() => {
setRefreshing(false)
})
.catch(err => {
setRefreshing(false)
setRefreshError(err.data?.message || err.message)
})
}, [file, projectId, signal, setRefreshError, isMendeleyOrZotero])
return (
<button
className={classNames('btn', {
'btn-primary': buttonClickable,
'btn-secondary': !buttonClickable,
})}
onClick={refreshFile}
disabled={refreshing || !buttonClickable}
>
<Icon type="refresh" spin={refreshing} fw />
<span>{refreshing ? `${t('refreshing')}` : t('refresh')}</span>
</button>
)
}