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

(limited to 'frontend/src/components')

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