onedrive/components/previews/URLPreview.tsx
2022-02-04 16:05:28 +08:00

60 lines
1.5 KiB
TypeScript

import FourOhFour from '../FourOhFour'
import Loading from '../Loading'
import { DownloadButton } from '../DownloadBtnGtoup'
import useAxiosGet from '../../utils/fetchOnMount'
import { DownloadBtnContainer, PreviewContainer } from './Containers'
const parseDotUrl = (content: string): string | undefined => {
return content
.split('\n')
.find(line => line.startsWith('URL='))
?.split('=')[1]
}
const TextPreview = ({ file }) => {
const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
if (error) {
return (
<PreviewContainer>
<FourOhFour errorMsg={error} />
</PreviewContainer>
)
}
if (validating) {
return (
<PreviewContainer>
<Loading loadingText="Loading file content..." />
</PreviewContainer>
)
}
if (!content) {
return (
<PreviewContainer>
<FourOhFour errorMsg="File is empty." />
</PreviewContainer>
)
}
return (
<div>
<PreviewContainer>
<pre className="overflow-x-scroll p-0 text-sm md:p-3">{content}</pre>
</PreviewContainer>
<DownloadBtnContainer>
<div className="flex justify-center">
<DownloadButton
onClickCallback={() => window.open(parseDotUrl(content) || '')}
btnColor="blue"
btnText="Open URL"
btnIcon="external-link-alt"
btnTitle={`Open URL ${parseDotUrl(content) || ''}`}
/>
</div>
</DownloadBtnContainer>
</div>
)
}
export default TextPreview