diff options
| -rw-r--r-- | frontend/src/components/NewPaste.js | 34 | ||||
| -rw-r--r-- | frontend/src/components/modals/PasteModal.js | 3 | ||||
| -rw-r--r-- | frontend/src/components/renderers/Code.js | 22 |
3 files changed, 40 insertions, 19 deletions
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index 6e1b507..e13e7df 100644 --- a/frontend/src/components/NewPaste.js +++ b/frontend/src/components/NewPaste.js @@ -43,22 +43,26 @@ class NewPaste extends React.Component { handleSubmit(event) { event.preventDefault(); - PostNewPaste(this.state) - .then((response) => { - // on success, redir - this.setState({ hash: response.data.hash }) - }).catch((error) => { - const resp = error.response - // some weird err - if (resp !== undefined) { - const errTxt = `${resp.statusText}: ${resp.data}` - this.ErrorLabel.current.showMessage(errTxt) - } else { - // some weird err (e.g. network) - this.ErrorLabel.current.showMessage(error) - } - }); + // prevent resubmission + if (!this.state.hash) { + PostNewPaste(this.state) + .then((response) => { + // on success, redir + this.setState({ hash: response.data.hash }) + }).catch((error) => { + const resp = error.response + + // some weird err + if (resp !== undefined) { + const errTxt = `${resp.statusText}: ${resp.data}` + this.ErrorLabel.current.showMessage(errTxt) + } else { + // some weird err (e.g. network) + this.ErrorLabel.current.showMessage(error) + } + }); + } } render() { diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js index 75c28a8..48ea372 100644 --- a/frontend/src/components/modals/PasteModal.js +++ b/frontend/src/components/modals/PasteModal.js @@ -22,7 +22,8 @@ const PasteModal = (props) => { const clipboard = useClipboard({ copiedTimeout: 3000 }); Modal.setAppElement('body'); - const redir = () => { + const redir = (e) => { + e.preventDefault(); const redirUrl = `/${props.hash}` history.push(redirUrl); } diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js index 02c1cc6..0c601b3 100644 --- a/frontend/src/components/renderers/Code.js +++ b/frontend/src/components/renderers/Code.js @@ -1,6 +1,7 @@ import React from 'react'; import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs'; +import styled from 'styled-components' export const THEMES = Object.freeze({ 'atom': atomOneLight, @@ -34,16 +35,31 @@ export const LANGS = Object.freeze({ 'yaml': 'yaml' }) +const StyledPre = styled.pre` + padding: 0 !important; + margin: 0; +` + +const CodeBlock = styled.div` + width: 100%; + font-size: 0.8em; + padding: calc(0.8em - 1px) !important; + border-radius: 3px; + border: 1px solid #565656; + outline: none; + margin: 1.7em 0; +` + const CodeRenderer = React.forwardRef((props, ref) => { const Pre = (props) => { return ( - <pre {...props} ref={ref} /> + <StyledPre {...props} ref={ref} /> ); } return ( - <div className="lt-shadow codeBlock"> + <CodeBlock className="lt-shadow"> <SyntaxHighlighter ref={ref} language={props.lang} @@ -52,7 +68,7 @@ const CodeRenderer = React.forwardRef((props, ref) => { PreTag={Pre}> {props.content} </SyntaxHighlighter> - </div> + </CodeBlock> ); }); |