Make Snippet work

In scope of this PR main functionality for Snippet page were done.
Added spinner component to improve UX so the user will see that something
is loading while we fetching snippet from server.
Fixed few style error due to long snippets

Author: lotrien

src/actions/index.js

@@ -8,3 +8,14 @@ export const fetchRecentSnippets = dispatch => (
     .then(response => response.json())
     .then(json => dispatch(setRecentSnippets(json)))
 );
+
+export const setSnippet = snippet => ({
+  type: 'SET_SNIPPET',
+  snippet,
+});
+
+export const fetchSnippet = id => dispatch => (
+  fetch(`http://api.xsnippet.org/snippets/${id}`)
+    .then(response => response.json())
+    .then(json => dispatch(setSnippet(json)))
+);

src/assets/ripple.svg

@@ -1,34 +1,50 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { connect } from 'react-redux';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 
 import 'codemirror/lib/codemirror.css';
 
 import Title from './common/Title';
 import Input from './common/Input';
+import Spinner from './common/Spinner';
+import * as actions from '../actions';
 
 import '../styles/Snippet.styl';
 
-class Snippet extends Component {
-  constructor() {
-    super();
+class Snippet extends React.Component {
+  constructor(props) {
+    super(props);
     this.state = { isShowEmbed: false };
     this.toggleEmbed = this.toggleEmbed.bind(this);
   }
 
+  componentDidMount() {
+    const { dispatch } = this.props;
+    const { id } = this.props.match.params;
+
+    dispatch(actions.fetchSnippet(Number(id)));
+  }
+
   toggleEmbed() {
-    this.setState({ isShowEmbed: !this.state.isShowEmbed });
+    this.setState(prevState => ({ isShowEmbed: !prevState.isShowEmbed }));
   }
 
   render() {
+    const { snippet } = this.props;
+
+    if (!snippet) return <Spinner />;
+
+    const snippetTitle = snippet.get('title') ? snippet.get('title') : `#${snippet.get('id')}, Untitled`;
+
     return (
       [
-        <Title title="Snippet" key="snippet" />,
-        <div className="snippet">
+        <Title title="Snippet" key="Snippet title" />,
+        <div className="snippet" key="Snippet">
           <div className="snippet-header">
             <div className="snippet-data">
               <div>
-                <span className="snippet-data-title">#235435, Untitled</span>
-                <span className="snippet-data-lang">[ Java ]</span>
+                <span className="snippet-data-title">{snippetTitle}</span>
+                <span className="snippet-data-lang">[ {snippet.get('syntax', 'Text')} ]</span>
               </div>
               <span className="snippet-data-author">By Guest</span>
             </div>
@@ -46,11 +62,11 @@ class Snippet extends Component {
               In order to embed this content into your website or blog,
               simply copy and paste code provided below:
             </p>
-            <Input value="<script src='http://xsnippet.org/363686/embed/'></script>" />
+            <Input value={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`} />
           </div>
           <div className="snippet-code">
             <CodeMirror
-              value="console.log('All hail XSnippet')"
+              value={`${snippet.get('content')}`}
               options={{ lineNumbers: true, readOnly: 'nocursor' }}
             />
             <div className="snippet-code-bottom-bar">
@@ -64,4 +80,6 @@ class Snippet extends Component {
   }
 }
 
-export default Snippet;
+export default connect((state, ownProps) => ({
+  snippet: state.snippets.get(Number(ownProps.match.params.id)),
+}))(Snippet);

src/components/Snippet.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SpinnerImg from '../../assets/ripple.svg';
+
+import '../../styles/common/Spinner.styl';
+
+const Spinner = () => (
+  <div className="spinner">
+    <img src={SpinnerImg} alt="Loading..." />
+  </div>
+);
+
+export default Spinner;

src/components/common/Spinner.jsx

@@ -1,11 +1,14 @@
-import { List, Map } from 'immutable';
+import { List, Map, fromJS } from 'immutable';
 import { combineReducers } from 'redux';
 
 const snippets = (state = Map(), action) => {
   switch (action.type) {
     case 'SET_RECENT_SNIPPETS':
       return state.merge(action.snippets.map(snippet => [snippet.id, snippet]));
 
+    case 'SET_SNIPPET':
+      return state.set(action.snippet.id, fromJS(action.snippet));
+
     default:
       return state;
   }

src/reducers/index.js

@@ -11,7 +11,7 @@
   justify-content: flex-start
   align-items: center
   height: offset
-  z-index: 2
+  z-index: 5
   box-shadow: 0 2px 2px 0 border-dark
   &-inner
     display: flex

src/styles/Header.styl

@@ -6,5 +6,6 @@
   min-height: 100%
   margin-top: offset
   margin-left: offset
+  overflow-y: auto
   background-color: site-bg
   font-family: font-quicksand

src/styles/Main.styl

@@ -3,7 +3,6 @@
 .snippet
   display: flex
   flex-flow: column nowrap
-  height: 75vh
   background-color: snippet-content-light
   box-shadow: 0 2px 2px 0 border-dark
   &-header
@@ -18,6 +17,8 @@
     padding: 15px 20px
 
   &-data
+    & > div
+      display: flex
     &-title
       font-size: 20px
       margin-right: 20px
@@ -68,6 +69,7 @@
       text-align: right
       padding: 10px 20px
       border-top: 1px solid border-light
+      background-color: snippet-content-light
     &-button
       color: text-light
       border: none

src/styles/Snippet.styl

@@ -0,0 +1,6 @@
+.spinner
+  display: flex
+  height: 100%
+  justify-content: center
+  & > img
+    width: 30%

src/styles/common/Spinner.styl

@@ -15,3 +15,6 @@
 
 .CodeMirror-gutters
   border-right: none
+
+.CodeMirror-line
+  padding-left: 20px !important