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 (
-
+
« Anterior
);
if (page === RIGHT_PAGE) return (
-
+
Siguiente »
);
return (
- {page}
+ {page}
);
})
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 (
+
+
+ {artist.name}
+ {[artist.type, artist.country].filter(Boolean).join(' - ')}
+
+
+ )
+ }
+}
-const SearchList = () => (
-
-
-);
+class SearchList extends React.Component {
+ render() {
+ const artists = this.props.artists;
+ return
+ {artists.map((artist) => )}
+
+ }
+}
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);
+}