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

79 lines
2.2 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 { withCurrentUser } from 'meteor/nova:core';
import { Alert } from 'react-bootstrap';
2016-04-14 10:12:35 +09:00
const PostsList = (props) => {
2016-04-14 10:12:35 +09:00
const {results, loading, count, totalCount, loadMore, showHeader = true, networkStatus, currentUser, error} = props;
2017-01-09 22:09:09 +09:00
const loadingMore = networkStatus === 2;
if (error) {
return (
<div className="posts-list">
<Alert className="flash-message" bsStyle="danger">
{error.message}
</Alert>
</div>
)
} else 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} currentUser={currentUser} />)}
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,
};
2016-11-23 11:07:48 +09:00
const options = {
collection: Posts,
queryName: 'postsListQuery',
fragmentName: 'PostsList',
};
registerComponent('PostsList', PostsList, withCurrentUser, [withList, options]);