fix readonly + fields + mount err

1 files changed, 60 insertions, 4 deletions

diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index aa0da34..f9541da 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -1,16 +1,72 @@
 import React from 'react';
-// import { TitleInput, PasteInput } from './Inputs'
-// import OptionsContainer from './Options'
-// import axios from 'axios';
+import axios from 'axios';
+import Error from './Err';
+import { TitleInput, PasteInput } from './Inputs';
 
 class ViewPaste extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            title: '',
+            content: '',
+            hasPass: false,
+            expiry: '',
+            timestamp: '',
+            error: '',
+        };
+    }
+    
+    newErr(msg) {
+        this.setState({ error: msg })
+        setTimeout(() => {
+            this.setState({ error: '' })
+        }, 3000);
+    }
+
     render() {
         return (
             <div>
-                {this.props.hash}
+                <TitleInput
+                    value={this.state.title}
+                    id="titleInput"
+                    readOnly />
+                <PasteInput
+                    content={this.state.content}
+                    id="pasteInput"
+                    readOnly />
+                <Error msg={this.state.error} />
             </div>
         );
     }
+
+    componentDidMount() {
+        const serverURL = `http://localhost:8080/api/${this.props.hash}`
+
+        axios.get(serverURL)
+            .then((response) => {
+                const data = response.data
+                console.log(data)
+                this.setState({
+                    title: data.title,
+                    content: data.content,
+                    expiry: data.expiry,
+                    timestamp: data.timestamp
+                })
+            }).catch((error) => {
+                const resp = error.response
+
+                // some weird err
+                if (resp !== undefined) {
+                    const errTxt = `${resp.statusText}: ${resp.data}`
+                    this.newErr(errTxt)
+                } else {
+                    // some weird err (e.g. network)
+                    this.newErr(error)
+                }
+            })
+    }
 }
 
 export default ViewPaste
\ No newline at end of file