diff --git a/plugins/torque-filtered-loop/src/app/App.js b/plugins/torque-filtered-loop/src/app/App.js index 15ff0fd0..7ce102a3 100644 --- a/plugins/torque-filtered-loop/src/app/App.js +++ b/plugins/torque-filtered-loop/src/app/App.js @@ -20,7 +20,12 @@ class App extends Component { } componentDidMount() { - this.getTerms(); + this.init(); + } + + async init() { + await this.getTerms(); + this.getPosts(); } componentDidUpdate(prevProps, prevState) { @@ -76,9 +81,12 @@ class App extends Component { return; } - //prettier-ignore - const url = `${this.props.site}/wp-json/wp/v2/posts?${this.props.tax}=${this.state.activeTerm}&_embed&posts_per_page=50`; - const response = await axios.get(url); + const response = await axios.get( + `${this.props.site}/wp-json/wp/v2/posts`, + { + params: this.getRequestParams() + } + ); this.setState({ posts: response.data }); this.addPostsToCache(response.data); @@ -87,6 +95,47 @@ class App extends Component { } } + getRequestParams() { + const { parentId, activeTerm } = this.state; + const { tax } = this.props; + + let params = {}; + + if (parentId) { + // + // if we have a parent Id, + // then if we have an active term we want to filter with that, + // otherwise we want to filter on the parent term and get all posts + // + params = activeTerm + ? { + [tax]: activeTerm + } + : { + [tax]: parentId + }; + } else { + // + // if theres no parent term + // then if we have an active term we filter on that + // otherwise we get all posts + params = activeTerm + ? { + [tax]: activeTerm + } + : {}; + } + + return Object.assign( + {}, + { + _embed: true, + posts_per_page: 100 + }, + params + ); + } + getParentId(terms) { // get parent id let parentId = 0; diff --git a/plugins/torque-filtered-loop/src/app/Filters.js b/plugins/torque-filtered-loop/src/app/Filters.js index 1061bb39..bc15c3e3 100644 --- a/plugins/torque-filtered-loop/src/app/Filters.js +++ b/plugins/torque-filtered-loop/src/app/Filters.js @@ -8,6 +8,13 @@ class Filters extends React.Component { this.state = { terms: this.filterTermsByParent() }; + + this.allTerm = { + id: 0, + name: "All" + }; + + this.renderFilterButton = this.renderFilterButton.bind(this); } // If the terms change, we filter the terms by any parent Id that we might get. @@ -25,24 +32,27 @@ class Filters extends React.Component { return (
- {terms.map((term, index) => { - const isActive = term.id === this.props.activeTerm; - - return ( -
); } + renderFilterButton(term, index) { + const isActive = term.id === this.props.activeTerm; + + return ( +