fix readonly + fields + mount err

4 files changed, 81 insertions, 19 deletions

diff --git a/frontend/src/components/Err.js b/frontend/src/components/Err.js
new file mode 100644
index 0000000..f1891d0
--- /dev/null
+++ b/frontend/src/components/Err.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components'
+
+const ErrMsg = styled.p`
+    display: inline-block;
+    font-weight: 700;
+    margin-left: 2em;
+    color: #ff3333
+`
+
+const Error = (props) => {
+    const msg = props.msg.toString().toLowerCase()
+    return (
+        <ErrMsg> {msg} </ErrMsg>
+    );
+}
+
+export default Error
\ No newline at end of file
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index 25a4b8e..b61869f 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -23,6 +23,7 @@ class TitleInput extends React.Component {
                     value={this.props.value} />
                 <input
                     name="title"
+                    readOnly={this.props.readOnly}
                     className="lt-shadow"
                     placeholder="Title"
                     id={this.props.id}
@@ -49,6 +50,7 @@ class PasteInput extends React.Component {
                     value={this.props.content} />
                 <textarea
                     name="content"
+                    readOnly={this.props.readOnly}
                     placeholder="Paste your text here"
                     value={this.props.content}
                     id={this.props.id}
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 2ce2ecf..fa2c997 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -3,21 +3,7 @@ import { TitleInput, PasteInput } from './Inputs'
 import OptionsContainer from './Options'
 import axios from 'axios';
 import { Redirect } from 'react-router-dom'
-import styled from 'styled-components'
-
-const ErrMsg = styled.p`
-    display: inline-block;
-    font-weight: 700;
-    margin-left: 2em;
-    color: #ff3333
-`
-
-const Error = (props) => {
-    const msg = props.msg.toString().toLowerCase()
-    return (
-        <ErrMsg> { msg } </ErrMsg>
-    );
-}
+import Error from './Err'
 
 class NewPaste extends React.Component {
     constructor(props) {
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