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

115 lines
2.6 KiB
React
Raw Normal View History

import { Components, getRawComponent, registerComponent } 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';
import gql from 'graphql-tag';
2016-04-14 10:12:35 +09:00
const PostsList = (props) => {
2016-04-14 10:12:35 +09:00
2017-01-09 22:09:09 +09:00
const {results, terms, loading, count, totalCount, loadMore, showHeader = true, networkStatus} = props;
const loadingMore = networkStatus === 2;
if (results && results.length) {
const hasMore = totalCount > results.length;
2016-04-14 10:12:35 +09:00
return (
<div className="posts-list">
{showHeader ? <Components.PostsListHeader/> : null}
<div className="posts-list-content">
{results.map(post => <Components.PostsItem post={post} key={post._id} />)}
2016-04-14 10:12:35 +09:00
</div>
2017-01-09 22:09:09 +09:00
{hasMore ? (loadingMore ? <Components.PostsLoading/> : <Components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} />) : <Components.PostsNoMore/>}
2016-04-14 10:12:35 +09:00
</div>
)
} else if (loading) {
return (
<div className="posts-list">
{showHeader ? <Components.PostsListHeader /> : null}
<div className="posts-list-content">
<Components.PostsLoading/>
</div>
</div>
)
2016-04-14 10:12:35 +09:00
} else {
return (
<div className="posts-list">
{showHeader ? <Components.PostsListHeader /> : null}
<div className="posts-list-content">
<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,
};
PostsList.fragment = gql`
fragment PostsItemFragment on Post {
_id
title
url
slug
thumbnailUrl
baseScore
postedAt
sticky
status
categories {
# ...minimumCategoryInfo
_id
name
slug
}
commentCount
commenters {
# ...avatarUserInfo
_id
__displayName
__emailHash
__slug
}
upvoters {
_id
}
downvoters {
_id
}
upvotes # should be asked only for admins?
score # should be asked only for admins?
viewCount # should be asked only for admins?
clickCount # should be asked only for admins?
user {
# ...avatarUserInfo
_id
__displayName
__emailHash
__slug
}
userId
}
`;
2016-11-23 11:07:48 +09:00
const options = {
collection: Posts,
queryName: 'postsListQuery',
fragment: PostsList.fragment,
};
registerComponent('PostsList', PostsList, withList(options));