From 433466a3947e75a36b811795bc21be1fff10b5e8 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Mon, 11 May 2020 21:11:16 -0700 Subject: backend redir --- frontend/src/components/NewPaste.js | 124 ++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 frontend/src/components/NewPaste.js (limited to 'frontend/src/components/NewPaste.js') 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 + } + } + + 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 ( +
+ {this.renderRedirect()} + + + + + + ); + } +} + +export default NewPaste \ No newline at end of file -- cgit v1.2.3 From 4c649063ec0ce0e5f0822a47dcf84546ad1d1c5c Mon Sep 17 00:00:00 2001 From: jackyzha0 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(-) (limited to 'frontend/src/components/NewPaste.js') 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 ( + { msg } + ); +} 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" /> + Date: Mon, 11 May 2020 21:43:15 -0700 Subject: add err messages --- frontend/src/components/NewPaste.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'frontend/src/components/NewPaste.js') 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 Date: Mon, 11 May 2020 22:19:40 -0700 Subject: fix readonly + fields + mount err --- frontend/src/components/NewPaste.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) (limited to 'frontend/src/components/NewPaste.js') 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 ( - { msg } - ); -} +import Error from './Err' class NewPaste extends React.Component { constructor(props) { -- cgit v1.2.3 From a1d00c1f90e35f2fb3e33cd51cc30b5e6a44f6ac Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Mon, 11 May 2020 23:15:07 -0700 Subject: fmt info component --- frontend/src/components/NewPaste.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'frontend/src/components/NewPaste.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 = () => { -- cgit v1.2.3