Adding in fake data to infinite scroll list

This commit is contained in:
Alex Windett 2016-11-21 14:10:05 +00:00
parent f6b03fd5f6
commit e3c645061e
4 changed files with 73 additions and 7 deletions

View File

@ -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"
}
}

View File

@ -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;

View File

@ -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}

View File

@ -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('')
})
}]
}
};