Redux with stub data (fixes #8)

package.json

@@ -32,7 +32,9 @@
     "express": "4.13.4",
     "helmet": "1.3.0",
     "react": "0.14.7",
-    "react-router": "2.0.0"
+    "react-redux": "4.4.0",
+    "react-router": "2.0.0",
+    "redux": "3.3.1"
   },
   "devDependencies": {
     "babel-core": "6.6.4",
@@ -68,6 +70,7 @@
     "react-dom": "0.14.7",
     "react-hot-loader": "1.3.0",
     "react-transform-hmr": "1.0.2",
+    "redux-devtools": "3.1.1",
     "semver": "5.1.0",
     "shelljs": "0.6.0",
     "sinon": "1.17.3",

src/core/reducers/addons.js

@@ -0,0 +1,15 @@
+const initialState = {
+  wat: {slug: 'wat', title: 'Wat is this?'},
+  foo: {slug: 'foo', title: 'The foo add-on'},
+  food: {slug: 'food', title: 'Find food'},
+  bar: {slug: 'bar', title: 'The bar add-on'},
+};
+
+export default function addon(state = initialState, action) {
+  switch (action.type) {
+    case 'ADDON_FETCHED':
+      return Object.assign({}, state, {[action.addon.slug]: action.addon});
+    default:
+      return state;
+  }
+}

src/search/actions/index.js

@@ -0,0 +1,6 @@
+export function setQuery(query) {
+  return {
+    type: 'SET_QUERY',
+    query,
+  };
+}

src/search/client.js

@@ -1,3 +1,4 @@
+import 'babel-core/polyfill';
 import React from 'react';
 import { render } from 'react-dom';
 import { Router, browserHistory } from 'react-router';

src/search/components/App.js

@@ -1,29 +1,15 @@
 import React from 'react';
-
-import SearchForm from './SearchForm';
-import SearchResults from './SearchResults';
-import { gettext as _ } from 'core/utils';
-
-export default class App extends React.Component {
-
-  state = {
-    query: null,
-    results: [],
-  }
-
-  handleSearch = (query) => {
-    const results = [{title: 'Foo'}, {title: 'Bar'}, {title: 'Baz'}];
-    this.setState({ query, results });
-  }
-
-  render() {
-    const { query, results } = this.state;
-    return (
-      <div className="search-app">
-        <h1>{_('Add-on Search')}</h1>
-        <SearchForm onSearch={this.handleSearch} />
-        <SearchResults results={results} query={query} />
-      </div>
-    );
-  }
-}
+import { Provider } from 'react-redux';
+import { createStore, combineReducers } from 'redux';
+import CurrentSearchPage from '../containers/CurrentSearchPage';
+import search from '../reducers/search';
+import addons from 'core/reducers/addons';
+const store = createStore(combineReducers({addons, search}));
+
+const App = () => (
+  <Provider store={store}>
+    <CurrentSearchPage />
+  </Provider>
+);
+
+export default App;

src/search/components/SearchPage.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+
+import SearchForm from './SearchForm';
+import SearchResults from './SearchResults';
+import { gettext as _ } from 'core/utils';
+
+const SearchPage = ({ handleSearch, results, query }) => (
+  <div className="search-page">
+    <h1>{_('Add-on Search')}</h1>
+    <SearchForm onSearch={handleSearch} />
+    <SearchResults results={results} query={query} />
+  </div>
+);
+
+SearchPage.propTypes = {
+  handleSearch: PropTypes.func.isRequired,
+  results: PropTypes.arrayOf(PropTypes.shape({
+    slug: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  })),
+  query: PropTypes.string,
+};
+
+export default SearchPage;

src/search/containers/CurrentSearchPage.js

@@ -0,0 +1,35 @@
+import { connect } from 'react-redux';
+import SearchPage from '../components/SearchPage';
+import { setQuery } from '../actions';
+
+function getVisibleAddons(addons, query) {
+  const matches = [];
+  for (const slug in addons) {
+    if (addons[slug].title.indexOf(query) >= 0) {
+      matches.push(addons[slug]);
+    }
+  }
+  return matches;
+}
+
+function mapStateToProps(state) {
+  return {
+    results: getVisibleAddons(state.addons, state.search.query),
+    query: state.search.query,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    handleSearch: (query) => {
+      dispatch(setQuery(query));
+    },
+  };
+}
+
+const CurrentSearchPage = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(SearchPage);
+
+export default CurrentSearchPage;

src/search/reducers/search.js

@@ -0,0 +1,12 @@
+const initialState = {
+  query: null,
+};
+
+export default function search(state = initialState, action) {
+  switch (action.type) {
+    case 'SET_QUERY':
+      return Object.assign({}, state, {query: action.query});
+    default:
+      return state;
+  }
+}

test-runner.js

@@ -1,5 +1,9 @@
+require('babel-core/polyfill');
+
 const testsContext = require.context('./tests', true, /\.js$/);
 const componentsContext = require.context('./src/', true, /components\/.*\.js$/);
+const reducersContext = require.context('./src/', true, /reducers\/.*\.js$/);
 
 testsContext.keys().forEach(testsContext);
 componentsContext.keys().forEach(componentsContext);
+reducersContext.keys().forEach(reducersContext);

tests/core/reducers/test_addons.js

@@ -0,0 +1,17 @@
+import addons from 'core/reducers/addons';
+
+describe('addon reducer', () => {
+  it('returns the old state', () => {
+    const originalState = {foo: {slug: 'foo'}, bar: {slug: 'bar'}};
+    assert.strictEqual(originalState, addons(originalState, {type: 'BLAH'}));
+  });
+
+  it('adds an addon', () => {
+    const originalState = {foo: {slug: 'foo'}};
+    const baz = {slug: 'baz'};
+    const expectedState = {foo: {slug: 'foo'}, baz};
+    const newState = addons(originalState, {type: 'ADDON_FETCHED', addon: baz});
+    assert.notStrictEqual(originalState, newState);
+    assert.deepEqual(expectedState, newState);
+  });
+});

tests/search/reducers/test_search.js

@@ -0,0 +1,8 @@
+import search from 'search/reducers/search';
+
+describe('search reducer', () => {
+  it('has a null query', () => {
+    const { query } = search(undefined, {type: '@@INIT'});
+    assert.strictEqual(query, null);
+  });
+});