1 files changed, 103 insertions, 0 deletions
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
new file mode 100644
index 0000000..79b1840
--- /dev/null
+++ b/frontend/src/components/ViewPaste.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import axios from 'axios';
+import Error from './Err';
+import { TitleInput, PasteInput } from './Inputs';
+import PasteInfo from  './PasteInfo';
+
+const RENDER_MODES = Object.freeze({
+    RAW: 'raw text',
+    MD: 'markdown',
+    LATEX: 'latex',
+    CODE: 'code',
+})
+
+class ViewPaste extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            title: 'untitled paste',
+            content: '',
+            hasPass: false,
+            expiry: 'no expiry',
+            error: '',
+            mode: RENDER_MODES.RAW, 
+        };
+    }
+
+    newErr(msg, duration = 5000) {
+        this.setState({ error: msg })
+
+        // if duration -1, dont clear
+        if (duration !== -1) {
+            setTimeout(() => {
+                this.setState({ error: '' })
+            }, duration);
+        }
+    }
+
+    drawRightMode() {
+        switch (this.state.mode) {
+            // TODO: add other renderers
+
+            // default render raw
+            case RENDER_MODES.RAW:
+            default:
+                return (<PasteInput
+                    content={this.state.content}
+                    id="pasteInput"
+                    readOnly />);
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <TitleInput
+                    value={this.state.title}
+                    id="titleInput"
+                    readOnly />
+
+                {this.drawRightMode()}
+
+                <PasteInfo
+                    expiry={this.state.expiry}
+                    mode={this.state.mode} />
+                <Error msg={this.state.error} />
+            </div>
+        );
+    }
+
+    fmtDateStr(dateString) {
+        const d = new Date(dateString)
+        const options = { hour: '2-digit', minute: '2-digit', year: 'numeric', month: 'long', day: 'numeric' }
+        return d.toLocaleDateString("en-US", options).toLocaleLowerCase()
+    }
+
+    componentDidMount() {
+        const serverURL = `http://localhost:8080/api/${this.props.hash}`
+
+        axios.get(serverURL)
+            .then((response) => {
+                const data = response.data
+                this.setState({
+                    title: data.title,
+                    content: data.content,
+                    expiry: this.fmtDateStr(data.expiry),
+                })
+            }).catch((error) => {
+                const resp = error.response
+
+                // some weird err
+                if (resp !== undefined) {
+                    const errTxt = `${resp.statusText}: ${resp.data}`
+                    this.newErr(errTxt, -1)
+                } else {
+                    // some weird err (e.g. network)
+                    this.newErr(error, -1)
+                }
+            })
+    }
+}
+
+export default ViewPaste
+\ No newline at end of file