mirror of
https://github.com/vale981/Vulcan
synced 2025-03-08 19:11:38 -05:00
first try at making PostsListContainer a HoC
This commit is contained in:
parent
9fcb9f753d
commit
a621d01b1b
5 changed files with 89 additions and 14 deletions
|
@ -4,7 +4,7 @@ import Posts from "meteor/nova:posts";
|
||||||
|
|
||||||
const PostsHome = (props, context) => {
|
const PostsHome = (props, context) => {
|
||||||
const terms = props.location && props.location.query;
|
const terms = props.location && props.location.query;
|
||||||
return <Telescope.components.PostsListContainer terms={terms} component={Telescope.components.PostsList} />
|
return <Telescope.components.PostsList terms={terms}/>
|
||||||
};
|
};
|
||||||
|
|
||||||
PostsHome.displayName = "PostsHome";
|
PostsHome.displayName = "PostsHome";
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
import Telescope from 'meteor/nova:lib';
|
import Telescope from 'meteor/nova:lib';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { withPostsList } from 'meteor/nova:base-containers';
|
||||||
|
|
||||||
const PostsList = ({results, currentUser, hasMore, ready, count, totalCount, loadMore, showHeader = true}) => {
|
const PostsList = (props) => {
|
||||||
|
|
||||||
if (!!results.length) {
|
const {results, terms, hasMore, loading, count, totalCount, loadMore, showHeader = true} = props
|
||||||
|
|
||||||
|
if (results && results.length) {
|
||||||
return (
|
return (
|
||||||
<div className="posts-list">
|
<div className="posts-list">
|
||||||
{showHeader ? <Telescope.components.PostsListHeader/> : null}
|
{showHeader ? <Telescope.components.PostsListHeader/> : null}
|
||||||
|
@ -13,16 +16,15 @@ const PostsList = ({results, currentUser, hasMore, ready, count, totalCount, loa
|
||||||
{hasMore ? (ready ? <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <Telescope.components.PostsLoading/>) : <Telescope.components.PostsNoMore/>}
|
{hasMore ? (ready ? <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <Telescope.components.PostsLoading/>) : <Telescope.components.PostsNoMore/>}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
// note: we're handling the "loading" case in the container now
|
} else if (loading) {
|
||||||
// } else if (!ready) {
|
return (
|
||||||
// return (
|
<div className="posts-list">
|
||||||
// <div className="posts-list">
|
{showHeader ? <Telescope.components.PostsListHeader /> : null}
|
||||||
// {showHeader ? <Telescope.components.PostsListHeader /> : null}
|
<div className="posts-list-content">
|
||||||
// <div className="posts-list-content">
|
<Telescope.components.PostsLoading/>
|
||||||
// <Telescope.components.PostsLoading/>
|
</div>
|
||||||
// </div>
|
</div>
|
||||||
// </div>
|
)
|
||||||
// )
|
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<div className="posts-list">
|
<div className="posts-list">
|
||||||
|
@ -38,4 +40,8 @@ const PostsList = ({results, currentUser, hasMore, ready, count, totalCount, loa
|
||||||
|
|
||||||
PostsList.displayName = "PostsList";
|
PostsList.displayName = "PostsList";
|
||||||
|
|
||||||
module.exports = PostsList;
|
PostsList.propTypes = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = withPostsList({})(PostsList);
|
|
@ -1 +1,4 @@
|
||||||
import './containers.js';
|
import './containers.js';
|
||||||
|
import withPostsList from './postslist.js';
|
||||||
|
|
||||||
|
export {withPostsList}
|
63
packages/nova-base-containers/lib/postslist.js
Normal file
63
packages/nova-base-containers/lib/postslist.js
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
import Telescope from 'meteor/nova:lib';
|
||||||
|
import React, { PropTypes, Component } from 'react';
|
||||||
|
import Posts from "meteor/nova:posts";
|
||||||
|
|
||||||
|
import { graphql } from 'react-apollo';
|
||||||
|
import gql from 'graphql-tag';
|
||||||
|
|
||||||
|
export default function withPostsList(params){
|
||||||
|
return graphql(gql`
|
||||||
|
query getPostsView($terms: Terms, $offset: Int, $limit: Int) {
|
||||||
|
postsViewTotal(terms: $terms)
|
||||||
|
posts(terms: $terms, offset: $offset, limit: $limit) {
|
||||||
|
${Posts.graphQLQueries.list}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`, {
|
||||||
|
options(ownProps) {
|
||||||
|
|
||||||
|
// two ways of passing terms: via the wrapping call, or via
|
||||||
|
// the component calling the wrapped component
|
||||||
|
const finalProps = {...params, ...ownProps};
|
||||||
|
|
||||||
|
// console.log(params)
|
||||||
|
// console.log(ownProps)
|
||||||
|
// console.log(finalProps)
|
||||||
|
|
||||||
|
return {
|
||||||
|
variables: {
|
||||||
|
terms: finalProps.terms,
|
||||||
|
offset: 0,
|
||||||
|
limit: 10
|
||||||
|
},
|
||||||
|
// pollInterval: 20000,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props(props) {
|
||||||
|
|
||||||
|
const {data: {loading, posts, postsViewTotal, fetchMore}} = props;
|
||||||
|
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
results: posts,
|
||||||
|
totalCount: postsViewTotal,
|
||||||
|
count: posts && posts.length,
|
||||||
|
loadMore() {
|
||||||
|
// basically, rerun the query 'getPostsView' with a new offset
|
||||||
|
return fetchMore({
|
||||||
|
variables: { offset: posts.length },
|
||||||
|
updateQuery(previousResults, { fetchMoreResult }) {
|
||||||
|
// no more post to fetch
|
||||||
|
if (!fetchMoreResult.data) {
|
||||||
|
return previousResults;
|
||||||
|
}
|
||||||
|
// return the previous results "augmented" with more
|
||||||
|
return {...previousResults, posts: [...previousResults.posts, ...fetchMoreResult.data.posts]};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
...props.ownProps // pass on the props down to the wrapped component
|
||||||
|
};
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
|
@ -1 +1,4 @@
|
||||||
import './containers.js';
|
import './containers.js';
|
||||||
|
import withPostsList from './postslist.js';
|
||||||
|
|
||||||
|
export {withPostsList}
|
Loading…
Add table
Reference in a new issue