Squash - Updates to Torque Filtered Loop plugin (#17)

* make sure filtered loop plugin is getting all posts to start with rather than an empty page * Add 'All' option to the filter
vallgroup · Sep 19, 2018 · 6cf6582 · 6cf6582
1 parent 5dd54cc
commit 6cf6582
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 18 deletions.
diff --git 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
@@ -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 (
       <div className={"torque-filtered-loop-filters"}>
-        {terms.map((term, index) => {
-          const isActive = term.id === this.props.activeTerm;
-
-          return (
-            <button
-              key={index}
-              className={`torque-filtered-loop-filter-button ${
-                isActive ? "active" : ""
-              }`}
-              onClick={() => this.props.updateActiveTerm(term.id)}
-              dangerouslySetInnerHTML={{ __html: term.name }}
-            />
-          );
-        })}
+        {this.renderFilterButton(this.allTerm, -1)}
+        {terms.map(this.renderFilterButton)}
       </div>
     );
   }
 
+  renderFilterButton(term, index) {
+    const isActive = term.id === this.props.activeTerm;
+
+    return (
+      <button
+        key={index}
+        className={`torque-filtered-loop-filter-button ${
+          isActive ? "active" : ""
+        }`}
+        onClick={() => this.props.updateActiveTerm(term.id)}
+        dangerouslySetInnerHTML={{ __html: term.name }}
+      />
+    );
+  }
+
   filterTermsByParent() {
     const { terms, parentId } = this.props;