export default (callback) => (ComposedComponent) =>
provideHooks({
fetchData(...args) {
return callback(...args);
},
})(
props => <ComposedComponent {...props} />
);
beforeEach(() => {
const MockComponent = () => <div></div>;
const DecoratedMockComponent = provideHooks({
fetch: fetchSpy,
defer: deferSpy,
done: doneSpy,
})(() => <div></div>);
const routes = (
<Route path="/" component={MockComponent} myprop={'top'}>
<IndexRoute component={DecoratedMockComponent} myprop={'index'} />
<Route path="user" component={DecoratedMockComponent} myprop={'user'} otherprop={200} />
</Route>
);
match({ routes, location: '/' }, (error, redirectLocation, reactRouterRenderProps) => {
renderProps = reactRouterRenderProps;
});
});
test('createClientApp() calls redial functions on initial load', (t) => {
t.plan(1)
const hooks = {
fetch: sinon.spy(() => Promise.resolve())
}
const App = provideHooks(hooks)(
() => React.createElement('div')
)
const routes = {
path: '/__testling',
component: App
}
createClientApp({ routes })
t.ok(hooks.fetch.called, 'fetch called')
})
test('createClientApp() calls redial functions on history change', (t) => {
t.plan(1)
const Root = ({ children }) => (
React.createElement('div', {},
React.createElement(Link, { to: '/__testling/foo', id: 'foo-link' }, 'Go for it'),
children
)
)
const hooks = {
fetch: sinon.spy(() => Promise.resolve())
}
const Foo = provideHooks(hooks)(
() => React.createElement('div')
)
const routes = {
path: '/__testling',
component: Root,
indexRoute: {
component: () => React.createElement('div')
},
childRoutes: [
{
path: 'foo',
component: Foo
}
]
}
const App = createClientApp({ routes })
mount(App, (elem) => {
const link = elem.querySelector('#foo-link')
link.click()
t.ok(hooks.fetch.called, 'fetch called')
global.history.replaceState({}, '', '/__testling')
})
})
test('createClientApp() calls redial functions with { state, dispatch, query, params }', (t) => {
t.plan(2)
const hooks = {
fetch: sinon.spy(() => Promise.resolve())
}
const App = provideHooks(hooks)(
() => React.createElement('div')
)
const routes = {
path: '/__testling',
component: App
}
const store = createStore(() => ({ foo: 'Foo' }))
createClientApp({ routes, store })
const arg = hooks.fetch.getCall(0).args[0]
t.is(store.dispatch, arg.dispatch)
t.is('Foo', arg.state.foo)
})
const {Button} = WeUI;
const redial = {
fetch: ({ dispatch }) => dispatch(loadPosts()),
};
const mapStateToProps = (state) => ({
posts: state.posts.data,
});
const PostListPage = ({ posts }) =>
<div>
<h2 className={css(styles.title)}>PostListPage</h2>
<WeUI.Button>hello wechat</WeUI.Button>
{posts.map((post, i) => <PostListItem key={post.id} post={post} />)}
</div>;
PostListPage.PropTypes = {
posts: PropTypes.array.isRequired,
};
const styles = StyleSheet.create({
title: {
fontSize: '24px',
fontWeight: 'bold',
lineHeight: '1.5',
margin: '1rem 0',
},
});
export default provideHooks(redial)(connect(mapStateToProps)(PostListPage));
fetch: ({ dispatch, params: { } }) => {
return Promise.all([
dispatch(PagesAPI.getPageData()),
]);
},
};
class AppWrapper extends Component {
static contextTypes = {
router: React.PropTypes.object.isRequired,
};
constructor(props) {
super(props);
}
render() {
console.log(this.props);
return (
<div className="app__container">
<Helmet {...config.app.head} />
<div className="content">
{ this.props.children }
</div>
</div>
);
}
}
export default provideHooks(hooks)(connect(state => state)(AppWrapper));
overflow: 'hidden',
transition: 'height .5s ease'
},
header: {
backgroundColor: '#ACACAC',
display: 'flex',
height: 50,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
body: {
width: '100%',
flex: 1,
display: 'flex',
flexDirection: 'column'
// overflow: 'hidden',
// overflowY: 'auto'
},
scroll: {
flex: 1,
overflow: 'hidden',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}
});
export default provideHooks(redial)(connect(mapStateToProps)(BlogPage));
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { provideHooks } from 'redial';
import { startCounter } from './actions';
const redial = {
defer: ({ dispatch }) => dispatch(startCounter())
}
class CounterPage extends Component {
render() {
return (
<h1>{this.props.count}</h1>
)
}
}
const mapStateToProps = state => ({
count: state.counter.count
})
export default provideHooks(redial)(connect(mapStateToProps)(CounterPage))
>
<Helmet
title={'www.stepupfordownsyndrome.org.au'}
/>
<HomeWidgets
raisedIcon={raisedIcon}
supporterIcon={supporterIcon}
/>
<Intro
introTitle={introTitle}
intro={intro}
/>
<StateSelect
stateSelectBG={stateSelectBG}
/>
<Leaderboards />
<About
involvementTitle={involvementTitle}
involvement={involvement}
carousel={carousel}
aboutTitle={aboutTitle}
about={about}
/>
</div>
)
export default compose(
connect(mapState),
provideHooks(hooks)
)(Home)
}
renderArticleWrap(props) {
return (
<div>
<TabsExampleSimple />
{
props.map((item, key) =>
<ArticleListItem key={key}
data={item}
onClick={this.dispatchArticle.bind(this, item)} />
)}
</div>
)
}
render() {
const { articles, isLoading, error } = this.props
return (
<Scroll infinite={this.getMoreData} isLoading={isLoading} error={error}>
{this.renderArticleWrap(articles)}
</Scroll>
)
}
}
Home.propTypes = {
articles: PropTypes.array.isRequired
}
export default provideHooks(redial)(connect(mapStateToProps)(Home))
import { updateUser, requestUser } from 'redux/modules/users'
import { createUser } from 'redux/modules/users'
import { formSchemaValidationFor } from 'utils/validation'
const reduxFormConfig = {
form: 'user',
fields: Object.keys(UserEdit.schema),
validate: formSchemaValidationFor(UserEdit.schema)
};
function mapStateToProps(state) {
return {
initialValues: state.users.user, username: state.users.user.username
};
}
function mapDispatchToProps(dispatch) {
return {
onCancelClick: () => dispatch(goBack()),
onSubmit: (data) => {
return (dispatch(updateUser(data))).done(()=> (dispatch(goBack())))
}
}
}
const UserEditFormWithData = provideHooks({
fetch: ({ dispatch, params }) => {dispatch(requestUser(params.userId))}
})(class UserEditForm extends UserEdit {})
module.exports = reduxForm(reduxFormConfig, mapStateToProps, mapDispatchToProps)(SmallLayout(UserEditFormWithData));