Vulcan/packages/nova-base-components/lib/posts/PostsList.jsx

82 lines
2.5 KiB
React
Raw Normal View History

2016-08-08 11:18:21 +09:00
import Telescope from 'meteor/nova:lib';
2016-04-14 10:12:35 +09:00
import React from 'react';
import { withList } from 'meteor/nova:core';
import Posts from 'meteor/nova:posts';
2016-04-14 10:12:35 +09:00
const PostsList = (props) => {
2016-04-14 10:12:35 +09:00
2016-11-23 11:07:48 +09:00
const {results, terms, loading, count, totalCount, loadMore, showHeader = true} = props;
if (results && results.length) {
const hasMore = totalCount > results.length;
2016-04-14 10:12:35 +09:00
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} />)}
2016-04-14 10:12:35 +09:00
</div>
{hasMore ? (loading ? <Telescope.components.PostsLoading/> : <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} />) : <Telescope.components.PostsNoMore/>}
2016-04-14 10:12:35 +09:00
</div>
)
} else if (loading) {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
<Telescope.components.PostsLoading/>
</div>
</div>
)
2016-04-14 10:12:35 +09:00
} else {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
<Telescope.components.PostsNoResults/>
2016-04-14 10:12:35 +09:00
</div>
</div>
)
}
};
PostsList.displayName = "PostsList";
PostsList.propTypes = {
results: React.PropTypes.array,
terms: React.PropTypes.object,
hasMore: React.PropTypes.bool,
loading: React.PropTypes.bool,
count: React.PropTypes.number,
totalCount: React.PropTypes.number,
loadMore: React.PropTypes.func,
showHeader: React.PropTypes.bool,
};
// const postsListOptions = {
// queryName: 'getPostsList',
// collection: Posts,
// listResolverName: 'postsList',
// totalResolverName: 'postsListTotal',
// fragment: Posts.fragments.list,
// fragmentName: 'fullPostInfo',
// ownPropsVariables: [
// // test note: can't overwrite atm
// // {propName: 'limit', graphqlType: 'Int', defaultValue: 2, usedForTotal: false},
// // note:give the list hoc the ability to catch props coming from upper in the component tree
// {propName: 'terms', graphqlType: 'Terms', usedForTotal: true},
// ],
// };
2016-11-23 11:07:48 +09:00
const options = {
collection: Posts,
queryName: 'postsListQuery',
2016-11-26 11:17:01 +09:00
fragmentName: Telescope.components.PostsItem.fragmentName,
fragment: Telescope.components.PostsItem.fragment,
};
2016-11-23 11:07:48 +09:00
Telescope.registerComponent('PostsList', PostsList, withList(options));