Port attachments and embeds.

src/components/common/messaging/attachments/TextFile.tsx

@@ -0,0 +1,57 @@
+import axios from 'axios';
+import Preloader from '../../../ui/Preloader';
+import styles from './Attachment.module.scss';
+import { Attachment } from 'revolt.js/dist/api/objects';
+import { useContext, useEffect, useState } from 'preact/hooks';
+import RequiresOnline from '../../../../context/revoltjs/RequiresOnline';
+import { AppContext, StatusContext } from '../../../../context/revoltjs/RevoltClient';
+
+interface Props {
+    attachment: Attachment;
+}
+
+const fileCache: { [key: string]: string } = {};
+
+export default function TextFile({ attachment }: Props) {
+    const [ content, setContent ] = useState<undefined | string>(undefined);
+    const [ loading, setLoading ] = useState(false);
+    const status = useContext(StatusContext);
+    const client = useContext(AppContext);
+
+    const url = client.generateFileURL(attachment);
+
+    useEffect(() => {
+        if (typeof content !== 'undefined') return;
+        if (loading) return;
+        setLoading(true);
+
+        let cached = fileCache[attachment._id];
+        if (cached) {
+            setContent(cached);
+            setLoading(false);
+        } else {
+            axios.get(url)
+                .then(res => {
+                    setContent(res.data);
+                    fileCache[attachment._id] = res.data;
+                    setLoading(false);
+                })
+                .catch(() => {
+                    console.error("Failed to load text file. [", attachment._id, "]");
+                    setLoading(false)
+                })
+        }
+    }, [ content, loading, status ]);
+
+    return (
+        <div className={styles.textContent} data-loading={typeof content === 'undefined'}>
+            {
+                content ?
+                    <pre><code>{ content }</code></pre>
+                    : <RequiresOnline>
+                        <Preloader />
+                    </RequiresOnline>
+            }
+        </div>
+    )
+}