Merge pull request #27 from jackyzha0/save-lang

save lang

5 files changed, 34 insertions, 12 deletions

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 0b1c795..6e1b507 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -4,6 +4,7 @@ import OptionsContainer from './Options'
 import Error from './Err'
 import { PostNewPaste } from '../helpers/httpHelper'
 import PasteModal from './modals/PasteModal'
+import { LANGS } from './renderers/Code'
 
 class NewPaste extends React.Component {
     constructor(props) {
@@ -12,6 +13,7 @@ class NewPaste extends React.Component {
             title: '',
             content: '',
             pass: '',
+            language: LANGS.raw,
             expiry: '',
             hash: '',
             error: '',
@@ -73,12 +75,13 @@ class NewPaste extends React.Component {
                     content={this.state.content}
                     maxLength="100000"
                     id="pasteInput" />
-                <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
-                <Error ref={this.ErrorLabel} />
                 <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" />
+                <Error ref={this.ErrorLabel} />
             </form>
         );
     }
diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js
index 21e932a..f874c35 100644
--- a/frontend/src/components/Options.js
+++ b/frontend/src/components/Options.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components'
-import { PassInput, ExpiryInput } from './Inputs'
+import { PassInput, ExpiryInput, LangInput } from './Inputs'
 
 const Flex = styled.div`
     float: right;
@@ -17,6 +17,10 @@ class OptionsContainer extends React.Component {
                     value={this.props.pass}
                     onChange={this.props.onChange}
                     id="passwordInput" />
+                <LangInput
+                    value={this.props.lang}
+                    onChange={this.props.onChange}
+                    id="langInput" />
                 <ExpiryInput
                     value={this.props.expiry}
                     onChange={this.props.onChange}
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index 5217901..ea4981c 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components'
 import { useHistory } from 'react-router-dom';
-import { LangInput, ThemeInput } from './Inputs'
+import { ThemeInput } from './Inputs'
 
 const Bold = styled.span`
     font-weight: 700
@@ -19,6 +19,10 @@ const ButtonRow = styled.div`
     display: inline;
 `
 
+const SpacedText = styled.span`
+    margin-right: 1em;
+`
+
 const Flex = styled.div`
     float: right;
     display: flex;
@@ -36,10 +40,6 @@ const PasteInfo = (props) => {
     return (
         <div>
             <Flex>
-                <LangInput
-                    value={props.lang}
-                    onChange={props.onChange}
-                    id="langInput" />
                 <ThemeInput
                     value={props.theme}
                     onChange={props.onChange}
@@ -54,8 +54,16 @@ const PasteInfo = (props) => {
                         >
                         view raw
                     </Button>
+                    <SpacedText>
+                        <Bold>language:&nbsp;</Bold>{props.lang}
+                    </SpacedText>
+                    <SpacedText>
+                        <Bold>expires:&nbsp;</Bold>{props.expiry}
+                    </SpacedText>
+                    <SpacedText>
+                        {props.err}
+                    </SpacedText>
                 </ButtonRow>
-                <Bold>expires:&nbsp;</Bold>{props.expiry}
             </StyledDiv>
         </div>
     );
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 0b2ebe7..81d78f3 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -34,7 +34,6 @@ class ViewPaste extends React.Component {
     handleChange(event) {
         const target = event.target;
         const name = target.name;
-        console.log(target, name)
 
         this.setState({
             [name]: target.value
@@ -96,8 +95,8 @@ class ViewPaste extends React.Component {
                     lang={this.state.language}
                     theme={this.state.theme}
                     onChange={this.handleChange}
+                    err={<Error ref={this.ErrorLabel} />}
                     expiry={this.state.expiry} />
-                <Error ref={this.ErrorLabel} />
             </div>
         );
     }
@@ -109,9 +108,11 @@ class ViewPaste extends React.Component {
     }
 
     setStateFromData(data) {
+        console.log(data)
         this.setState({
             title: data.title,
             content: data.content,
+            language: data.language,
             expiry: this.fmtDateStr(data.expiry),
         })
     }
@@ -124,6 +125,12 @@ class ViewPaste extends React.Component {
             }).catch((error) => {
                 const resp = error.response
 
+                // network err
+                if (!resp) {
+                    this.ErrorLabel.current.showMessage(error)
+                    return
+                }
+
                 // catch 401 unauth (password protected)
                 if (resp.status === 401) {
                     this.setState({hasPass: true})
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index 12efc67..a024bb7 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -14,7 +14,7 @@ export const THEMES = Object.freeze({
 export const LANGS = Object.freeze({
     'go': 'go',
     'python': 'python',
-    'javascript': 'javascript',
+    'js': 'javascript',
     'html': 'html',
     'css': 'css',
     'c': 'c',