Por fin un paginado que funciona

Entiedo mucho mejor esto de react que angular~~~

Tengo que usar mas los callbacks cuando haog navegaciones para volver a
leer las props, como cambia la  query string y esta en props~

src/components/Search.jsx

@@ -1,10 +1,9 @@
-import React from "react";
+import React, {Fragment} from "react";
 import queryString from "query-string";
 import ReactJson from "react-json-view";
 import {searchArtist} from "../services/search_service";
 import SearchBar from "./SearchBar";
 import {Paginate} from "./Paginate";
-import {navigate} from "@reach/router";
 
 
 class SearchList extends React.Component {
@@ -25,85 +24,95 @@ class SearchList extends React.Component {
 }
 
 export class Search extends React.Component {
-
     constructor(props) {
         super(props);
 
-        this.state = {
-            artists: null
-        };
-
-        this.getParams = this.getParams.bind(this);
+        this.loadParams = this.loadParams.bind(this);
         this.makeLink = this.makeLink.bind(this);
         this.handlePageChange = this.handlePageChange.bind(this);
-    }
+        this.handleQueryChange = this.handleQueryChange.bind(this);
 
-
-    static getDerivedStateFromProps(props, state) {
-        if (props.location.search !== state.prevSearch) {
-            return {
-                artists: null,
-                prevSearch: props.location.search
-            }
-        }
-        return null;
+        this.state = {
+            artists: null,
+            paginate: null,
+            params: this.loadParams()
+        };
     }
 
     componentDidMount() {
-        this.loadArtists(this.getParams().query, this.getParams().page);
+        this.loadArtists(this.state.params.query, this.state.params.page);
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        if (this.state.artists == null) {
-            this.loadArtists(this.getParams().query, this.getParams().page);
+        if (prevState.params !== this.state.params) {
+            this.loadArtists(this.state.params.query, this.state.params.page);
         }
     }
 
     makeLink(page) {
-        return `/search?query=${this.getParams().query}&page=${page}`
+        return `/search?query=${this.state.params.query}&page=${page}`
     }
 
     handlePageChange(page) {
-        navigate(page);
+        this.props.navigate(page).then(() => {
+            this.setState({
+                artists: null,
+                params: this.loadParams()
+            });
+        })
+    }
+
+    handleQueryChange(query) {
+        this.setState({artists: null, paginate: null, params: this.loadParams()})
     }
 
     render() {
-        if (this.state.artists) {
-            const total = this.state.artists.paginate.total;
-            const currentPage = this.state.artists.paginate.current_page;
-            const pageLimit = this.state.artists.paginate.per_page;
+        let paginate = null;
+        let artists = null;
 
-            return (
-                <main>
-                    <h1>Busqueda</h1>
-                    <SearchBar query={this.getParams().query}/>
-                    <SearchList artists={this.state.artists.artists}/>
-                    <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={1} onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
+        if (this.state.paginate) {
+            const total = this.state.paginate.total;
+            const currentPage = this.state.paginate.current_page;
+            const pageLimit = this.state.paginate.per_page;
+
+            paginate = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage}
+                                 pageNeighbours={2} onPageChanged={this.handlePageChange}
+                                 makeLink={this.makeLink}/>
+        }
+
+        if (this.state.artists) {
+            artists = (
+                <Fragment>
+                    <SearchList artists={this.state.artists}/>
                     <ReactJson src={this.state.artists} enableClipboard={false} displayDataTypes={false}/>
-                </main>
-            );
-        } else {
-            return (
-                <main>
-                    <h1>Busqueda</h1>
-                    <SearchBar query={this.query}/>
-                    <p>Loading...</p>
-                </main>
+                </Fragment>
             );
         }
+
+        return (
+            <main>
+                <h1>Busqueda</h1>
+                <SearchBar query={this.state.params.query} onQueryChanged={this.handleQueryChange}/>
+                {paginate && paginate}
+                {artists ? artists : <p>Loading...</p>}
+            </main>
+        );
     }
 
-    getParams() {
+    loadParams() {
         return queryString.parse(this.props.location.search);
     }
 
     loadArtists(query, page) {
-        if(!page){
+        if (!page) {
             page = 1;
         }
 
         searchArtist(query, page).then((response) => {
-            this.setState({artists: response})
+            this.setState({
+                artists: response.artists,
+                paginate: response.paginate,
+            })
         })
     }
 }