1.2.1 Pagination Added

freddiemixell · Jul 7, 2019 · d5c50cc · d5c50cc
1 parent 135940a
commit d5c50cc
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 18 deletions.
diff --git a/fm-google-site-search.php b/fm-google-site-search.php
@@ -16,7 +16,7 @@
  * Plugin Name:       Easy Google Custom Search
  * Plugin URI:        https://github.com/freddiemixell/wordpress-google-search
  * Description:       This is a short description of what the plugin does. It's displayed in the WordPress admin area.
- * Version:           1.1.1
+ * Version:           1.2.1
  * Author:            Freddie Mixell
  * Author URI:        https://github.com/freddiemixell
  * License:           GPL-2.0+
@@ -35,7 +35,7 @@
  * Start at version 1.0.0 and use SemVer - https://semver.org
  * Rename this for your plugin and update it as you release new versions.
  */
-define( 'FM_GOOGLE_SITE_SEARCH_VERSION', '1.1.1' );
+define( 'FM_GOOGLE_SITE_SEARCH_VERSION', '1.2.1' );
 
 define( 'FM_GOOGLE_SITE_SEARCH_PATH', __DIR__ );
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fm-google-site-search",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "WordPress Google Search",
   "main": "index.js",
   "license": "MIT",

diff --git a/public/class-fm-google-site-search-public.php b/public/class-fm-google-site-search-public.php
@@ -117,6 +117,7 @@ public function register_search() {
 
   public function search_site(WP_REST_Request $request) {
     $query = $request['query'];
+    $start = isset( $request['start'] ) ? $request['start'] : null;
     $base_url = 'https://www.googleapis.com/customsearch/v1';
     $fields = 'items(title,link,snippet),queries,searchInformation(formattedSearchTime,formattedTotalResults)';
     global $wp_version;
@@ -134,6 +135,10 @@ public function search_site(WP_REST_Request $request) {
       '&q=' . $query .
       '&fields=' . $fields;
 
+    if ($start !== null) {
+      $request = $request . '&start=' . $start;
+    }
+
     $response = wp_remote_get( esc_url_raw( $request ), $args);
 
     return json_decode( wp_remote_retrieve_body( $response ), true );

diff --git a/public/dist/bundle.js b/public/dist/bundle.js
diff --git a/public/js/Pagination.js b/public/js/Pagination.js
@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 
-const { Fragment } = wp.element;
+const Wrapper = styled.div`
+  .current-page {
+    background: #333;
+  }
+`;
 
 const Button = styled.button.attrs(() => ({
   type: "button",
@@ -9,30 +13,44 @@ const Button = styled.button.attrs(() => ({
 function Pagination(props) {
   let nextIndex = null;
   let prevIndex = null;
+  let pageButtons = [];
+  const { setIndex } = props;
 
   // Finding Next Page Start Index
   if (props.results !== null && typeof props.results.queries.nextPage !== 'undefined') {
     nextIndex = props.results.queries.nextPage[0].startIndex;
-    console.log(nextIndex);
   }
 
   // Finding Prev Page Start Index
   if (props.results !== null && typeof props.results.queries.previousPage !== 'undefined') {
     prevIndex = props.results.queries.previousPage[0].startIndex;
-    console.log(prevIndex);
+  } else {
+    prevIndex = null;
+  }
+
+  // Setting Total Results
+  if (props.results !== null && typeof props.results.queries.request !== 'undefined') {
+    const totalResults = parseInt(props.results.queries.request[0].totalResults);
+    let totalPages = Math.round(totalResults / 10);
+    totalPages = totalPages > 10 ? 10 : totalPages;
+
+    for (let i = 1; i <= totalPages; i++) {
+      let startIndex = 1 + (i - 1) * 10;
+      const currentButton = <Button key={i} onClick={() => props.setIndex(startIndex)}>{i}</Button>;
+
+      pageButtons = [...pageButtons, currentButton];
+    }
   }
 
   return (
-    <Fragment>
-      { prevIndex !== null
-       ? <Button>&lt;</Button>
-       : null
-      }
+    <Wrapper>
+      <Button disabled={prevIndex === null ? true : false} onClick={() => setIndex(prevIndex)}>&lt;</Button>
+      { pageButtons }
       { nextIndex !== null
-       ? <Button>&gt;</Button>
+       ? <Button disabled={nextIndex > 91 ? true : false} onClick={() => setIndex(nextIndex)}>&gt;</Button>
        : null
       }
-    </Fragment>
+    </Wrapper>
   );
 }
 

diff --git a/public/js/withData.js b/public/js/withData.js
@@ -9,8 +9,10 @@ function withData(WrappedComponent) {
       this.state = {
         query: null,
         results: null,
+        start: null,
         handleChange: this.handleChange.bind(this),
         searchSite: this.searchSite.bind(this),
+        setIndex: this.setIndex.bind(this),
         error: null,
         loading: false,
       }
@@ -33,17 +35,23 @@ function withData(WrappedComponent) {
       await this.setState({query: event.target.value});
     }
 
+    setIndex(index) {
+      this.setState({start: index}, () => this.searchSite());
+    }
+
     searchSite(event) {
-      event.preventDefault();
-      const { query } = this.state;
+      if (typeof event !== 'undefined') {
+        event.preventDefault();
+      }
+      const { query, start } = this.state;
       if (query === null) {
         this.setState({error: 1});
         return;
       }
 
       this.setState({loading: true});
 
-      fetch(`/wp-json/fm-google-site-search/v1/search_site/?query=${query}`)
+      fetch(`/wp-json/fm-google-site-search/v1/search_site/?query=${query}${start !== null ? "&start=" + start : ""}`)
       .then(res => res.json())
       .then(results => this.setState({results, query, error: null, loading: false}))
       .catch(() => this.setState({error: 2}))