Merge pull request #23 from xsnippet/snippet

Make Snippet work

Author: ikalnytskyi

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