import { useState, useEffect } from 'react' import axios from 'axios' import prettyBytes from 'pretty-bytes' import { DownloadIcon } from '@heroicons/react/solid' import { useAuthentication } from '../../../../../tools/authentication' import { MessageWithMember } from '../../../../../models/Message' import { Loader } from '../../../../design/Loader' import { FileIcon } from './FileIcon' const supportedImageMimetype = [ 'image/png', 'image/jpg', 'image/jpeg', 'image/gif' ] export interface FileData { blob: Blob url: string } export interface MessageContentProps { message: MessageWithMember } export const MessageFile: React.FC = (props) => { const { message } = props const { authentication } = useAuthentication() const [file, setFile] = useState(null) useEffect(() => { const ourRequest = axios.CancelToken.source() const fetchData = async (): Promise => { const { data } = await authentication.api.get(message.value, { responseType: 'blob', cancelToken: ourRequest.token }) const fileURL = URL.createObjectURL(data) setFile({ blob: data, url: fileURL }) } fetchData().catch(() => {}) return () => { ourRequest.cancel() } }, [message.value, authentication.api]) if (file == null) { return } if (supportedImageMimetype.includes(message.mimetype)) { return ( {message.value} ) } if (message.mimetype.startsWith('audio/')) { return ( ) } if (message.mimetype.startsWith('video/')) { return ( ) } return (

{file.blob.type}

{prettyBytes(file.blob.size)}

) }