rename useAxiosFetch hook for universal fetch usage
This commit is contained in:
parent
bfbe4eb042
commit
0b55fe5fc7
|
@ -2,14 +2,14 @@ import { useEffect, FC } from 'react'
|
||||||
import Prism from 'prismjs'
|
import Prism from 'prismjs'
|
||||||
|
|
||||||
import { getExtension } from '../../utils/getFileIcon'
|
import { getExtension } from '../../utils/getFileIcon'
|
||||||
import useFileContent from '../../utils/fetchOnMount'
|
import useAxiosGet from '../../utils/fetchOnMount'
|
||||||
import FourOhFour from '../FourOhFour'
|
import FourOhFour from '../FourOhFour'
|
||||||
import Loading from '../Loading'
|
import Loading from '../Loading'
|
||||||
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
||||||
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
||||||
|
|
||||||
const CodePreview: FC<{ file: any }> = ({ file }) => {
|
const CodePreview: FC<{ file: any }> = ({ file }) => {
|
||||||
const { content, error, validating } = useFileContent(file['@microsoft.graph.downloadUrl'])
|
const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
|
|
|
@ -11,7 +11,7 @@ import 'katex/dist/katex.min.css'
|
||||||
import FourOhFour from '../FourOhFour'
|
import FourOhFour from '../FourOhFour'
|
||||||
import Loading from '../Loading'
|
import Loading from '../Loading'
|
||||||
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
||||||
import useFileContent from '../../utils/fetchOnMount'
|
import useAxiosGet from '../../utils/fetchOnMount'
|
||||||
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
||||||
|
|
||||||
const MarkdownPreview: FC<{ file: any; path: string; standalone?: boolean }> = ({
|
const MarkdownPreview: FC<{ file: any; path: string; standalone?: boolean }> = ({
|
||||||
|
@ -19,7 +19,7 @@ const MarkdownPreview: FC<{ file: any; path: string; standalone?: boolean }> = (
|
||||||
path,
|
path,
|
||||||
standalone = true,
|
standalone = true,
|
||||||
}) => {
|
}) => {
|
||||||
const { content, error, validating } = useFileContent(file['@microsoft.graph.downloadUrl'])
|
const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
|
||||||
|
|
||||||
// The parent folder of the markdown file, which is also the relative image folder
|
// The parent folder of the markdown file, which is also the relative image folder
|
||||||
const parentPath = path.substring(0, path.lastIndexOf('/'))
|
const parentPath = path.substring(0, path.lastIndexOf('/'))
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import FourOhFour from '../FourOhFour'
|
import FourOhFour from '../FourOhFour'
|
||||||
import Loading from '../Loading'
|
import Loading from '../Loading'
|
||||||
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
||||||
import useFileContent from '../../utils/fetchOnMount'
|
import useAxiosGet from '../../utils/fetchOnMount'
|
||||||
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
||||||
|
|
||||||
const TextPreview = ({ file }) => {
|
const TextPreview = ({ file }) => {
|
||||||
const { content, error, validating } = useFileContent(file['@microsoft.graph.downloadUrl'])
|
const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<PreviewContainer>
|
<PreviewContainer>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import FourOhFour from '../FourOhFour'
|
import FourOhFour from '../FourOhFour'
|
||||||
import Loading from '../Loading'
|
import Loading from '../Loading'
|
||||||
import { DownloadButton } from '../DownloadBtnGtoup'
|
import { DownloadButton } from '../DownloadBtnGtoup'
|
||||||
import useFileContent from '../../utils/fetchOnMount'
|
import useAxiosGet from '../../utils/fetchOnMount'
|
||||||
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
||||||
|
|
||||||
const parseDotUrl = (content: string): string | undefined => {
|
const parseDotUrl = (content: string): string | undefined => {
|
||||||
|
@ -12,7 +12,7 @@ const parseDotUrl = (content: string): string | undefined => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const TextPreview = ({ file }) => {
|
const TextPreview = ({ file }) => {
|
||||||
const { content, error, validating } = useFileContent(file['@microsoft.graph.downloadUrl'])
|
const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<PreviewContainer>
|
<PreviewContainer>
|
||||||
|
|
|
@ -2,19 +2,19 @@ import axios from 'axios'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
// Custom hook to fetch raw file content on mount
|
// Custom hook to fetch raw file content on mount
|
||||||
export default function useFileContent(odRawUrl: string): { content: string; error: string; validating: boolean } {
|
export default function useAxiosGet(fetchUrl: string): { content: string; error: string; validating: boolean } {
|
||||||
const [content, setContent] = useState('')
|
const [content, setContent] = useState('')
|
||||||
const [validating, setValidating] = useState(true)
|
const [validating, setValidating] = useState(true)
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
axios
|
axios
|
||||||
.get(odRawUrl)
|
.get(fetchUrl)
|
||||||
.then(res => setContent(res.data))
|
.then(res => setContent(res.data))
|
||||||
.catch(e => setError(e.message))
|
.catch(e => setError(e.message))
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
setValidating(false)
|
setValidating(false)
|
||||||
})
|
})
|
||||||
}, [odRawUrl])
|
}, [fetchUrl])
|
||||||
return { content, error, validating }
|
return { content, error, validating }
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue