Merge pull request #22 from xsnippet/redux

Recent snippets

Author: lotrien

.eslintrc.json

@@ -7,6 +7,7 @@
     "jsx-a11y/anchor-is-valid": ["error", {
       "components": ["Link"],
       "specialLink": ["to"]
-    }]
+    }],
+    "react/prop-types": [0]
   }
 }

package-lock.json

@@ -20,12 +20,16 @@
   ],
   "dependencies": {
     "codemirror": "^5.33.0",
+    "immutable": "^3.8.2",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-codemirror2": "^3.0.7",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.0.0",
-    "react-router-dom": "^4.2.2"
+    "react-redux": "^5.0.6",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

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

@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
 
 import App from './components/App';
+import store from './store';
 
 ReactDOM.render(
   (
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <Provider store={store}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </Provider>
   ), document.getElementById('root'),
 );

src/index.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,
+});

src/reducers/index.js

@@ -0,0 +1,11 @@
+import * as redux from 'redux';
+import thunk from 'redux-thunk';
+
+import reducer from '../reducers';
+
+// Redux Thunk middleware allows you to write action creators that return a
+// function instead of an action. The thunk can be used to delay the dispatch
+// of an action, or to dispatch only if a certain condition is met. The former
+// is the case for XSnippet Web since we need to fetch data via HTTP API first
+// and then dispatch it to store.
+export default redux.createStore(reducer, redux.applyMiddleware(thunk));