From a525299f4410e95a940536f4f692ec80ad5c62ee Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Wed, 3 Jun 2020 18:15:18 -0400
Subject: [PATCH] Creadno lista pero con problemas en paginate

---
 src/components/Paginate.jsx | 11 +++-----
 src/components/Search.jsx   | 53 ++++++++++++++++++++++++-------------
 src/styles/main.css         | 46 +++++++++++++++++++++++++++++---
 3 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/src/components/Paginate.jsx b/src/components/Paginate.jsx
index 980576d..f2dbc78 100644
--- a/src/components/Paginate.jsx
+++ b/src/components/Paginate.jsx
@@ -19,7 +19,7 @@ const range = (from, to, step = 1) => {
     return range;
 }
 
-export class Paginate extends Component {
+export default class Paginate extends Component {
     constructor(props) {
         super(props);
         const {totalRecords = 0, pageLimit = 30, pageNeighbours = 0, currentPage = 1} = props;
@@ -135,24 +135,21 @@ export class Paginate extends Component {
         const blocks = pages.map((page, index) => {
             if (page === LEFT_PAGE) return (
                 <li key={page} className="page-item">
-                    <a className="page-link" href={this.makePageLink(this.state.currentPage - 1)}
-                       onClick={this.handleMoveLeft}>
+                    <a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
                         <span>&laquo; Anterior</span>
                     </a>
                 </li>
             );
             if (page === RIGHT_PAGE) return (
                 <li key={page} className="page-item">
-                    <a className="page-link" href={this.makePageLink(this.state.currentPage + 1)}
-                       onClick={this.handleMoveRight}>
+                    <a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
                         <span>Siguiente &raquo;</span>
                     </a>
                 </li>
             );
             return (
                 <li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
-                    <a className="page-link" href={this.makePageLink(index)}
-                       onClick={this.handleClick(page)}>{page}</a>
+                    <a className="page-link" href={this.makePageLink(page)} onClick={this.handleClick(page)}>{page}</a>
                 </li>
             );
         })
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index e383870..dd56180 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -1,15 +1,34 @@
 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 Paginate from "./Paginate";
+import {Link, navigate} from "@reach/router";
 
+class SearchArtist extends React.Component {
+    render() {
+        const artist = this.props.artist;
+        return (
+            <li className='entity'>
+                <Link to={`/artist/${artist.id}`}>
+                    <span>{artist.name}</span>
+                    <span className='small'>{[artist.type, artist.country].filter(Boolean).join(' - ')}</span>
+                </Link>
+            </li>
+        )
+    }
+}
 
-const SearchList = () => (
-    <div>
-    </div>
-);
+class SearchList extends React.Component {
+    render() {
+        const artists = this.props.artists;
+        return <ul className='entity_list'>
+            {artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>)}
+        </ul>
+    }
+}
 
 export class Search extends React.Component {
     constructor(props) {
@@ -31,23 +50,15 @@ export class Search extends React.Component {
         this.loadArtists(this.state.params.query, this.state.params.page);
     }
 
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        if (prevState.params !== this.state.params) {
-            this.loadArtists(this.state.params.query, this.state.params.page);
-        }
-    }
-
     makeLink(page) {
         return `/search?query=${this.state.params.query}&page=${page}`
     }
 
-    handlePageChange(page) {
-        this.props.navigate(page).then(() => {
-            this.setState({
-                artists: null,
-                params: this.loadParams()
-            });
-        })
+    async handlePageChange(page) {
+        await navigate(page)
+        this.setState({params: this.loadParams()}, () => {
+            this.loadArtists(this.state.params.query, this.state.params.page);
+        });
     }
 
     handleQueryChange(query) {
@@ -88,7 +99,11 @@ export class Search extends React.Component {
     }
 
     loadParams() {
-        return queryString.parse(this.props.location.search);
+        const parsed = queryString.parse(this.props.location.search);
+        return {
+            query: parsed.query,
+            page: parsed.page
+        }
     }
 
     loadArtists(query, page) {
diff --git a/src/styles/main.css b/src/styles/main.css
index 51492eb..e3efac0 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,5 +1,8 @@
 :root {
     --gray: hsl(0, 0%, 85%);
+    --dark-gray: hsl(0, 0%, 30%);
+    --black: hsl(0, 0%, 20%);
+    --emerald: hsl(138, 70%, 50%);
 }
 
 body {
@@ -7,6 +10,7 @@ body {
     margin: 0 auto;
     padding: 0 1em;
     font-family: sans-serif;
+    color: var(--black);
 }
 
 input {
@@ -18,6 +22,11 @@ button {
     border: 1px var(--gray) solid;
 }
 
+a {
+    color: var(--emerald);
+    text-decoration: none;
+}
+
 .nav {
     display: flex;
     min-height: 3.25em;
@@ -45,13 +54,13 @@ ul.pagination {
 }
 
 .page-link {
-    color: black;
+    color: var(--black);
     text-decoration: none;
     padding: 0 1em;
 }
 
-.page-item.active a{
-    color: blue;
+.page-item.active a {
+    color: var(--emerald);
 }
 
 .full-width {
@@ -72,4 +81,35 @@ ul.pagination {
 }
 
 
+ul.entity_list {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1em;
+}
+
+li.entity {
+    height: 4em;
+    border: 1px var(--gray) solid;
+}
+
+li.entity:not(:first-child) {
+    border-top: none;
+}
+
+li.entity a {
+    display: flex;
+
+    height: 100%;
+    padding-left: 1em;
+    text-decoration: none;
+    color: var(--black);
+
+    justify-content: center;
+    flex-direction: column;
+}
+
+li.entity a .small {
+    font-size: .8em;
+    color: var(--dark-gray);
+}