continue HoC refactoring, get rid of function syntax in withXYZ() after all

This commit is contained in:
Sacha Greif 2016-11-11 18:19:18 +09:00
parent 0ed0f24303
commit d31fc6b70a
17 changed files with 128 additions and 105 deletions

View file

@ -1,12 +1,12 @@
// import Telescope from 'meteor/nova:lib';
// import React, { PropTypes, Component } from 'react';
// import Posts from "meteor/nova:posts";
import Telescope from 'meteor/nova:lib';
import React, { PropTypes, Component } from 'react';
import Posts from "meteor/nova:posts";
// const PostsHome = (props, context) => {
// const terms = props.location && props.location.query;
// return <Telescope.components.PostsList terms={terms}/>
// };
const PostsHome = (props, context) => {
const terms = props.location && props.location.query;
return <Telescope.components.PostsList terms={terms}/>
};
// PostsHome.displayName = "PostsHome";
PostsHome.displayName = "PostsHome";
// module.exports = PostsHome;
module.exports = PostsHome;

View file

@ -4,16 +4,19 @@ import { withPostsList } from 'meteor/nova:base-containers';
const PostsList = (props) => {
const {results, terms, hasMore, loading, count, totalCount, loadMore, showHeader = true} = props
const {results, terms, loading, count, totalCount, loadMore, showHeader = true} = props
if (results && results.length) {
const hasMore = totalCount > results.length;
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader/> : null}
<div className="posts-list-content">
{results.map(post => <Telescope.components.PostsItem post={post} key={post._id} />)}
</div>
{hasMore ? (ready ? <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <Telescope.components.PostsLoading/>) : <Telescope.components.PostsNoMore/>}
{hasMore ? (loading ? <Telescope.components.PostsLoading/> : <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} />) : <Telescope.components.PostsNoMore/>}
</div>
)
} else if (loading) {
@ -51,6 +54,4 @@ PostsList.propTypes = {
showHeader: React.PropTypes.bool,
};
const getTermsFromRouter = props => ({terms: props.location && props.location.query});
module.exports = withPostsList(getTermsFromRouter)(PostsList);
module.exports = withPostsList()(PostsList);

View file

@ -37,7 +37,5 @@ PostsPage.propTypes = {
document: React.PropTypes.object
}
const getPostIdFromRouter = props => ({ postId: props.params._id });
module.exports = withPostsSingle(getPostIdFromRouter)(PostsPage);
export default withPostsSingle(getPostIdFromRouter)(PostsPage);
module.exports = withPostsSingle()(PostsPage);
export default withPostsSingle()(PostsPage);

View file

@ -1,11 +1,11 @@
// import Telescope from 'meteor/nova:lib';
// import React from 'react';
// import Posts from "meteor/nova:posts";
import Telescope from 'meteor/nova:lib';
import React from 'react';
import Posts from "meteor/nova:posts";
// const PostsSingle = (props, context) => {
// return <Telescope.components.PostsPage postId={props.params._id} />
// };
const PostsSingle = (props, context) => {
return <Telescope.components.PostsPage postId={props.params._id} />
};
// PostsSingle.displayName = "PostsSingle";
PostsSingle.displayName = "PostsSingle";
// module.exports = PostsSingle;
module.exports = PostsSingle;

View file

@ -4,14 +4,7 @@ import Users from 'meteor/nova:users';
const UsersAccount = (props, context) => {
const terms = props.params.slug ? {slug: props.params.slug} : context.currentUser ? {userId: context.currentUser._id } : {};
return (
<Telescope.components.CanDo action="users.edit.own" displayNoPermissionMessage={true}>
<Telescope.components.UsersSingleContainer
component={Telescope.components.UsersEditForm}
{...terms}
/>
</Telescope.components.CanDo>
)
return <Telescope.components.UsersEditForm {...terms} />
};
UsersAccount.contextTypes = {

View file

@ -4,34 +4,41 @@ import { FormattedMessage, intlShape } from 'react-intl';
import { Row, Col } from 'react-bootstrap';
import NovaForm from "meteor/nova:forms";
import Users from 'meteor/nova:users';
import { withUsersSingle } from 'meteor/nova:base-containers';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
const UsersEditForm = (props, context) => {
const user = props.document;
return (
<Telescope.components.CanDo
action="users.edit"
document={user}
displayNoPermissionMessage={true}
>
<div className="page users-edit-form">
<h2 className="page-title users-edit-form-title"><FormattedMessage id="users.edit_account"/></h2>
<NovaForm
collection={Users}
document={user}
mutationName="usersEdit"
resultQuery={Users.graphQLQueries.single}
successCallback={(user)=>{
props.flash(context.intl.formatMessage({id: "users.edit_success"}, {name: Users.getDisplayName(user)}), 'success')
}}
/>
</div>
</Telescope.components.CanDo>
)
if (props.data.loading) {
return <div className="page users-edit-form"><Telescope.components.Loading/></div>
} else {
const user = props.data.user;
return (
<Telescope.components.CanDo
action="users.edit"
document={user}
displayNoPermissionMessage={true}
>
<div className="page users-edit-form">
<h2 className="page-title users-edit-form-title"><FormattedMessage id="users.edit_account"/></h2>
<NovaForm
collection={Users}
document={user}
mutationName="usersEdit"
resultQuery={Users.graphQLQueries.single}
successCallback={(user)=>{
props.flash(context.intl.formatMessage({id: "users.edit_success"}, {name: Users.getDisplayName(user)}), 'success')
}}
/>
</div>
</Telescope.components.CanDo>
)
}
};
@ -49,5 +56,5 @@ UsersEditForm.displayName = "UsersEditForm";
const mapStateToProps = state => ({ messages: state.messages, });
const mapDispatchToProps = dispatch => bindActionCreators(Telescope.actions.messages, dispatch);
module.exports = connect(mapStateToProps, mapDispatchToProps)(UsersEditForm);
export default connect(mapStateToProps, mapDispatchToProps)(UsersEditForm);
module.exports = connect(mapStateToProps, mapDispatchToProps)(withUsersSingle()(UsersEditForm));
export default connect(mapStateToProps, mapDispatchToProps)(withUsersSingle()(UsersEditForm));

View file

@ -4,38 +4,44 @@ import { FormattedMessage } from 'react-intl';
import Posts from "meteor/nova:posts";
import Users from 'meteor/nova:users';
import { Link } from 'react-router';
import { withUsersSingle } from 'meteor/nova:base-containers';
const UsersProfile = (props) => {
console.log(props)
if (props.data.loading) {
return <div className="page users-edit-form"><Telescope.components.Loading/></div>
} else {
const user = props.document;
const twitterName = Users.getTwitterName(user);
const user = props.data.user;
const twitterName = Users.getTwitterName(user);
const terms = {view: "userPosts", userId: user._id};
const {selector, options} = Posts.parameters.get(terms);
const terms = {view: "userPosts", userId: user._id};
return (
<div className="page users-profile">
<Telescope.components.HeadTags url={Users.getProfileUrl(user, true)} title={Users.getDisplayName(user)} description={user.__bio} />
<h2 className="page-title">{Users.getDisplayName(user)}</h2>
<p>{user.__bio}</p>
<ul>
{twitterName ? <li><a href={"http://twitter.com/" + twitterName}>@{twitterName}</a></li> : null }
{user.__website ? <li><a href={user.__website}>{user.__website}</a></li> : null }
<Telescope.components.CanDo document={user} action="users.edit">
<li><Link to={Users.getEditUrl(user)}><FormattedMessage id="users.edit_account"/></Link></li>
</Telescope.components.CanDo>
</ul>
<h3><FormattedMessage id="users.posts"/></h3>
<Telescope.components.PostsListContainer terms={terms} component={Telescope.components.PostsList} />
</div>
)
return (
<div className="page users-profile">
<Telescope.components.HeadTags url={Users.getProfileUrl(user, true)} title={Users.getDisplayName(user)} description={user.__bio} />
<h2 className="page-title">{Users.getDisplayName(user)}</h2>
<p>{user.__bio}</p>
<ul>
{twitterName ? <li><a href={"http://twitter.com/" + twitterName}>@{twitterName}</a></li> : null }
{user.__website ? <li><a href={user.__website}>{user.__website}</a></li> : null }
<Telescope.components.CanDo document={user} action="users.edit">
<li><Link to={Users.getEditUrl(user)}><FormattedMessage id="users.edit_account"/></Link></li>
</Telescope.components.CanDo>
</ul>
<h3><FormattedMessage id="users.posts"/></h3>
<Telescope.components.PostsList terms={terms} />
</div>
)
}
}
UsersProfile.propTypes = {
document: React.PropTypes.object.isRequired,
// document: React.PropTypes.object.isRequired,
}
UsersProfile.displayName = "UsersProfile";
module.exports = UsersProfile;
module.exports = withUsersSingle()(UsersProfile);

View file

@ -3,7 +3,7 @@ import React from 'react';
import Users from 'meteor/nova:users';
const UsersSingle = (props, context) => {
return <Telescope.components.UsersSingleContainer userId={props.params._id} slug={props.params.slug} component={Telescope.components.UsersProfile} />
return <Telescope.components.UsersProfile userId={props.params._id} slug={props.params.slug} />
};
UsersSingle.displayName = "UsersSingle";

View file

@ -3,5 +3,6 @@ import './containers.js';
import withPostsList from './containers/withPostsList.js';
import withPostsSingle from './containers/withPostsSingle.js';
import withCommentsList from './containers/withCommentsList.js';
import withUsersSingle from './containers/withUsersSingle.js';
export {withPostsList, withPostsSingle, withCommentsList}
export {withPostsList, withPostsSingle, withCommentsList, withUsersSingle}

View file

@ -4,7 +4,7 @@ import Posts from "meteor/nova:posts";
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
export default function withCommentsList (getParams) {
export default function withCommentsList () {
return graphql(gql`
query getCommentsView ($postId: String) {
comments (postId: $postId) {
@ -24,12 +24,9 @@ export default function withCommentsList (getParams) {
}
`, {
options(ownProps) {
const finalProps = getParams ? getParams(ownProps) : ownProps
return {
variables: {
postId: finalProps.postId
postId: ownProps.postId
},
// pollInterval: 20000,
};

View file

@ -4,7 +4,7 @@ import Posts from "meteor/nova:posts";
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
export default function withPostsList (getParams) {
export default function withPostsList (params) {
return graphql(gql`
query getPostsView($terms: Terms, $offset: Int, $limit: Int) {
postsViewTotal(terms: $terms)
@ -14,15 +14,9 @@ export default function withPostsList (getParams) {
}
`, {
options(ownProps) {
const finalProps = getParams ? getParams(ownProps) : ownProps
// console.log(ownProps)
// console.log(finalProps)
return {
variables: {
terms: finalProps.terms,
terms: ownProps.terms,
offset: 0,
limit: 10
},

View file

@ -4,7 +4,7 @@ import Posts from "meteor/nova:posts";
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
export default function withPostsSingle (getParams) {
export default function withPostsSingle (params) {
return graphql(gql`
query getPost($postId: String) {
post(_id: $postId) {
@ -13,11 +13,8 @@ export default function withPostsSingle (getParams) {
}
`, {
options(ownProps) {
const finalProps = getParams ? getParams(ownProps) : ownProps;
return {
variables: { postId: finalProps.postId },
variables: { postId: ownProps.postId },
// pollInterval: 20000,
};
},

View file

@ -0,0 +1,27 @@
import Telescope from 'meteor/nova:lib';
import React, { PropTypes, Component } from 'react';
import Posts from "meteor/nova:posts";
import Users from "meteor/nova:users";
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
export default function withUsersSingle (getParams) {
return graphql(gql`
query getUser($userId: String, $slug: String) {
user(_id: $userId, slug: $slug) {
${Users.graphQLQueries.single}
}
}
`, {
options(ownProps) {
const finalProps = getParams ? getParams(ownProps) : ownProps;
return {
variables: { userId: finalProps.userId, slug: finalProps.slug },
// pollInterval: 20000,
};
},
});
}
module.exports = withUsersSingle;

View file

@ -3,5 +3,6 @@ import './containers.js';
import withPostsList from './containers/withPostsList.js';
import withPostsSingle from './containers/withPostsSingle.js';
import withCommentsList from './containers/withCommentsList.js';
import withUsersSingle from './containers/withUsersSingle.js';
export {withPostsList, withPostsSingle, withCommentsList}
export {withPostsList, withPostsSingle, withCommentsList, withUsersSingle}

View file

@ -19,11 +19,11 @@ Meteor.startup(() => {
Routes definition
*/
Telescope.routes.indexRoute = { name: "posts.list", component: Telescope.components.PostsList };
Telescope.routes.indexRoute = { name: "posts.list", component: Telescope.components.PostsHome };
Telescope.routes.add([
{name:"posts.daily", path:"daily", component:Telescope.components.PostsDaily},
{name:"posts.single", path:"posts/:_id(/:slug)", component:Telescope.components.PostsPage},
{name:"posts.single", path:"posts/:_id(/:slug)", component:Telescope.components.PostsSingle},
{name:"users.single", path:"users/:slug", component:Telescope.components.UsersSingle},
{name:"users.account", path:"account", component:Telescope.components.UsersAccount},
{name:"users.edit", path:"users/:slug/edit", component:Telescope.components.UsersAccount},

View file

@ -28,7 +28,8 @@ const resolvers = {
return context.Users.find({}, {limit: 5}).fetch();
},
user(root, args, context) {
return context.Users.findOne({$or: [{_id: args._id}, {'__slug': args.slug}]}, { fields: context.getViewableFields(context.currentUser, context.Users) });
const selector = args._id ? {_id: args._id} : {'__slug': args.slug};
return context.Users.findOne(selector, { fields: context.getViewableFields(context.currentUser, context.Users) });
},
currentUser(root, args, context) {
return context && context.userId ? context.Users.findOne(context.userId) : null;