implimenting first fuzzy search spike

spikes/fuzzy-search/fuzzy-search-filter/.babelrc

@@ -0,0 +1,15 @@
+{
+  "sourceMaps": "both",
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "add-module-exports",
+    "syntax-async-functions",
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }]
+  ]
+}

spikes/fuzzy-search/fuzzy-search-filter/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-infinite-spike",
+  "private": true,
+  "license": "private",
+  "scripts": {
+    "start": "webpack-dev-server --config webpack/index.js"
+  },
+  "dependencies": {
+    "build-array": "^1.0.0",
+    "delay": "^1.3.1",
+    "lodash.debounce": "^4.0.8",
+    "react": "^15.4.0",
+    "react-dom": "^15.4.0",
+    "react-fuzzy-filter": "^2.3.0",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-infinite": "^0.10.0",
+    "react-redux": "^4.4.6",
+    "redux": "^3.6.0",
+    "redux-logger": "^2.7.4",
+    "redux-promise-middleware": "^4.1.0",
+    "redux-thunk": "^2.1.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.18.2",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.7",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-syntax-async-functions": "^6.13.0",
+    "babel-plugin-transform-object-rest-spread": "^6.19.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "faker": "^3.1.0",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^2.1.0-beta.27",
+    "webpack-dev-server": "^1.16.2"
+  }
+}

spikes/fuzzy-search/fuzzy-search-filter/readme.md

@@ -0,0 +1,3 @@
+# react-fuzzy-filter
+
+- https://github.com/jdlehman/react-fuzzy-filter

spikes/fuzzy-search/fuzzy-search-filter/src/actions.js

@@ -0,0 +1,91 @@
+const buildArray = require('build-array');
+const delay = require('delay');
+const faker = require('faker');
+
+const actions =  {
+  'FETCH_FULFILLED': (state, action) => {
+    return {
+      ...state,
+      fetching: false,
+      items: (state.items || []).concat(action.payload)
+    };
+  },
+  'FETCH_PENDING': (state, action) => {
+    return {
+      ...state,
+      fetching: true
+    };
+  },
+  'FILTER_PENDING': (state, action) => {
+    return {
+      ...state,
+      fetching: true
+    };
+  },
+  'FILTER_FULFILLED': (state, action) => {
+    return {
+      ...state,
+      fetching: false,
+      filtered: action.payload.length !== state.items.length
+        ? action.payload
+        : null
+    };
+  },
+};
+
+const fetch = () => (dispatch, getState) => {
+  const {
+    filtered
+  } = getState();
+
+  if (filtered) {
+    return;
+  }
+
+  return dispatch({
+    type: 'FETCH',
+    payload: delay(500).then(() => {
+      const {
+        items = []
+      } = getState();
+
+      return buildArray(100000).map((v, i) => {
+        const id = items.length + i;
+
+        return {
+          id,
+          title: `test ${id}`,
+          description: faker.lorem.sentence(),
+          image: faker.image.imageUrl(),
+          date: faker.date.recent()
+        };
+      });
+    })
+  });
+};
+
+const filter = (payload) => (dispatch, getState) => {
+  const regexp = new RegExp(payload);
+
+  return dispatch({
+    type: 'FILTER',
+    payload: delay(500).then(() => {
+      const {
+        items = []
+      } = getState();
+
+      return items.filter((item) => {
+        return regexp.test(item.title);
+      }).sort((a, b) => a.id - b.id);
+    })
+  });
+};
+
+module.exports = (state, action) => {
+  return actions[action.type]
+    ? actions[action.type](state, action)
+    : state;
+};
+
+module.exports.fetch = fetch;
+module.exports.filter = filter;

spikes/fuzzy-search/fuzzy-search-filter/src/index.js

@@ -0,0 +1,18 @@
+const Store = require('./store');
+const ReactDOM = require('react-dom');
+const React = require('react');
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={Store()} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/fuzzy-search/fuzzy-search-filter/src/root.js

@@ -0,0 +1,24 @@
+const ReactRedux = require('react-redux');
+const ReactHotLoader = require('react-hot-loader');
+const React = require('react');
+const Search = require('./search');
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+module.exports = ({
+  store
+}) => {
+  return (
+    <AppContainer>
+      <Provider store={store}>
+        <Search />
+      </Provider>
+    </AppContainer>
+  );
+};

spikes/fuzzy-search/fuzzy-search-filter/src/search.js

@@ -0,0 +1,62 @@
+const ReactRedux = require('react-redux');
+const actions = require('./actions');
+const React = require('react');
+const users = require('../../users');
+
+import fuzzyFilterFactory from 'react-fuzzy-filter';
+
+// these components share state and can even live in different components
+const {InputFilter, FilterResults} = fuzzyFilterFactory();
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  fetch,
+  filter
+} = actions;
+
+const mapStateToProps = (state) => {
+  return state;
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    fetch: () => {
+      return dispatch(fetch());
+    },
+    filter: (payload) => {
+      return dispatch(filter(payload));
+    }
+  }
+};
+
+const Search = React.createClass({
+
+  renderItem: function(item, index) {
+    return(<div key={index}>{item.name}</div>);
+  },
+
+  render: function() {
+    const fuseConfig = {
+      keys: ['meta', 'tag']
+    };
+    return (
+      <div>
+        <InputFilter />
+        <div>Any amount of content between</div>
+        <FilterResults
+          items={users}
+          renderItem={this.renderItem}
+          fuseConfig={fuseConfig}
+        />
+      </div>
+    );
+  }
+})
+
+module.exports = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Search);

spikes/fuzzy-search/fuzzy-search-filter/src/store.js

@@ -0,0 +1,19 @@
+const createLogger = require('redux-logger');
+const promiseMiddleware = require('redux-promise-middleware').default;
+const thunk = require('redux-thunk').default;
+const redux = require('redux');
+const reducer = require('./actions');
+
+const {
+  createStore,
+  compose,
+  applyMiddleware
+} = redux;
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state, applyMiddleware(
+    createLogger(),
+    promiseMiddleware(),
+    thunk
+  ));
+};

spikes/fuzzy-search/fuzzy-search-filter/static/.gitignore

@@ -0,0 +1,7 @@
+*
+!.gitignore
+!.gitkeep
+!index.html
+
+js/*
+!js/.gitkeep

spikes/fuzzy-search/fuzzy-search-filter/static/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>Infinite List</title>
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='main.js'></script>
+  </body>
+</html>

spikes/fuzzy-search/fuzzy-search-filter/webpack/base.js

@@ -0,0 +1,56 @@
+const webpack = require('webpack');
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const plugins = {
+  'no-errors-plugin': new webpack.NoErrorsPlugin(),
+};
+
+exports.config = {
+  context: path.join(__dirname, '../'),
+  output: {
+    path: path.join(__dirname, '../static'),
+    publicPath: '/',
+    filename: '[name].js'
+  },
+  plugins: [
+    new webpack.NoErrorsPlugin(),
+    new ExtractTextPlugin({
+     filename: 'css/[name].css',
+     allChunks: true
+   }),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        postcss: {}
+      }
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, '../src')
+      ],
+      loader: 'babel-loader'
+    }, {
+      test: /\.css?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, '../src'),
+        path.join(__dirname, '../docs')
+      ],
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: 'style-loader',
+        loader: [
+          'css-loader?',
+          'modules&importLoaders=1&',
+          'localIdentName=[name]__[local]___[hash:base64:5]!',
+          'postcss-loader'
+        ].join('')
+      })
+    }]
+  }
+};
+
+exports.plugins = plugins;

spikes/fuzzy-search/fuzzy-search-filter/webpack/index.js

@@ -0,0 +1,29 @@
+const base = require('./base.js');
+const webpack = require('webpack');
+const path = require('path');
+
+const devServer = {
+  contentBase: [
+    path.join(__dirname, '../static/')
+  ],
+  hot: true,
+  compress: true,
+  lazy: false,
+  historyApiFallback: {
+    index: './index.html'
+  }
+};
+
+module.exports = Object.assign(base.config, {
+  entry: [
+    'react-hot-loader/patch',
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    './src/index.js'
+  ],
+  plugins: base.config.plugins.concat([
+    new webpack.HotModuleReplacementPlugin()
+  ]),
+  devtool: 'source-map',
+  devServer
+});

spikes/fuzzy-search/users.js

@@ -0,0 +1,62 @@
+module.exports = [
+  {
+    "name": "Franks Howe",
+    "integer": 0,
+    "meta": "Franks Howe|0",
+    "tag": "ea"
+  },
+  {
+    "name": "Lucas Barlow",
+    "integer": 1,
+    "meta": "Lucas Barlow|1",
+    "tag": "dolore"
+  },
+  {
+    "name": "Black Cote",
+    "integer": 3,
+    "meta": "Black Cote|3",
+    "tag": "eu"
+  },
+  {
+    "name": "Francisca Pickett",
+    "integer": 10,
+    "meta": "Francisca Pickett|10",
+    "tag": "ipsum"
+  },
+  {
+    "name": "Debbie Morris",
+    "integer": 2,
+    "meta": "Debbie Morris|2",
+    "tag": "consectetur"
+  },
+  {
+    "name": "Olga Mclean",
+    "integer": 7,
+    "meta": "Olga Mclean|7",
+    "tag": "laboris"
+  },
+  {
+    "name": "Wendy Cabrera",
+    "integer": 8,
+    "meta": "Wendy Cabrera|8",
+    "tag": "nisi"
+  },
+  {
+    "name": "Nell Duncan",
+    "integer": 3,
+    "meta": "Nell Duncan|3",
+    "tag": "qui"
+  },
+  {
+    "name": "Mendoza Wiggins",
+    "integer": 4,
+    "meta": "Mendoza Wiggins|4",
+    "tag": "Lorem"
+  },
+  {
+    "name": "Edith Franklin",
+    "integer": 3,
+    "meta": "Edith Franklin|3",
+    "tag": "exercitation"
+  }
+]