Fetch and show recent snippets

I don't know how to explain my motivation for this change so let's say
this: we were missing that functionality so we've got one now. ;)

Author: ikalnytskyi

package-lock.json

@@ -20,6 +20,7 @@
   ],
   "dependencies": {
     "codemirror": "^5.33.0",
+    "immutable": "^3.8.2",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-codemirror2": "^3.0.7",

package.json

@@ -0,0 +1,10 @@
+export const setRecentSnippets = snippets => ({
+  type: 'SET_RECENT_SNIPPETS',
+  snippets,
+});
+
+export const fetchRecentSnippets = dispatch => (
+  fetch('http://api.xsnippet.org/snippets')
+    .then(response => response.json())
+    .then(json => dispatch(setRecentSnippets(json)))
+);

src/actions/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const RecentSnippetItem = ({ snippet }) => (
+  <li className="recent-snippet-item">
+    <div className="recent-snippet-data">
+      <div>
+        <span className="recent-snippet-data-title">{snippet.get('title')}</span>
+        <span className="recent-snippet-data-lang">[ {snippet.get('syntax', 'Text')} ]</span>
+      </div>
+      <span className="recent-snippet-data-author">By Guest</span>
+    </div>
+    <div>
+      <button className="recent-snippet-button light">Raw</button>
+      <button className="recent-snippet-button light">Download</button>
+      <Link to={`${snippet.get('id')}`} className="recent-snippet-button">Show</Link>
+    </div>
+  </li>
+);
+
+export default RecentSnippetItem;

src/components/RecentSnippetItem.jsx

@@ -1,44 +1,31 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
 
 import Title from './common/Title';
+import RecentSnippetItem from './RecentSnippetItem';
+import * as actions from '../actions';
 
 import '../styles/RecentSnippets.styl';
 
-const RecentSnippets = () => (
-  [
-    <Title title="Recent snippets" additionalClass="recent-title" key="title-recent" />,
-    <ul className="recent-snippet" key="recent-snippet">
-      <li className="recent-snippet-item">
-        <div className="recent-snippet-data">
-          <div>
-            <span className="recent-snippet-data-title">#235435, Untitled</span>
-            <span className="recent-snippet-data-lang">[ Java ]</span>
-          </div>
-          <span className="recent-snippet-data-author">By Guest</span>
-        </div>
-        <div>
-          <button className="recent-snippet-button light">Raw</button>
-          <button className="recent-snippet-button light">Download</button>
-          <Link to="/2" className="recent-snippet-button">Show</Link>
-        </div>
-      </li>
-      <li className="recent-snippet-item">
-        <div className="recent-snippet-data">
-          <div>
-            <span className="recent-snippet-data-title">#235435, Untitled</span>
-            <span className="recent-snippet-data-lang">[ Java ]</span>
-          </div>
-          <span className="recent-snippet-data-author">By Guest</span>
-        </div>
-        <div>
-          <button className="recent-snippet-button light">Raw</button>
-          <button className="recent-snippet-button light">Download</button>
-          <Link to="/3" className="recent-snippet-button">Show</Link>
-        </div>
-      </li>
-    </ul>,
-  ]
-);
+class RecentSnippets extends React.Component {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch(actions.fetchRecentSnippets);
+  }
 
-export default RecentSnippets;
+  render() {
+    const { snippets, recent } = this.props;
+
+    return ([
+      <Title title="Recent snippets" additionalClass="recent-title" key="title-recent" />,
+      <ul className="recent-snippet" key="recent-snippet">
+        {recent.map(id => <RecentSnippetItem key={id} snippet={snippets.get(id)} />)}
+      </ul>,
+    ]);
+  }
+}
+
+export default connect(state => ({
+  snippets: state.snippets,
+  recent: state.recent,
+}))(RecentSnippets);

src/components/RecentSnippets.jsx

@@ -0,0 +1,27 @@
+import { List, Map } 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]));
+
+    default:
+      return state;
+  }
+};
+
+const recent = (state = List(), action) => {
+  switch (action.type) {
+    case 'SET_RECENT_SNIPPETS':
+      return List(action.snippets.map(snippet => snippet.id));
+
+    default:
+      return state;
+  }
+};
+
+export default combineReducers({
+  snippets,
+  recent,
+});