add preview panel

1 files changed, 69 insertions, 6 deletions

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index e13e7df..e1075c4 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -5,6 +5,29 @@ 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'
+
+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;
+`
 
 class NewPaste extends React.Component {
     constructor(props) {
@@ -17,10 +40,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,6 +67,11 @@ class NewPaste extends React.Component {
         });
     }
 
+    togglePreview() {
+        const state = this.state.preview
+        this.setState({ preview: !state })
+    }
+
     handleSubmit(event) {
         event.preventDefault();
 
@@ -65,26 +96,58 @@ class NewPaste extends React.Component {
         }
     }
 
+    renderPreview() {
+        const pasteInput = <PasteInput
+            onChange={this.handleChange}
+            content={this.state.content}
+            maxLength="100000"
+            id="pasteInput" />
+
+        const 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>
         );