From fcd3428a469267ef39a20897dfa6283ee49bef05 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Mon, 1 Jun 2020 23:34:17 -0400
Subject: [PATCH] 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/Paginate.jsx  | 10 ++--
 src/components/Search.jsx    | 99 ++++++++++++++++++++----------------
 src/components/SearchBar.jsx | 16 +++---
 3 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/src/components/Paginate.jsx b/src/components/Paginate.jsx
index ec66265..556ea17 100644
--- a/src/components/Paginate.jsx
+++ b/src/components/Paginate.jsx
@@ -149,21 +149,21 @@ export class Paginate extends Component {
                 <ul className="pagination">
                     {pages.map((page, index) => {
                         if (page === LEFT_PAGE) return (
-                            <li key={index} className="page-item">
+                            <li key={page} className="page-item">
                                 <a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
-                                    <span>&laquo;</span>
+                                    <span>&laquo; Anterior</span>
                                 </a>
                             </li>
                         );
                         if (page === RIGHT_PAGE) return (
-                            <li key={index} className="page-item">
+                            <li key={page} className="page-item">
                                 <a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
-                                    <span>&raquo;</span>
+                                    <span>Siguiente &raquo;</span>
                                 </a>
                             </li>
                         );
                         return (
-                            <li key={index} className={`page-item ${currentPage === page ? 'active' : ''}`}>
+                            <li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
                                 <a className="page-link" href={this.makePageLink(index)}
                                    onClick={this.handleClick(page)}>{page}</a>
                             </li>
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index 51d8870..e26a923 100644
--- a/src/components/Search.jsx
+++ b/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,
+            })
         })
     }
 }
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 29f1a73..def5206 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -5,11 +5,9 @@ import {navigate} from "@reach/router";
 export default class SearchBar extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {query: ''};
-
-        if (this.props.query) {
-            this.state = {query: this.props.query};
-        }
+        this.state = {
+            query: this.props.query ? this.props.query : ''
+        };
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -22,15 +20,17 @@ export default class SearchBar extends React.Component {
 
     handleSubmit(event, who) {
         if (event.key === 'Enter' || who === 'button') {
-            navigate(`/search?query=${this.state.query}`);
+            const query = this.state.query;
+            const onQueryChanged = this.props.onQueryChanged;
+
+            navigate(`/search?query=${query}`).then(() => onQueryChanged(query));
         }
     }
 
     render() {
         return (
             <div className='input-with-icon'>
-                <input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit}
-                       onChange={this.handleChange}/>
+                <input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit} onChange={this.handleChange}/>
                 <button onClick={(e) => this.handleSubmit(e, 'button')}><FaSearch/></button>
             </div>
         );