fmt info component

3 files changed, 64 insertions, 16 deletions

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index fa2c997..3bdd41a 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -21,11 +21,11 @@ class NewPaste extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
-    newErr(msg) {
+    newErr(msg, duration = 5000) {
         this.setState({ error: msg })
         setTimeout(() => {
             this.setState({ error: '' })
-        }, 3000);
+        }, duration);
     }
 
     renderRedirect = () => {
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
new file mode 100644
index 0000000..b27cd53
--- /dev/null
+++ b/frontend/src/components/PasteInfo.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components'
+
+const Bold = styled.span`
+    font-weight: 700
+`
+
+const FloatLeft = styled.p`
+    float: left;
+    display: inline-block;
+    margin: 0;
+`
+const FloatRight = styled.p`
+    float: right;
+    display: inline-block;
+    margin: 0;
+    margin-right: -1em;
+`
+
+const PasteInfo = (props) => {
+    return (
+        <div>
+            <FloatLeft><Bold>mode:&nbsp;</Bold>{props.mode}</FloatLeft>
+            <FloatRight><Bold>expires:&nbsp;</Bold>{props.expiry}</FloatRight>
+        </div>
+    );
+}
+
+export default PasteInfo
\ No newline at end of file
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index f9541da..bba0219 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -2,27 +2,38 @@ 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: '',
+            title: 'untitled paste',
             content: '',
             hasPass: false,
-            expiry: '',
-            timestamp: '',
+            expiry: 'no expiry',
             error: '',
+            mode: RENDER_MODES.RAW, 
         };
     }
-    
-    newErr(msg) {
+
+    newErr(msg, duration = 5000) {
         this.setState({ error: msg })
-        setTimeout(() => {
-            this.setState({ error: '' })
-        }, 3000);
+
+        // if duration -1, dont clear
+        if (duration !== -1) {
+            setTimeout(() => {
+                this.setState({ error: '' })
+            }, duration);
+        }
     }
 
     render() {
@@ -36,23 +47,31 @@ class ViewPaste extends React.Component {
                     content={this.state.content}
                     id="pasteInput"
                     readOnly />
+                <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
-                console.log(data)
+                console.log(this.fmtDateStr(data.expiry))
                 this.setState({
                     title: data.title,
                     content: data.content,
-                    expiry: data.expiry,
-                    timestamp: data.timestamp
+                    expiry: this.fmtDateStr(data.expiry),
                 })
             }).catch((error) => {
                 const resp = error.response
@@ -60,10 +79,10 @@ class ViewPaste extends React.Component {
                 // some weird err
                 if (resp !== undefined) {
                     const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.newErr(errTxt)
+                    this.newErr(errTxt, -1)
                 } else {
                     // some weird err (e.g. network)
-                    this.newErr(error)
+                    this.newErr(error, -1)
                 }
             })
     }