feat: add support for files and math for messages (#5)

components/Application/Messages/Message/MessageFile/FileIcon.tsx

@@ -0,0 +1,14 @@
+export const FileIcon: React.FC = () => {
+  return (
+    <svg
+      className='dark:text-white text-black fill-current'
+      width='21'
+      height='26'
+      viewBox='0 0 21 26'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path d='M2.625 0C1.92881 0 1.26113 0.273928 0.768845 0.761522C0.276562 1.24912 0 1.91044 0 2.6V23.4C0 24.0896 0.276562 24.7509 0.768845 25.2385C1.26113 25.7261 1.92881 26 2.625 26H18.375C19.0712 26 19.7389 25.7261 20.2312 25.2385C20.7234 24.7509 21 24.0896 21 23.4V7.8L13.125 0H2.625ZM13.125 9.1H11.8125V2.6L18.375 9.1H13.125Z' />
+    </svg>
+  )
+}

components/Application/Messages/Message/MessageFile/MessageFile.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react'
+import Image from 'next/image'
+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'
+
+export interface FileData {
+  blob: Blob
+  url: string
+}
+
+export interface MessageContentProps {
+  message: MessageWithMember
+}
+
+export const MessageFile: React.FC<MessageContentProps> = (props) => {
+  const { message } = props
+
+  const { authentication } = useAuthentication()
+  const [file, setFile] = useState<FileData | null>(null)
+
+  useEffect(() => {
+    const ourRequest = axios.CancelToken.source()
+
+    const fetchData = async (): Promise<void> => {
+      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 <Loader />
+  }
+  if (message.mimetype.startsWith('image/')) {
+    return (
+      <a href={file.url} target='_blank' rel='noreferrer'>
+        <Image
+          data-cy={`message-file-image-${message.id}`}
+          className='max-w-xs max-h-xs'
+          src={file.url}
+          alt={message.value}
+          width={320}
+          height={320}
+        />
+      </a>
+    )
+  }
+  if (message.mimetype.startsWith('audio/')) {
+    return (
+      <audio controls data-cy={`message-file-audio-${message.id}`}>
+        <source src={file.url} type={message.mimetype} />
+      </audio>
+    )
+  }
+  if (message.mimetype.startsWith('video/')) {
+    return (
+      <video
+        className='max-w-xs max-h-xs'
+        controls
+        data-cy={`message-file-video-${message.id}`}
+      >
+        <source src={file.url} type={message.mimetype} />
+      </video>
+    )
+  }
+  return (
+    <a href={file.url} download data-cy={`message-file-download-${message.id}`}>
+      <div className='flex items-center'>
+        <div className='flex items-center'>
+          <div>
+            <FileIcon />
+          </div>
+          <div className='ml-4'>
+            <p>{file.blob.type}</p>
+            <p className='mt-1'>{prettyBytes(file.blob.size)}</p>
+          </div>
+        </div>
+        <DownloadIcon className='ml-4 w-8 h-8' />
+      </div>
+    </a>
+  )
+}

components/Application/Messages/Message/MessageFile/index.ts

@@ -0,0 +1 @@
+export * from './MessageFile'