1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

Add redux-form spike: one page form, multi page form, validation, errors

This commit is contained in:
JUDIT GRESKOVITS 2017-01-05 18:07:29 +00:00
parent 94ae410220
commit 8160896e50
31 changed files with 10218 additions and 0 deletions

View File

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

View File

@ -0,0 +1,3 @@
/node_modules
coverage
.nyc_output

View File

@ -0,0 +1,29 @@
{
"extends": "semistandard",
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 7,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"babel",
"react"
],
"rules": {
"generator-star-spacing": 0,
"babel/generator-star-spacing": 1,
"space-before-function-paren": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2,
"object-curly-newline": ["error", {
"minProperties": 1
}],
"sort-vars": ["error", {
"ignoreCase": true
}]
}
}

4
spikes/form/redux-form/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
/node_modules
coverage
.nyc_output
npm-debug.log

View File

@ -0,0 +1,50 @@
const React = require('react');
const Styled = require('styled-components');
const ReactRouter = require('react-router');
const {
default: styled
} = Styled;
const {
Link
} = ReactRouter;
const Centered = styled.div`
width: 300px;
margin: 20px auto;
text-align: center;
`;
const PrettyLink = styled(Link)`
text-transform: uppercase;
padding: 0 10px;
text-decoration: none;
`;
const App = React.createClass({
render: function() {
const {
children
} = this.props;
return (
<div>
<Centered>
<PrettyLink to="form" activeStyle={{ fontWeight: "bold" }}>Form</PrettyLink>
<PrettyLink to="form-one" activeStyle={{ fontWeight: "bold" }}>Multi page form</PrettyLink>
</Centered>
<div>
{ children }
</div>
</div>
);
}
});
const Home = ({}) => <Centered><p>Select a form!</p></Centered>;
module.exports = {
App,
Home
};

View File

@ -0,0 +1,41 @@
const React = require('react');
const ReactRouter = require('react-router');
const ReduxForm = require('redux-form');
const Styled = require('styled-components');
const Input = require('./input');
const InputRfProps = require('./inputRfProps');
const validate = require('./validate');
const Form = require('./shared').form;
const {
browserHistory
} = ReactRouter;
const {
Field,
reduxForm
} = ReduxForm;
const {
default: styled
} = Styled;
const FormOne = (props) => {
const { handleSubmit } = props;
return (
<Form onSubmit={handleSubmit(() => {browserHistory.push('/form-two')})}>
<Field name="firstName" type="text" component={InputRfProps} label="First Name"/>
<Field name="lastName" type="text" component={InputRfProps} label="Last Name"/>
<div>
<button type="submit" className="next">Next</button>
</div>
</Form>
)
}
module.exports = reduxForm({
form: 'multiform',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
validate
})(FormOne)

View File

@ -0,0 +1,69 @@
const React = require('react');
const ReactRouter = require('react-router');
const ReduxForm = require('redux-form');
const Styled = require('styled-components');
const Input = require('./input');
const InputRfProps = require('./inputRfProps');
const validate = require('./validate');
const Form = require('./shared').form;
const {
browserHistory
} = ReactRouter;
const {
Field,
reduxForm
} = ReduxForm;
const {
default: styled
} = Styled;
const FormThree = (props) => {
const { handleSubmit, pristine, submitting } = props
return (
<Form onSubmit={
e => {
e.preventDefault();
browserHistory.push('/form');
}}>
<div>
<label>Favorite Color</label>
<Field name="favoriteColor" component="select">
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component="input" type="checkbox"/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component="textarea" placeholder="Notes"/>
</div>
</div>
<div>
<button type="button" className="previous" onClick={
e => {
e.preventDefault();
browserHistory.push('/form-two');
}}>Previous</button>
<button type="submit" disabled={pristine || submitting}>Submit</button>
</div>
</Form>
)
}
module.exports = reduxForm({
form: 'multiform',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
validate
})(FormThree)

View File

@ -0,0 +1,56 @@
const React = require('react');
const ReactRouter = require('react-router');
const ReduxForm = require('redux-form');
const Styled = require('styled-components');
const Input = require('./input');
const InputRfProps = require('./inputRfProps');
const validate = require('./validate');
const Form = require('./shared').form;
const {
browserHistory
} = ReactRouter;
const {
Field,
reduxForm
} = ReduxForm;
const {
default: styled
} = Styled;
const FormTwo = (props) => {
const { handleSubmit } = props
return (
<Form onSubmit={handleSubmit(() => {browserHistory.push('/form-three')})}>
<Field name="email" type="email" component={InputRfProps} label="Email"/>
<div>
<label>Sex</label>
<Field name="sex" component={
({ meta: { touched, error } }) => touched && error ?
<span> {error}</span> : false
}/>
<div>
<label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
<label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
</div>
</div>
<div>
<button type="button" className="previous" onClick={
e => {
e.preventDefault();
browserHistory.push('/form-one');
}}>Previous</button>
<button type="submit" className="next">Next</button>
</div>
</Form>
)
}
module.exports = reduxForm({
form: 'multiform',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
validate
})(FormTwo)

View File

@ -0,0 +1,125 @@
const React = require('react');
const ReduxForm = require('redux-form');
const Styled = require('styled-components');
const Input = require('./input');
const InputRfProps = require('./inputRfProps');
const validate = require('./validate');
const Form = require('./shared').form;
const {
Field,
reduxForm
} = ReduxForm;
const {
default: styled
} = Styled;
const InputField = styled.input`
margin-bottom: 15px;
background: #FFFFFF;
display: block;
font-size: 16px;
height: 50px;
padding-left: 15px;
padding-right: 15px;
visibility: visible;
width: 100%;
border: 1px solid #3B46CC;
border-radius: 4px;
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
&:focus {
border-color: 1px solid #3B46CC;
outline: none;
}
`;
// styled html input element - props.input -> props
const SimpleInput = (props) => {
return (
<InputField
type="text"
{...props.input}
placeholder={props.placeholder} />
);
}
const onSubmit = values => {
}
const TestForm = React.createClass({
render: function() {
const {
handleSubmit,
pristine,
reset,
submitting
} = this.props;
return (
<Form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>First Name</label>
<div>
{ /* styled html input */ }
<Field name="firstName" component={SimpleInput} type="text" placeholder="First Name"/>
</div>
</div>
<div>
{ /* Input component from @ui - props.input -> props, props.meta -> props, props -> props */ }
<Field name="lastName" component={
props => <Input {...props.input} {...props.meta} {...props} />
} type="text" placeholder="Last Name" label="Last Name"/>
</div>
<div>
<Field name="email" component={InputRfProps} type="email" placeholder="Email" label="Email"/>
</div>
<div>
{ /* Input component from @ui - modified to expect props.input */ }
<Field name="catName" component={InputRfProps} placeholder="My cat's name" label="Cat's name"/>
</div>
<div>
<label>Sex</label>
<div>
<label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
<label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component="select">
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component="input" type="checkbox"/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component="textarea"/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</Form>
);
}
});
module.exports = reduxForm({
form: 'test-form',
// validate,
destroyOnUnmount: false
})(TestForm);

View File

@ -0,0 +1,124 @@
const React = require('react');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const Label = styled.label`
color: #464646;
`;
const InputField = styled.input`
margin-bottom: 15px;
background: #FFFFFF;
display: block;
font-size: 16px;
height: 50px;
padding-left: 15px;
padding-right: 15px;
visibility: visible;
width: 100%;
border: 1px solid #3B46CC;
border-radius: 4px;
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
&:focus {
border-color: 1px solid #3B46CC;
outline: none;
}
`;
const Input = ({
autoComplete,
autoFocus,
children,
className,
disabled = false,
form,
id,
inputMode,
label,
labelledby,
list,
name,
onChange,
onFocus,
onBlur,
pattern,
placeholder,
readOnly,
required,
selectionDirection,
spellCheck,
style,
tabIndex,
type,
value
}) => {
const _label = label || children;
const _children = label && children ? children : null;
return (
<div>
<Label htmlFor={id}>
{_label}
</Label>
<InputField
aria-labelledby={labelledby}
autoComplete={autoComplete}
autoFocus={autoFocus}
disabled={disabled}
form={form}
id={id}
inputMode={inputMode}
list={list}
name={name}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
pattern={pattern}
placeholder={placeholder}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
spellCheck={spellCheck}
tabIndex={tabIndex}
type={type}
value={value}
/>
{_children}
</div>
);
};
Input.propTypes = {
autoComplete: React.PropTypes.string,
autoFocus: React.PropTypes.bool,
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
form: React.PropTypes.string,
id: React.PropTypes.string,
inputMode: React.PropTypes.string,
label: React.PropTypes.string,
labelledby: React.PropTypes.string,
list: React.PropTypes.string,
name: React.PropTypes.string,
onChange: React.PropTypes.func,
onFocus: React.PropTypes.func,
onBlur: React.PropTypes.func,
pattern: React.PropTypes.string,
placeholder: React.PropTypes.string,
readOnly: React.PropTypes.bool,
required: React.PropTypes.bool,
selectionDirection: React.PropTypes.string,
spellCheck: React.PropTypes.bool,
style: React.PropTypes.object,
tabIndex: React.PropTypes.string,
type: React.PropTypes.string,
value: React.PropTypes.string
};
module.exports = Input;

View File

@ -0,0 +1,126 @@
const React = require('react');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const Label = styled.label`
color: #464646;
`;
const Error = styled.label`
color: red;
float: right;
`;
const InputField = styled.input`
margin-bottom: 15px;
background: #FFFFFF;
display: block;
font-size: 16px;
height: 50px;
padding-left: 15px;
padding-right: 15px;
visibility: visible;
width: 100%;
border: 1px solid #3B46CC;
border-radius: 4px;
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
&:focus {
border-color: 1px solid #3B46CC;
outline: none;
}
`;
const InputRfProps = ({
autoComplete,
autoFocus,
children,
className,
disabled = false,
form,
id,
inputMode,
label,
labelledby,
list,
pattern,
placeholder,
readOnly,
required,
selectionDirection,
spellCheck,
style,
tabIndex,
type,
input,
meta
}) => {
const _label = label || children;
const _children = label && children ? children : null;
const { onChange, onBlur, onDragStart, onDrop, onFocus, name, value } = input;
const { error, valid, touched } = meta;
return (
<div>
<Label htmlFor={id}>
{_label}
</Label>
{ touched && !valid && error && <Error>{error}</Error>}
<InputField
aria-labelledby={labelledby}
autoComplete={autoComplete}
autoFocus={autoFocus}
disabled={disabled}
form={form}
id={id}
inputMode={inputMode}
list={list}
name={name}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
pattern={pattern}
placeholder={placeholder}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
spellCheck={spellCheck}
tabIndex={tabIndex}
type={type}
value={value}
/>
{_children}
</div>
);
};
InputRfProps.propTypes = {
autoComplete: React.PropTypes.string,
autoFocus: React.PropTypes.bool,
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
form: React.PropTypes.string,
id: React.PropTypes.string,
inputMode: React.PropTypes.string,
label: React.PropTypes.string,
labelledby: React.PropTypes.string,
list: React.PropTypes.string,
pattern: React.PropTypes.string,
placeholder: React.PropTypes.string,
readOnly: React.PropTypes.bool,
required: React.PropTypes.bool,
selectionDirection: React.PropTypes.string,
spellCheck: React.PropTypes.bool,
style: React.PropTypes.object,
tabIndex: React.PropTypes.string,
type: React.PropTypes.string,
input: React.PropTypes.object,
meta: React.PropTypes.object,
};
module.exports = InputRfProps;

View File

@ -0,0 +1,124 @@
const React = require('react');
const ReduxForm = require('redux-form');
const Styled = require('styled-components');
const Input = require('./input');
const InputRfProps = require('./inputRfProps');
const {
Field,
reduxForm
} = ReduxForm;
const {
default: styled
} = Styled;
const Form = styled.form`
margin: 30px auto;
width: 300px;
`;
const InputField = styled.input`
margin-bottom: 15px;
background: #FFFFFF;
display: block;
font-size: 16px;
height: 50px;
padding-left: 15px;
padding-right: 15px;
visibility: visible;
width: 100%;
border: 1px solid #3B46CC;
border-radius: 4px;
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
&:focus {
border-color: 1px solid #3B46CC;
outline: none;
}
`;
// styled html input element - props.input -> props
const SimpleInput = (props) => {
return (
<InputField
type="text"
{...props.input}
placeholder={props.placeholder} />
);
}
const TestMultiform = React.createClass({
render: function() {
const {
handleSubmit,
pristine,
reset,
submitting
} = this.props;
return (
<Form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
{ /* styled html input */ }
<Field name="firstName" component={SimpleInput} type="text" placeholder="First Name"/>
</div>
</div>
<div>
{ /* Input component from @ui - props.input -> props, props.meta -> props, props -> props */ }
<Field name="lastName" component={
props => <Input {...props.input} {...props.meta} {...props} />
} type="text" placeholder="Last Name" label="Last Name"/>
</div>
<div>
<Field name="email" component={InputRfProps} type="email" placeholder="Email" label="Email"/>
</div>
<div>
{ /* Input component from @ui - modified to expect props.input */ }
<Field name="catName" component={InputRfProps} placeholder="My cat's name" label="Cat's name"/>
</div>
<div>
<label>Sex</label>
<div>
<label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
<label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component="select">
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component="input" type="checkbox"/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component="textarea"/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</Form>
);
}
});
module.exports = reduxForm({
form: 'test-multiform'
})(TestMultiform);

View File

@ -0,0 +1,14 @@
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const Form = styled.form`
margin: 30px auto;
width: 300px;
`;
module.exports = {
form: Form
};

View File

@ -0,0 +1,18 @@
const SubmissionError = require('redux-form').SubmissionError;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
function submit(values) {
return sleep(1000) // simulate server latency
.then(() => {
if (![ 'john', 'paul', 'george', 'ringo' ].includes(values.username)) {
throw new SubmissionError({ username: 'User does not exist', _error: 'Login failed!' })
} else if (values.password !== 'redux-form') {
throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' })
} else {
window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
}
})
}
module.exports = submit;

View File

@ -0,0 +1,27 @@
const validator = require('validator');
const validate = values => {
console.log('validate values = ', values);
const errors = {};
if (!values.firstName) {
errors.firstName = 'Required';
}
if (!values.lastName) {
errors.lastName = 'Required';
}
if (!values.email) {
errors.email = 'Required';
} else if (!validator.isEmail(values.email)) {
errors.email = 'Invalid email address';
}
if (!values.sex) {
errors.sex = 'Required';
}
if (!values.favoriteColor) {
errors.favoriteColor = 'Required';
}
console.log('errors = ', errors);
return errors;
}
module.exports = validate;

View File

@ -0,0 +1,46 @@
const ReactDOM = require('react-dom');
const React = require('react');
const store = require('./store')();
const nes = require('nes/dist/client');
const {
Client
} = nes;
const client = new Client(`ws://${document.location.host}`);
client.connect((err) => {
if (err) {
throw err;
}
console.log('connected');
client.subscribe('/stats/5', (update, flag) => {
store.dispatch({
type: 'UPDATE_STATS',
payload: update
})
}, (err) => {
if (err) {
throw err;
}
console.log('subscribed');
});
});
const render = () => {
const Root = require('./root');
ReactDOM.render(
<Root store={store} />,
document.getElementById('root')
);
};
render();
if (module.hot) {
module.hot.accept('./root', render);
}

View File

@ -0,0 +1,50 @@
const React = require('react');
const ReactHotLoader = require('react-hot-loader');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router');
const AppHome = require('./app');
const Form = require('./form/form');
const Multiform = require('./form/multiform');
const FormOne = require('./form/form-one');
const FormTwo = require('./form/form-two');
const FormThree = require('./form/form-three');
const {
AppContainer
} = ReactHotLoader;
const {
Provider
} = ReactRedux;
const {
Router,
Route,
IndexRoute,
browserHistory
} = ReactRouter;
const {
App,
Home
} = AppHome;
module.exports = ({
store
}) => {
return (
<AppContainer>
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="form" component={Form} />
<Route path="form-one" component={FormOne} />
<Route path="form-two" component={FormTwo} />
<Route path="form-three" component={FormThree} />
</Route>
</Router>
</Provider>
</AppContainer>
);
};

View File

@ -0,0 +1,29 @@
const takeRight = require('lodash.takeright');
const redux = require('redux');
const reduxFormReducer = require('redux-form').reducer;
const {
createStore,
compose,
combineReducers,
applyMiddleware
} = redux;
/*const reducer = (state, action) => {
if (action.type !== 'UPDATE_STATS') {
return state;
}
const data = (state.data || []).concat([action.payload]);
return {
...state,
data: takeRight(data, 50)
};
};*/
const reducer = combineReducers({ form: reduxFormReducer });
module.exports = (state = Object.freeze({})) => {
return createStore(reducer, state, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
};

View File

@ -0,0 +1,60 @@
{
"name": "chartjs-graphing-spike",
"private": true,
"license": "private",
"main": "server/index.js",
"dependencies": {
"autoprefixer": "^6.5.1",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-runtime": "^6.11.6",
"build-array": "^1.0.0",
"component-emitter": "^1.2.1",
"css-loader": "^0.25.0",
"hapi": "^15.2.0",
"hapi-webpack-dev-plugin": "^1.1.4",
"inert": "^4.0.2",
"lodash.takeright": "^4.1.1",
"nes": "^6.3.1",
"postcss-loader": "^1.0.0",
"postcss-modules-values": "^1.2.2",
"postcss-nested": "^1.0.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-hot-loader": "^3.0.0-beta.6",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-form": "^6.4.3",
"require-dir": "^0.3.1",
"style-loader": "^0.13.1",
"styled-components": "^1.2.1",
"validator": "^6.2.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"babel-register": "^6.16.3",
"eslint": "^3.8.1",
"eslint-config-semistandard": "^7.0.0",
"eslint-config-standard": "^6.2.0",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-promise": "^3.3.0",
"eslint-plugin-react": "^6.4.1",
"eslint-plugin-standard": "^2.0.1",
"json-loader": "^0.5.4"
},
"ava": {
"require": [
"babel-register"
],
"babel": "inherit"
}
}

View File

@ -0,0 +1,11 @@
# redux-form
## summary
- [x] form values in redux store
- [x] clear / retain values in store
- [x] pre-populate form
- [x] validation field / form level
- [x] multi page form
- [x] custom form fields
- [?] requires updates to existing ui components

View File

@ -0,0 +1,29 @@
const requireDir = require('require-dir');
const plugins = require('./plugins');
const routes = requireDir('./routes');
const Hapi = require('hapi');
const path = require('path');
const fs = require('fs');
const server = new Hapi.Server();
server.connection({
host: 'localhost',
port: 8000
});
server.register(plugins, (err) => {
if (err) {
throw err;
}
Object.keys(routes).forEach((name) => {
routes[name](server);
});
server.start((err) => {
server.connections.forEach((conn) => {
console.log(`started at: ${conn.info.uri}`);
});
});
});

View File

@ -0,0 +1,34 @@
const Emitter = require('component-emitter');
const cdm = {};
module.exports = (server) => ({
on: (id) => {
console.log('on', cdm[id]);
if (cdm[id] && (cdm[id].sockets > 0)) {
cdm[id].sockets +=1;
return;
}
let messageId = 0;
const interval = setInterval(() => {
console.log(`publishing /stats/${id}`);
server.publish(`/stats/${id}`, {
when: new Date().getTime(),
cpu: Math.random() * 100
});
}, 45);
cdm[id] = {
interval,
sockets: 1
};
},
off: (id) => {
if (!(cdm[id].sockets -= 1)) {
clearInterval(cdm[id].interval);
}
}
});

View File

@ -0,0 +1,15 @@
const webpack = require('webpack');
const path = require('path');
const cfg = require('../webpack.config.js');
module.exports = [
require('inert'),
require('nes'), {
register: require('hapi-webpack-dev-plugin'),
options: {
compiler: webpack(cfg),
devIndex: path.join(__dirname, '../static')
}
}
];

View File

@ -0,0 +1,11 @@
const path = require('path');
module.exports = (server) => {
server.route({
method: 'GET',
path: '/',
handler: (request, reply) => {
reply.file(path.join(__dirname, '../../static/index.html'));
}
});
};

View File

@ -0,0 +1,18 @@
const Metric = require('../metric');
module.exports = (server) => {
const metric = Metric(server);
server.subscription('/stats/{id}', {
onSubscribe: (socket, path, params, next) => {
console.log('onSubscribe');
metric.on(params.id);
next();
},
onUnsubscribe: (socket, path, params, next) => {
console.log('onUnsubscribe');
metric.off(params.id);
next();
}
});
};

View File

@ -0,0 +1,15 @@
const path = require('path');
module.exports = (server) => {
// server.route({
// method: 'GET',
// path: '/{param*}',
// handler: {
// directory: {
// path: path.join(__dirname, '../../static'),
// redirectToSlash: true,
// index: true
// }
// }
// });
};

View File

@ -0,0 +1,18 @@
const Pkg = require('../../package.json');
const internals = {
response: {
version: Pkg.version
}
};
module.exports = (server) => {
server.route({
method: 'GET',
path: '/ops/version',
config: {
description: 'Returns the version of the server',
handler: (request, reply) => reply(internals.response)
}
});
};

View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang='en-US'>
<head>
<title>React Boilerplate</title>
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
<link rel="stylesheet" type="text/css" href="https://rawgit.com/epochjs/epoch/master/dist/css/epoch.css" />
</head>
<body>
<div id='root'></div>
<script src='/static/bundle.js'></script>
</body>
</html>

View File

@ -0,0 +1,55 @@
const webpack = require('webpack');
const path = require('path');
const config = {
debug: true,
devtool: 'source-map',
context: path.join(__dirname, './client'),
app: path.join(__dirname, './client/index.js'),
entry: [
'webpack-dev-server/client?http://localhost:8888',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./index.js'
],
output: {
path: path.join(__dirname, './static'),
publicPath: '/static/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /js?$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './client')
],
loaders: ['babel']
}, {
test: /\.json?$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './client')
],
loaders: ['json']
}]
}
};
const devServer = {
hot: true,
compress: true,
lazy: false,
publicPath: config.output.publicPath,
historyApiFallback: {
index: './static/index.html'
}
};
module.exports = Object.assign({
devServer
}, config);

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff