2022-01-06 08:34:16 +00:00
|
|
|
import { useEffect, FC } from 'react'
|
2021-06-25 15:13:31 +00:00
|
|
|
import Prism from 'prismjs'
|
|
|
|
|
|
|
|
import { getExtension } from '../../utils/getFileIcon'
|
2022-01-24 11:16:32 +00:00
|
|
|
import useAxiosGet from '../../utils/fetchOnMount'
|
2021-06-25 15:13:31 +00:00
|
|
|
import FourOhFour from '../FourOhFour'
|
|
|
|
import Loading from '../Loading'
|
2021-12-29 07:23:47 +00:00
|
|
|
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
2022-01-06 08:34:16 +00:00
|
|
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
2021-06-25 15:13:31 +00:00
|
|
|
|
2022-01-06 08:34:16 +00:00
|
|
|
const CodePreview: FC<{ file: any }> = ({ file }) => {
|
2022-01-24 11:16:32 +00:00
|
|
|
const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
|
2021-08-29 14:50:38 +00:00
|
|
|
|
2021-06-25 15:13:31 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
Prism.highlightAll()
|
|
|
|
}
|
2022-01-06 08:34:16 +00:00
|
|
|
}, [validating])
|
2021-06-25 15:13:31 +00:00
|
|
|
|
|
|
|
if (error) {
|
|
|
|
return (
|
2022-01-06 08:34:16 +00:00
|
|
|
<PreviewContainer>
|
|
|
|
<FourOhFour errorMsg={error} />
|
|
|
|
</PreviewContainer>
|
2021-06-25 15:13:31 +00:00
|
|
|
)
|
|
|
|
}
|
2022-01-06 08:34:16 +00:00
|
|
|
if (validating) {
|
2021-06-25 15:13:31 +00:00
|
|
|
return (
|
2022-01-06 08:34:16 +00:00
|
|
|
<PreviewContainer>
|
2021-06-25 15:13:31 +00:00
|
|
|
<Loading loadingText="Loading file content..." />
|
2022-01-06 08:34:16 +00:00
|
|
|
</PreviewContainer>
|
2021-06-25 15:13:31 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2021-12-29 07:52:18 +00:00
|
|
|
<div>
|
2022-01-06 08:34:16 +00:00
|
|
|
<PreviewContainer>
|
2021-06-25 15:13:31 +00:00
|
|
|
<pre className={`language-${getExtension(file.name)}`}>
|
2022-01-06 08:34:16 +00:00
|
|
|
<code className="font-mono">{content}</code>
|
2021-06-25 15:13:31 +00:00
|
|
|
</pre>
|
2022-01-06 08:34:16 +00:00
|
|
|
</PreviewContainer>
|
|
|
|
<DownloadBtnContainer>
|
2021-12-29 07:23:47 +00:00
|
|
|
<DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
2022-01-06 08:34:16 +00:00
|
|
|
</DownloadBtnContainer>
|
2021-12-29 07:52:18 +00:00
|
|
|
</div>
|
2021-06-25 15:13:31 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default CodePreview
|