implimenting react-selectize with ajax to API endpoint

spikes/fuzzy-search/react-selectize/.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/react-selectize/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-infinite-spike",
+  "private": true,
+  "license": "private",
+  "scripts": {
+    "start": "webpack-dev-server --config webpack/index.js"
+  },
+  "dependencies": {
+    "axios": "^0.15.3",
+    "build-array": "^1.0.0",
+    "delay": "^1.3.1",
+    "lodash.debounce": "^4.0.8",
+    "react": "^15.4.0",
+    "react-addons-css-transition-group": "^15.4.1",
+    "react-addons-shallow-compare": "^15.4.1",
+    "react-dom": "^15.4.0",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-infinite": "^0.10.0",
+    "react-redux": "^4.4.6",
+    "react-selectize": "^2.1.0",
+    "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",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "faker": "^3.1.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^2.1.0-beta.27",
+    "webpack-dev-server": "^1.16.2"
+  }
+}

spikes/fuzzy-search/react-selectize/readme.md

@@ -0,0 +1,5 @@
+# react-fuzzy-filter
+
+- https://github.com/jdlehman/react-fuzzy-filter
+
+- Does not use API endpoint, instead an array of objects needs to be created locally

spikes/fuzzy-search/react-selectize/src/actions.js

@@ -0,0 +1,44 @@
+const buildArray = require('build-array');
+const delay = require('delay');
+const faker = require('faker');
+
+const actions =  {
+  'FETCH': (state, action) => {
+    return {
+      ...state,
+      items: (state.items || []).concat(action.payload)
+    };
+  }
+};
+
+const fetch = () => (dispatch, getState) => {
+
+  return dispatch({
+    type: 'FETCH',
+    payload: () => {
+      // debugger
+      const {
+        items = []
+      } = getState();
+
+      return buildArray(200).map((v, i) => {
+        const id = items.length + i;
+
+        return {
+          id,
+          name: faker.name.firstName(),
+          meta: `${faker.name.firstName()}|${faker.random.number()}`,
+          key: faker.image.imageUrl()
+        };
+      });
+    }
+  });
+};
+
+module.exports = (state, action) => {
+  return actions[action.type]
+    ? actions[action.type](state, action)
+    : state;
+};
+
+module.exports.fetch = fetch;

spikes/fuzzy-search/react-selectize/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/react-selectize/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/react-selectize/src/search.js

@@ -0,0 +1,89 @@
+const ReactRedux = require('react-redux');
+const actions = require('./actions');
+const React = require('react');
+const axios = require('axios');
+const users = require('../../users');
+
+var ReactSelectize = require("react-selectize");
+var SimpleSelect = ReactSelectize.SimpleSelect;
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  fetch
+} = actions;
+
+const mapStateToProps = (state) => {
+  return state;
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    fetch: () => {
+      return dispatch(fetch());
+    }
+  }
+};
+
+const Search = React.createClass({
+
+	getInitialState: function(){
+		return {
+			countries: [],
+			country: undefined
+		};
+	},
+
+	componentWillMount: function(){
+		var self = this;
+		this.req = axios.get("http://restverse.com/countries").then(function(countries){
+			self.setState({countries: countries.data}, function(){
+				self.refs.select.highlightFirstSelectableOption();
+			});
+		});
+	},
+
+	render: function(){
+		var self = this;
+
+		const _onValueChange = (country) => {
+			self.setState({country: country});
+		}
+
+		const _renderNoResultsFound = () => {
+			return (
+				<div className = "no-results-found">
+					{!!self.req ? "loading countries ..." : "No results found"}
+				</div>
+			)
+		}
+
+
+		return (
+			<div>
+				<SimpleSelect
+					ref = "select"
+					placeholder = "Select a country"
+					options = {this.state.countries}
+					value = {this.state.country}
+					onValueChange = {_onValueChange}
+					renderNoResultsFound = {_renderNoResultsFound}
+				/>
+
+				{ !!self.state.country ? (
+						<div style = {{margin: 8}}>
+							<span>you selected: </span>
+							<span style = {{fontWeight: "bold"}}>{self.state.country.label}</span>
+						</div>
+					) : null }
+			</div>
+		)
+	}
+})
+
+module.exports = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Search);

spikes/fuzzy-search/react-selectize/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/react-selectize/static/.gitignore

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

spikes/fuzzy-search/react-selectize/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/react-selectize/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/react-selectize/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
+});