Merge pull request #24 from xsnippet/lang-bar

Make Language Bar on New Snippet page fetch actual languages

Author: ikalnytskyi

src/actions/index.js

@@ -19,3 +19,14 @@ export const fetchSnippet = id => dispatch => (
     .then(response => response.json())
     .then(json => dispatch(setSnippet(json)))
 );
+
+export const setSyntaxes = syntaxes => ({
+  type: 'SET_SYNTAXES',
+  syntaxes,
+});
+
+export const fetchSyntaxes = dispatch => (
+  fetch('http://api.xsnippet.org/syntaxes')
+    .then(response => response.json())
+    .then(json => dispatch(setSyntaxes(json)))
+);

src/components/NewSnippet.jsx

@@ -1,60 +1,49 @@
 import React from 'react';
-import { Scrollbars } from 'react-custom-scrollbars';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 
 import 'codemirror/lib/codemirror.css';
 
 import Title from './common/Title';
 import Input from './common/Input';
+import Syntaxes from './Syntaxes';
 
 import '../styles/NewSnippet.styl';
 
-const NewSnippet = () => (
-  [
-    <Title title="New snippet" key="title" />,
-    <div className="new-snippet" key="new-snippet">
-      <div className="new-snippet-code-wrapper">
-        <div className="new-snippet-code-header">
-          <Input placeholder="Title" />
-          <Input placeholder="Tags (separate tags by comma)" />
-        </div>
-        <div className="new-snippet-code">
-          <CodeMirror
-            value="console.log('All hail XSnippet')"
-            options={{ lineNumbers: false }}
-          />
-          <div className="new-snippet-code-bottom-bar">
-            <button>POST</button>
+class NewSnippet extends React.Component {
+  constructor() {
+    super();
+    this.state = { code: '' };
+  }
+  render() {
+    return (
+      [
+        <Title title="New snippet" key="New Snippet Title" />,
+        <div className="new-snippet" key="New Snippet">
+          <div className="new-snippet-code-wrapper">
+            <div className="new-snippet-code-header">
+              <Input placeholder="Title" />
+              <Input placeholder="Tags (separate tags by comma)" />
+            </div>
+            <div className="new-snippet-code">
+              <CodeMirror
+                value={this.state.code}
+                options={{ lineNumbers: false }}
+                onBeforeChange={(editor, data, code) => {
+                  this.setState({ code });
+                }}
+              />
+              <div className="new-snippet-code-bottom-bar">
+                <button>POST</button>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-      <div className="new-snippet-lang-wrapper">
-        <div className="new-snippet-lang-header">
-          <Input placeholder="Type to search..." />
-        </div>
-        <div className="new-snippet-lang-list-wrapper">
-          <Scrollbars>
-            <ul className="new-snippet-lang-list">
-              <li className="new-snippet-lang-item">Text1</li>
-              <li className="new-snippet-lang-item">Text2</li>
-              <li className="new-snippet-lang-item">Text3</li>
-              <li className="new-snippet-lang-item">Text4</li>
-              <li className="new-snippet-lang-item">Text5</li>
-              <li className="new-snippet-lang-item">Text6</li>
-              <li className="new-snippet-lang-item">Text7</li>
-              <li className="new-snippet-lang-item">Text8</li>
-              <li className="new-snippet-lang-item">Text9</li>
-              <li className="new-snippet-lang-item">Text10</li>
-              <li className="new-snippet-lang-item">Text11</li>
-              <li className="new-snippet-lang-item">Text12</li>
-              <li className="new-snippet-lang-item">Text13</li>
-              <li className="new-snippet-lang-item">Text14</li>
-            </ul>
-          </Scrollbars>
-        </div>
-      </div>
-    </div>,
-  ]
-);
+          <div className="new-snippet-lang-wrapper">
+            <Syntaxes />
+          </div>
+        </div>,
+      ]
+    );
+  }
+}
 
 export default NewSnippet;

src/components/Syntaxes.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+import { connect } from 'react-redux';
+
+import Input from './common/Input';
+import * as actions from '../actions';
+
+class Syntaxes extends React.Component {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch(actions.fetchSyntaxes);
+  }
+
+  render() {
+    const { syntaxes } = this.props;
+
+    return (
+      [
+        <div className="new-snippet-lang-header">
+          <Input placeholder="Type to search..." />
+        </div>,
+        <div className="new-snippet-lang-list-wrapper">
+          <Scrollbars>
+            <ul className="new-snippet-lang-list">
+              {syntaxes.map(syntax => <li className="new-snippet-lang-item">{syntax}</li>)}
+            </ul>
+          </Scrollbars>
+        </div>,
+      ]
+    );
+  }
+}
+
+export default connect(state => ({
+  syntaxes: state.syntaxes,
+}))(Syntaxes);

src/reducers/index.js

@@ -24,7 +24,18 @@ const recent = (state = List(), action) => {
   }
 };
 
+const syntaxes = (state = List(), action) => {
+  switch (action.type) {
+    case 'SET_SYNTAXES':
+      return List(action.syntaxes);
+
+    default:
+      return state;
+  }
+};
+
 export default combineReducers({
   snippets,
   recent,
+  syntaxes,
 });

src/styles/NewSnippet.styl

@@ -5,7 +5,7 @@ lang-bar-width = 230px
 
 .new-snippet
   display: flex
-  height: 75vh
+  min-height: 75vh
   background-color: snippet-content-light
   box-shadow: 0 2px 2px 0 border-dark
   &-code,

src/styles/common/overwrite.styl

@@ -16,5 +16,5 @@
 .CodeMirror-gutters
   border-right: none
 
-.CodeMirror-line
+.snippet .CodeMirror-line
   padding-left: 20px !important