Adding in fake data to infinite scroll list

spikes/list/react-infinite/package.json

@@ -28,7 +28,14 @@
     "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",
     "webpack": "^2.1.0-beta.27",
-    "webpack-dev-server": "^1.16.2"
+    "webpack-dev-server": "^1.16.2",
+    "css-loader": "^0.25.0",
+    "postcss-nested": "^1.0.0",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "style-loader": "^0.13.1"
   }
 }

spikes/list/react-infinite/src/actions.js

@@ -1,5 +1,6 @@
 const buildArray = require('build-array');
 const delay = require('delay');
+const faker = require('faker');
 
 const actions =  {
   'FETCH_FULFILLED': (state, action) => {
@@ -53,7 +54,10 @@ const fetch = () => (dispatch, getState) => {
 
         return {
           id,
-          title: `test ${id}`
+          title: `test ${id}`,
+          description: faker.lorem.sentence(),
+          image: faker.image.imageUrl(),
+          date: faker.date.recent()
         };
       });
     })
@@ -85,4 +89,3 @@ module.exports = (state, action) => {
 
 module.exports.fetch = fetch;
 module.exports.filter = filter;
-

spikes/list/react-infinite/src/list.js

@@ -28,6 +28,27 @@ const mapDispatchToProps = (dispatch, ownProps) => {
   }
 };
 
+const styles = {
+  item: {
+    borderRadius: '4px',
+    backgroundColor: '#ffffff',
+    boxShadow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
+    border: 'solid 1px #d8d8d8',
+    marginBottom: '20px',
+    padding: '20px',
+    clear: 'both'
+  },
+  itemImage: {
+    width: '25%',
+    float: 'left',
+    width: '150px',
+    height: '150px'
+  },
+  itemText: {
+    float: 'right',
+    paddingLeft: '20px'
+  }
+}
 const List = ({
   items = [],
   filtered,
@@ -37,9 +58,18 @@ const List = ({
   filter
 }) => {
   const _items = (filtered || items).map((item) => {
+    const fill = Math.random() > 0.5 ? 'red' : 'green';
+    const status = Math.random() > 0.5 ? 'Unhealthy' : 'Healthy';
+
     return (
-      <div key={item.id}>
-        {item.title}
+      <div style={styles.item} key={item.id}>
+        <img style={styles.itemImage} src={item.image} alt={item.title} />
+        <h3 style={styles.itemText}>{item.title}</h3>
+        <h4 style={styles.itemText}>{status}</h4>
+        <p style={styles.itemText}>{item.description}</p>
+        <svg>
+          <circle cx={50} cy={50} r={10} fill={fill} />
+        </svg>
       </div>
     );
   });
@@ -57,7 +87,7 @@ const List = ({
     <div>
       <input onChange={onChange} />
       <Infinite
-        containerHeight={200}
+        containerHeight={400}
         elementHeight={20}
         infiniteLoadBeginEdgeOffset={200}
         onInfiniteLoad={fetch}

spikes/list/react-infinite/webpack/base.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const plugins = {
   'no-errors-plugin': new webpack.NoErrorsPlugin(),
@@ -13,7 +14,16 @@ exports.config = {
     filename: '[name].js'
   },
   plugins: [
-    new webpack.NoErrorsPlugin()
+    new webpack.NoErrorsPlugin(),
+    new ExtractTextPlugin({
+     filename: 'css/[name].css',
+     allChunks: true
+   }),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        postcss: {}
+      }
+    })
   ],
   module: {
     loaders: [{
@@ -23,6 +33,22 @@ exports.config = {
         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('')
+      })
     }]
   }
 };