From 1f750b3ef0e4e3c0153006551c4449eabb10d1e5 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Mon, 11 May 2020 20:47:11 -0700
Subject: add basic link + route

---
 frontend/package.json             |  1 +
 frontend/src/components/App.js    | 45 +++++++++++++++++++++++++++++++++------
 frontend/src/components/Header.js | 20 -----------------
 frontend/src/css/index.css        | 35 ++++++++++++++++++++++++++++++
 4 files changed, 75 insertions(+), 26 deletions(-)
 delete mode 100644 frontend/src/components/Header.js

diff --git a/frontend/package.json b/frontend/package.json
index d32e1cc..390e3f5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "react-dom": "^16.13.1",
     "react-dropdown": "^1.7.0",
     "react-modal": "^3.11.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "styled-components": "^5.1.0"
   },
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 17240f5..2f438e9 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,15 +1,48 @@
 import React from 'react';
-import Header from './Header'
 import PasteArea from './PasteArea'
 import Footer from './Footer'
+import styled from 'styled-components'
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+
+const SpacedTitle = styled.div`
+    margin-top: 10vh
+`
+
+const Inline = styled.div`
+    display: inline-block
+`
+
+const Desc = () => {
+  return (
+    <h3>a modern, <a href="https://github.com/jackyzha0/ctrl-v" target="_blank" rel="noopener noreferrer">open-source</a> pastebin with latex and markdown rendering support</h3>
+  );
+}
 
 function App() {
   return (
-    <div className="lt-content-column">
-      <Header />
-      <PasteArea />
-      <Footer />
-    </div>
+    <Router>
+      <div className="lt-content-column">
+        <SpacedTitle>
+          <nav>
+            <h1 className="mainLogo">
+              <span role="img" aria-label="clipboard">📋&nbsp;</span>
+              <Link to="/">ctrl-v</Link>
+            </h1>
+
+            <Desc />
+          </nav>
+        </SpacedTitle>
+
+        <PasteArea/>
+
+        <Footer />
+      </div>
+    </Router>
   );
 }
 
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
deleted file mode 100644
index a0c5ee8..0000000
--- a/frontend/src/components/Header.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import styled from 'styled-components'
-
-const SpacedTitle = styled.div`
-    margin-top: 10vh
-`
-
-const Header = () => {
-    return (
-        <SpacedTitle>
-            <h1>
-                <span role="img" aria-label="clipboard">📋&nbsp;</span>
-                ctrl-v
-            </h1>
-            <h3>a modern, <a href="https://github.com/jackyzha0/ctrl-v" target="_blank" rel="noopener noreferrer">open-source</a> pastebin with latex and markdown rendering support</h3>
-        </SpacedTitle>
-    );
-}
-
-export default Header;
\ No newline at end of file
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 3d05fa0..3279aac 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -94,4 +94,39 @@ input[type=submit] {
   padding: 0.8em 2em;
   margin: 2em 0;
   outline: 0;
+}
+
+ul {
+  list-style-type: none;
+  display: inline-block;
+}
+
+li {
+  display: inline-block;
+  margin: 0 1em;
+}
+
+.mainLogo {
+  display: inline-block;
+}
+
+.mainLogo a {
+  text-decoration: none;
+  position: relative;
+  margin: 3px;
+}
+
+.mainLogo a::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 4px;
+    background-color: #111111;
+    width: 0;
+    transition: width 0.25s ease;
+}
+
+.mainLogo:hover a::after {
+  width: 100%;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 433466a3947e75a36b811795bc21be1fff10b5e8 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Mon, 11 May 2020 21:11:16 -0700
Subject: backend redir

---
 frontend/src/components/App.js                     |  27 +++--
 frontend/src/components/CharLimit.js               |  37 ------
 frontend/src/components/FloatingLabel.js           |  34 ------
 frontend/src/components/Inputs.js                  |   4 +-
 frontend/src/components/NewPaste.js                | 124 +++++++++++++++++++++
 frontend/src/components/PasteArea.js               | 113 -------------------
 frontend/src/components/ViewPaste.js               |  16 +++
 frontend/src/components/decorators/CharLimit.js    |  37 ++++++
 .../src/components/decorators/FloatingLabel.js     |  34 ++++++
 9 files changed, 233 insertions(+), 193 deletions(-)
 delete mode 100644 frontend/src/components/CharLimit.js
 delete mode 100644 frontend/src/components/FloatingLabel.js
 create mode 100644 frontend/src/components/NewPaste.js
 delete mode 100644 frontend/src/components/PasteArea.js
 create mode 100644 frontend/src/components/ViewPaste.js
 create mode 100644 frontend/src/components/decorators/CharLimit.js
 create mode 100644 frontend/src/components/decorators/FloatingLabel.js

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 2f438e9..605903e 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,28 +1,34 @@
 import React from 'react';
-import PasteArea from './PasteArea'
+import NewPaste from './NewPaste'
+import ViewPaste from './ViewPaste'
 import Footer from './Footer'
 import styled from 'styled-components'
 import {
   BrowserRouter as Router,
   Switch,
   Route,
-  Link
+  Link,
+  useParams
 } from "react-router-dom";
 
 const SpacedTitle = styled.div`
     margin-top: 10vh
 `
 
-const Inline = styled.div`
-    display: inline-block
-`
-
 const Desc = () => {
   return (
     <h3>a modern, <a href="https://github.com/jackyzha0/ctrl-v" target="_blank" rel="noopener noreferrer">open-source</a> pastebin with latex and markdown rendering support</h3>
   );
 }
 
+const GetPasteWithParam = () => {
+  let { hash } = useParams();
+
+  return (
+    <ViewPaste hash = {hash} />
+  );
+}
+
 function App() {
   return (
     <Router>
@@ -38,7 +44,14 @@ function App() {
           </nav>
         </SpacedTitle>
 
-        <PasteArea/>
+        <Switch>
+          <Route path="/:hash" 
+            children={<GetPasteWithParam />} 
+          />
+          <Route path="/">
+            <NewPaste />
+          </Route>
+        </Switch>
 
         <Footer />
       </div>
diff --git a/frontend/src/components/CharLimit.js b/frontend/src/components/CharLimit.js
deleted file mode 100644
index 623b378..0000000
--- a/frontend/src/components/CharLimit.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components'
-
-// show char limit if length > half of max
-const Chars = styled.p`
-    color: #11111100;
-    font-family: 'Roboto Mono', monospace;
-    position: absolute; 
-    font-size: 0.8em;
-    writing-mode: vertical-rl;
-    top: 50%;
-    transform: translate(5em, -50%);
-    right: 0;
-    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
-
-    ${props =>
-        ((props.content.length / props.maxLength) > 0.5) &&
-        css`
-        color: #111111;
-    `};
-
-    ${props =>
-        ((props.content.length / props.maxLength) > 1) &&
-        css`
-        color: #ee1111;
-    `};
-`;
-
-class CharLimit extends React.Component {
-    render() {
-        return (
-            <Chars {...this.props} >{this.props.maxLength - this.props.content.length}/{this.props.maxLength}</Chars>
-        );
-    }
-}
-
-export default CharLimit
\ No newline at end of file
diff --git a/frontend/src/components/FloatingLabel.js b/frontend/src/components/FloatingLabel.js
deleted file mode 100644
index e1fc0ba..0000000
--- a/frontend/src/components/FloatingLabel.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components'
-
-const StyledLabel = styled.label`
-    position: absolute;
-    top: 0.5em;
-    font-weight: 700;
-    font-size: 1em;
-    opacity: 0;
-    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
-
-    ${props =>
-        (props.value.length > 0) &&
-        css`
-        top: -0.1em;
-        opacity: 1
-    `};
-`
-
-class FloatingLabel extends React.Component {
-    render() {
-        return (
-            <StyledLabel 
-                label={this.props.label}
-                value={this.props.value}
-                className={this.props.id}
-                htmlFor={this.props.id}>
-                    {this.props.label}
-            </StyledLabel>
-        );
-    }
-}
-
-export default FloatingLabel
\ No newline at end of file
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index 110d5bd..25a4b8e 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import CharLimit from './CharLimit'
+import CharLimit from './decorators/CharLimit'
 import styled from 'styled-components'
-import FloatingLabel from './FloatingLabel'
+import FloatingLabel from './decorators/FloatingLabel'
 import Dropdown from 'react-dropdown';
 
 const CharLimitContainer = styled.div`
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
new file mode 100644
index 0000000..2ad9533
--- /dev/null
+++ b/frontend/src/components/NewPaste.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import { TitleInput, PasteInput } from './Inputs'
+import OptionsContainer from './Options'
+import axios from 'axios';
+import { Redirect } from 'react-router-dom'
+
+class NewPaste extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { 
+            title: '',
+            content: '',
+            pass: '',
+            expiry: '',
+            hash: '',
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    renderRedirect = () => {
+        if (this.state.hash !== '') {
+            const redirUrl = `/${this.state.hash}`
+            return <Redirect to={redirUrl} />
+        }
+    }
+
+    componentDidUpdate() {
+        if (this.state.title === "") {
+            document.title = `ctrl-v`;
+        } else {
+            document.title = `ctrl-v | ${this.state.title}`;
+        }
+    }
+
+    handleChange(event) {
+        const target = event.target;
+        const name = target.name;
+
+        this.setState({
+            [name]: target.value
+        });
+    }
+
+    parseExpiry(e) {
+        var cur = new Date();
+        var inSeconds = 0
+        switch (e) {
+            case '5 years':
+                inSeconds = 600 * 6 * 24 * 7 * 4 * 12 * 5
+                break;
+            case '1 year':
+                inSeconds = 600 * 6 * 24 * 7 * 4 * 12
+                break;
+            case '1 month':
+                inSeconds = 600 * 6 * 24 * 7 * 4
+                break;
+            case '1 day':
+                inSeconds = 600 * 6 * 24
+                break;
+            case '1 hour':
+                inSeconds = 600 * 6
+                break;
+            case '10 min':
+                inSeconds = 600
+                break;
+            case '1 week':
+            default:
+                inSeconds = 600 * 6 * 24 * 7
+                break;
+        }
+        return new Date(cur.getTime() + inSeconds * 1000).toISOString();
+    }
+
+    handleSubmit(event) {
+        var bodyFormData = new FormData();
+        bodyFormData.set('title', this.state.title);
+        bodyFormData.set('content', this.state.content);
+        bodyFormData.set('password', this.state.pass);
+        bodyFormData.set('expiry', this.parseExpiry(this.state.expiry));
+
+        axios({
+            method: 'post',
+            url: 'http://localhost:8080/api',
+            data: bodyFormData,
+            headers: { 'Content-Type': 'multipart/form-data' },
+        }).then((response) => {
+
+            // on success, redir
+            this.setState({ hash: response.data.hash })
+        }).catch((response) => {
+            // TODO: handle error
+            console.log(response);
+        });
+
+        event.preventDefault();
+    }
+
+    render() {
+        return (
+            <form onSubmit={this.handleSubmit}>
+                {this.renderRedirect()}
+                <TitleInput 
+                    onChange={this.handleChange}
+                    value={this.state.title}
+                    maxLength="100"
+                    id="titleInput" />
+                <PasteInput
+                    onChange={this.handleChange}
+                    content={this.state.content}
+                    maxLength="100000"
+                    id="pasteInput" />
+                <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+                <OptionsContainer
+                    pass={this.state.pass}
+                    expiry={this.state.expiry}
+                    onChange={this.handleChange} />
+            </form>
+        );
+    }
+}
+
+export default NewPaste
\ No newline at end of file
diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js
deleted file mode 100644
index bd08fc1..0000000
--- a/frontend/src/components/PasteArea.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from 'react';
-import { TitleInput, PasteInput } from './Inputs'
-import OptionsContainer from './Options'
-import axios from 'axios';
-
-class PasteArea extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { 
-            title: '',
-            content: '',
-            pass: '',
-            expiry: ''
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
-
-    componentDidUpdate() {
-        if (this.state.title === "") {
-            document.title = `ctrl-v`;
-        } else {
-            document.title = `ctrl-v | ${this.state.title}`;
-        }
-    }
-
-    handleChange(event) {
-        const target = event.target;
-        const name = target.name;
-
-        this.setState({
-            [name]: target.value
-        });
-    }
-
-    parseExpiry(e) {
-        var cur = new Date();
-        var inSeconds = 0
-        switch (e) {
-            case '5 years':
-                inSeconds = 600 * 6 * 24 * 7 * 4 * 12 * 5
-                break;
-            case '1 year':
-                inSeconds = 600 * 6 * 24 * 7 * 4 * 12
-                break;
-            case '1 month':
-                inSeconds = 600 * 6 * 24 * 7 * 4
-                break;
-            case '1 day':
-                inSeconds = 600 * 6 * 24
-                break;
-            case '1 hour':
-                inSeconds = 600 * 6
-                break;
-            case '10 min':
-                inSeconds = 600
-                break;
-            case '1 week':
-            default:
-                inSeconds = 600 * 6 * 24 * 7
-                break;
-        }
-        return new Date(cur.getTime() + inSeconds * 1000).toISOString();
-    }
-
-    handleSubmit(event) {
-        var bodyFormData = new FormData();
-        bodyFormData.set('title', this.state.title);
-        bodyFormData.set('content', this.state.content);
-        bodyFormData.set('password', this.state.pass);
-        bodyFormData.set('expiry', this.parseExpiry(this.state.expiry));
-
-        axios({
-            method: 'post',
-            url: 'http://localhost:8080/api',
-            data: bodyFormData,
-            headers: { 'Content-Type': 'multipart/form-data' },
-        }).then(function (response) {
-            //handle success
-            console.log(response);
-        }).catch(function (response) {
-            //handle error
-            console.log(response);
-        });
-
-        event.preventDefault();
-    }
-
-    render() {
-        return (
-            <form onSubmit={this.handleSubmit}>
-                <TitleInput 
-                    onChange={this.handleChange}
-                    value={this.state.title}
-                    maxLength="100"
-                    id="titleInput" />
-                <PasteInput
-                    onChange={this.handleChange}
-                    content={this.state.content}
-                    maxLength="100000"
-                    id="pasteInput" />
-                <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
-                <OptionsContainer
-                    pass={this.state.pass}
-                    expiry={this.state.expiry}
-                    onChange={this.handleChange} />
-            </form>
-        );
-    }
-}
-
-export default PasteArea
\ No newline at end of file
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
new file mode 100644
index 0000000..aa0da34
--- /dev/null
+++ b/frontend/src/components/ViewPaste.js
@@ -0,0 +1,16 @@
+import React from 'react';
+// import { TitleInput, PasteInput } from './Inputs'
+// import OptionsContainer from './Options'
+// import axios from 'axios';
+
+class ViewPaste extends React.Component {
+    render() {
+        return (
+            <div>
+                {this.props.hash}
+            </div>
+        );
+    }
+}
+
+export default ViewPaste
\ No newline at end of file
diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
new file mode 100644
index 0000000..623b378
--- /dev/null
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled, { css } from 'styled-components'
+
+// show char limit if length > half of max
+const Chars = styled.p`
+    color: #11111100;
+    font-family: 'Roboto Mono', monospace;
+    position: absolute; 
+    font-size: 0.8em;
+    writing-mode: vertical-rl;
+    top: 50%;
+    transform: translate(5em, -50%);
+    right: 0;
+    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+
+    ${props =>
+        ((props.content.length / props.maxLength) > 0.5) &&
+        css`
+        color: #111111;
+    `};
+
+    ${props =>
+        ((props.content.length / props.maxLength) > 1) &&
+        css`
+        color: #ee1111;
+    `};
+`;
+
+class CharLimit extends React.Component {
+    render() {
+        return (
+            <Chars {...this.props} >{this.props.maxLength - this.props.content.length}/{this.props.maxLength}</Chars>
+        );
+    }
+}
+
+export default CharLimit
\ No newline at end of file
diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
new file mode 100644
index 0000000..e1fc0ba
--- /dev/null
+++ b/frontend/src/components/decorators/FloatingLabel.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import styled, { css } from 'styled-components'
+
+const StyledLabel = styled.label`
+    position: absolute;
+    top: 0.5em;
+    font-weight: 700;
+    font-size: 1em;
+    opacity: 0;
+    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+
+    ${props =>
+        (props.value.length > 0) &&
+        css`
+        top: -0.1em;
+        opacity: 1
+    `};
+`
+
+class FloatingLabel extends React.Component {
+    render() {
+        return (
+            <StyledLabel 
+                label={this.props.label}
+                value={this.props.value}
+                className={this.props.id}
+                htmlFor={this.props.id}>
+                    {this.props.label}
+            </StyledLabel>
+        );
+    }
+}
+
+export default FloatingLabel
\ No newline at end of file
-- 
cgit v1.2.3


From 4c649063ec0ce0e5f0822a47dcf84546ad1d1c5c Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Mon, 11 May 2020 21:27:48 -0700
Subject: error print

---
 frontend/src/components/NewPaste.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 2ad9533..29ae9ca 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -3,6 +3,21 @@ 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>
+    );
+}
 
 class NewPaste extends React.Component {
     constructor(props) {
@@ -13,12 +28,20 @@ class NewPaste extends React.Component {
             pass: '',
             expiry: '',
             hash: '',
+            error: '',
         };
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
+    newErr(msg) {
+        this.setState({ error: msg })
+        setTimeout(() => {
+            this.setState({ error: '' })
+        }, 3000);
+    }
+
     renderRedirect = () => {
         if (this.state.hash !== '') {
             const redirUrl = `/${this.state.hash}`
@@ -86,12 +109,10 @@ class NewPaste extends React.Component {
             data: bodyFormData,
             headers: { 'Content-Type': 'multipart/form-data' },
         }).then((response) => {
-
             // on success, redir
             this.setState({ hash: response.data.hash })
         }).catch((response) => {
-            // TODO: handle error
-            console.log(response);
+            this.newErr(response)
         });
 
         event.preventDefault();
@@ -112,6 +133,7 @@ class NewPaste extends React.Component {
                     maxLength="100000"
                     id="pasteInput" />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+                <Error msg={this.state.error} />
                 <OptionsContainer
                     pass={this.state.pass}
                     expiry={this.state.expiry}
-- 
cgit v1.2.3


From 021b8cd46b1fa70a8da2fc867412bb65afd42722 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Mon, 11 May 2020 21:43:15 -0700
Subject: add err messages

---
 backend/api/routes.go               |  7 ++++---
 backend/db/db.go                    |  9 ++-------
 frontend/src/components/NewPaste.js | 13 +++++++++++--
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/backend/api/routes.go b/backend/api/routes.go
index f8d2e4f..ff43714 100644
--- a/backend/api/routes.go
+++ b/backend/api/routes.go
@@ -38,7 +38,8 @@ func insertFunc(w http.ResponseWriter, r *http.Request) {
 	hash, err := db.New(ip, content, expiry, title, password)
 	if err != nil {
 		w.WriteHeader(http.StatusBadRequest)
-		fmt.Fprintf(w, "got err: %s", err.Error())
+		fmt.Fprintf(w, "%s", err.Error())
+		return
 	}
 
 	// if successful return paste hash
@@ -75,14 +76,14 @@ func handleGetPaste(w http.ResponseWriter, r *http.Request, parsedPassword strin
 	// if hash was not found
 	if err == cache.PasteNotFound {
 		w.WriteHeader(http.StatusNotFound)
-		fmt.Fprintf(w, "got err: %s", err)
+		fmt.Fprintf(w, "%s", err)
 		return
 	}
 
 	// if paste is password protected
 	if err == cache.UserUnauthorized {
 		w.WriteHeader(http.StatusUnauthorized)
-		fmt.Fprintf(w, "got err: %s", err)
+		fmt.Fprintf(w, "%s", err)
 		return
 	}
 
diff --git a/backend/db/db.go b/backend/db/db.go
index 9bfe55a..6fbc5aa 100644
--- a/backend/db/db.go
+++ b/backend/db/db.go
@@ -80,16 +80,11 @@ func New(ip, content, expiry, title, password string) (string, error) {
 }
 
 func checkLengths(title string, content string) error {
-	errs := ""
 	if len(title) > TitleLimit {
-		errs += fmt.Sprintf("title is longer than character limit of %d\n", TitleLimit)
+		return fmt.Errorf("title is longer than character limit of %d\n", TitleLimit)
 	}
 	if len(content) > ContentLimit {
-		errs += fmt.Sprintf("content is longer than character limit of %d\n", ContentLimit)
-	}
-	// if any errors were found
-	if errs != "" {
-		return fmt.Errorf(errs)
+		return fmt.Errorf("content is longer than character limit of %d\n", ContentLimit)
 	}
 
 	return nil
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 29ae9ca..2ce2ecf 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -111,8 +111,17 @@ class NewPaste extends React.Component {
         }).then((response) => {
             // on success, redir
             this.setState({ hash: response.data.hash })
-        }).catch((response) => {
-            this.newErr(response)
+        }).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)
+            }
         });
 
         event.preventDefault();
-- 
cgit v1.2.3


From e563ee55db6c7a9fa719289638f5b9a8fbd72fda Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Mon, 11 May 2020 22:19:40 -0700
Subject: fix readonly + fields + mount err

---
 frontend/src/components/Err.js       | 18 ++++++++++
 frontend/src/components/Inputs.js    |  2 ++
 frontend/src/components/NewPaste.js  | 16 +--------
 frontend/src/components/ViewPaste.js | 64 +++++++++++++++++++++++++++++++++---
 4 files changed, 81 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/Err.js

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
-- 
cgit v1.2.3


From a1d00c1f90e35f2fb3e33cd51cc30b5e6a44f6ac Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Mon, 11 May 2020 23:15:07 -0700
Subject: fmt info component

---
 frontend/src/components/NewPaste.js  |  4 +--
 frontend/src/components/PasteInfo.js | 29 ++++++++++++++++++++++
 frontend/src/components/ViewPaste.js | 47 +++++++++++++++++++++++++-----------
 3 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/PasteInfo.js

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)
                 }
             })
     }
-- 
cgit v1.2.3


From ee9bb1e9249079379ceff3b031296e284aedc872 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Mon, 11 May 2020 23:29:46 -0700
Subject: working no pass rendering

---
 frontend/src/components/Err.js       |  2 +-
 frontend/src/components/ViewPaste.js | 22 +++++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Err.js b/frontend/src/components/Err.js
index f1891d0..8562a74 100644
--- a/frontend/src/components/Err.js
+++ b/frontend/src/components/Err.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components'
 
 const ErrMsg = styled.p`
-    display: inline-block;
+    display: inline;
     font-weight: 700;
     margin-left: 2em;
     color: #ff3333
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index bba0219..79b1840 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -36,6 +36,20 @@ class ViewPaste extends React.Component {
         }
     }
 
+    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>
@@ -43,10 +57,9 @@ class ViewPaste extends React.Component {
                     value={this.state.title}
                     id="titleInput"
                     readOnly />
-                <PasteInput
-                    content={this.state.content}
-                    id="pasteInput"
-                    readOnly />
+
+                {this.drawRightMode()}
+
                 <PasteInfo
                     expiry={this.state.expiry}
                     mode={this.state.mode} />
@@ -67,7 +80,6 @@ class ViewPaste extends React.Component {
         axios.get(serverURL)
             .then((response) => {
                 const data = response.data
-                console.log(this.fmtDateStr(data.expiry))
                 this.setState({
                     title: data.title,
                     content: data.content,
-- 
cgit v1.2.3