Merge pull request #30 from jackyzha0/latex-renderer

latex renderer live preview

1 files changed, 106 insertions, 22 deletions

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 6e1b507..8012b99 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -5,6 +5,34 @@ import Error from './Err'
 import { PostNewPaste } from '../helpers/httpHelper'
 import PasteModal from './modals/PasteModal'
 import { LANGS } from './renderers/Code'
+import styled from 'styled-components'
+import CodeRenderer from './renderers/Code'
+import Latex from './renderers/Latex'
+
+const Button = styled.button`
+    margin-right: 0 !important;
+    margin-left: 2em !important;
+    height: calc(16px + 1.6em + 2px);
+`
+
+const Flex = styled.div`
+    display: flex;
+    flex-direction: row;
+`
+
+const FlexLeft = styled.div`
+    flex: 0 0 50%;
+`
+
+const FlexRight = styled.div`
+    flex: 0 0 50%;
+    max-width: calc(50% - 1em + 2px);
+    margin-left: 2em;
+`
+
+const LatexWrapper = styled.div`
+    margin: 2em;
+`
 
 class NewPaste extends React.Component {
     constructor(props) {
@@ -17,10 +45,13 @@ class NewPaste extends React.Component {
             expiry: '',
             hash: '',
             error: '',
+            preview: false,
         };
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.togglePreview = this.togglePreview.bind(this);
+        this.renderPreview = this.renderPreview.bind(this);
         this.ErrorLabel = React.createRef();
     }
 
@@ -41,46 +72,99 @@ class NewPaste extends React.Component {
         });
     }
 
+    togglePreview() {
+        const state = this.state.preview
+        this.setState({ preview: !state })
+    }
+
     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)
+                    }
+                });
+        }
+    }
+
+    renderPreview() {
+        const pasteInput = <PasteInput
+            onChange={this.handleChange}
+            content={this.state.content}
+            maxLength="100000"
+            id="pasteInput" />
+
+        var preview
+        switch (this.state.language) {
+            case 'latex':
+                preview = 
+                    <LatexWrapper>
+                        <Latex
+                            content={this.state.content} />
+                    </LatexWrapper>
+                break
+            default:
+                preview = 
+                    <CodeRenderer
+                        lang={this.state.language}
+                        theme='atom'
+                        content={this.state.content} />
+        }
+
+        if (this.state.preview) {
+            return (
+                <Flex>
+                    <FlexLeft>
+                        {pasteInput}
+                    </FlexLeft>
+                    <FlexRight className='preview' >
+                        {preview}
+                    </FlexRight>
+                </Flex>
+            );
+        } else {
+            return (
+                pasteInput
+            );
+        }
     }
 
     render() {
         return (
             <form onSubmit={this.handleSubmit}>
                 <PasteModal hash={this.state.hash} />
-                <TitleInput 
+                <TitleInput
                     onChange={this.handleChange}
                     value={this.state.title}
                     maxLength="100"
                     id="titleInput" />
-                <PasteInput
-                    onChange={this.handleChange}
-                    content={this.state.content}
-                    maxLength="100000"
-                    id="pasteInput" />
+                {this.renderPreview()}
                 <OptionsContainer
                     pass={this.state.pass}
                     expiry={this.state.expiry}
                     lang={this.state.language}
                     onChange={this.handleChange} />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+                <Button
+                    className="lt-shadow lt-hover"
+                    type="button"
+                    onClick={this.togglePreview} >
+                    preview
+                </Button>
                 <Error ref={this.ErrorLabel} />
             </form>
         );