2016-12-06 18:06:29 +01:00
|
|
|
import { Components, getRawComponent, registerComponent } from 'meteor/nova:lib';
|
2016-04-14 10:12:35 +09:00
|
|
|
import React from 'react';
|
2016-11-19 20:01:17 +01:00
|
|
|
import { withList } from 'meteor/nova:core';
|
|
|
|
import Posts from 'meteor/nova:posts';
|
2017-01-10 17:49:03 +09:00
|
|
|
import { withCurrentUser } from 'meteor/nova:core';
|
2017-02-03 15:36:40 +09:00
|
|
|
import { Alert } from 'react-bootstrap';
|
2016-04-14 10:12:35 +09:00
|
|
|
|
2016-11-10 15:39:04 +09:00
|
|
|
const PostsList = (props) => {
|
2016-04-14 10:12:35 +09:00
|
|
|
|
2017-02-03 15:36:40 +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;
|
2016-11-10 15:39:04 +09:00
|
|
|
|
2017-02-03 15:36:40 +09:00
|
|
|
if (error) {
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="posts-list">
|
|
|
|
<Alert className="flash-message" bsStyle="danger">
|
|
|
|
{error.message}
|
|
|
|
</Alert>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
|
|
|
} else if (results && results.length) {
|
2016-11-11 18:19:18 +09:00
|
|
|
|
|
|
|
const hasMore = totalCount > results.length;
|
|
|
|
|
2016-04-14 10:12:35 +09:00
|
|
|
return (
|
2016-04-19 15:45:36 +09:00
|
|
|
<div className="posts-list">
|
2016-12-06 18:06:29 +01:00
|
|
|
{showHeader ? <Components.PostsListHeader/> : null}
|
2016-04-19 15:45:36 +09:00
|
|
|
<div className="posts-list-content">
|
2017-01-10 17:49:03 +09:00
|
|
|
{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>
|
|
|
|
)
|
2016-11-10 15:39:04 +09:00
|
|
|
} else if (loading) {
|
|
|
|
return (
|
|
|
|
<div className="posts-list">
|
2016-12-06 18:06:29 +01:00
|
|
|
{showHeader ? <Components.PostsListHeader /> : null}
|
2016-11-10 15:39:04 +09:00
|
|
|
<div className="posts-list-content">
|
2016-12-06 18:06:29 +01:00
|
|
|
<Components.PostsLoading/>
|
2016-11-10 15:39:04 +09:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
2016-04-14 10:12:35 +09:00
|
|
|
} else {
|
|
|
|
return (
|
2016-04-19 15:45:36 +09:00
|
|
|
<div className="posts-list">
|
2016-12-06 18:06:29 +01:00
|
|
|
{showHeader ? <Components.PostsListHeader /> : null}
|
2016-04-19 15:45:36 +09:00
|
|
|
<div className="posts-list-content">
|
2016-12-06 18:06:29 +01:00
|
|
|
<Components.PostsNoResults/>
|
2016-04-14 10:12:35 +09:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
2016-05-22 16:42:24 +09:00
|
|
|
PostsList.displayName = "PostsList";
|
|
|
|
|
2016-11-10 15:39:04 +09:00
|
|
|
PostsList.propTypes = {
|
2016-11-11 16:42:19 +09:00
|
|
|
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-10 15:39:04 +09:00
|
|
|
};
|
|
|
|
|
2016-11-23 11:07:48 +09:00
|
|
|
const options = {
|
|
|
|
collection: Posts,
|
|
|
|
queryName: 'postsListQuery',
|
2017-01-30 19:46:48 +09:00
|
|
|
fragmentName: 'PostsList',
|
2016-11-19 20:01:17 +01:00
|
|
|
};
|
|
|
|
|
2017-01-30 19:46:48 +09:00
|
|
|
registerComponent('PostsList', PostsList, withCurrentUser, [withList, options]);
|