From b5e0d85b3b70863247b635168c08ed3336f8ff26 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Thu, 4 Jun 2020 21:22:15 -0400
Subject: [PATCH] Search bar no hace search y correccion de bug en makelink

---
 src/components/Search.jsx    | 26 ++++++++++++++------------
 src/components/SearchBar.jsx | 33 ++++++++++++++-------------------
 src/index.jsx                | 16 ++++++++++------
 3 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index bd2a7d9..95c5356 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -9,12 +9,12 @@ import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 
-class CoverArt extends React.Component  {
+class CoverArt extends React.Component {
     constructor(props) {
-       super(props);
-       this.state = {
-           loading: true
-       }
+        super(props);
+        this.state = {
+            loading: true
+        }
     }
 
     handleLoad = () => {
@@ -22,15 +22,15 @@ class CoverArt extends React.Component  {
     };
 
     render() {
-        if(this.props.cover_art){
-            if(this.state.loading){
+        if (this.props.cover_art) {
+            if (this.state.loading) {
                 return (
                     <Fragment>
                         <img src={this.props.cover_art.image} className={'coverart loading'} alt={this.props.alt} onLoad={this.handleLoad}/>
                         <DiscSVG className='coverart'/>
                     </Fragment>
                 )
-            }else {
+            } else {
                 return <img src={this.props.cover_art.image} className={'coverart'} alt={this.props.alt}/>
             }
         } else {
@@ -85,7 +85,7 @@ class SearchSongs extends React.Component {
         }
     };
 
-    makeLink = page => `/search/song?query=${this.state.query}&page=${page}`;
+    makeLink = page => `/search/song?query=${this.props.query}&page=${page}`;
 
     handlePageChange = page => {
         this.setState({songs: null, page: page})
@@ -173,7 +173,7 @@ class SearchDiscs extends React.Component {
         }
     };
 
-    makeLink = page => `/search/disc?query=${this.state.query}&page=${page}`;
+    makeLink = page => `/search/disc?query=${this.props.query}&page=${page}`;
 
     handlePageChange = page => {
         this.setState({discs: null, page: page})
@@ -253,7 +253,7 @@ class SearchArtists extends React.Component {
         }
     };
 
-    makeLink = page => `/search/artist?query=${this.state.query}&page=${page}`;
+    makeLink = page => `/search/artist?query=${this.props.query}&page=${page}`;
 
     handlePageChange = page => {
         this.setState({artists: null, page: page})
@@ -376,7 +376,9 @@ export class Search extends React.Component {
         <Fragment>
             <h1>Búsqueda</h1>
             <SearchBar query={this.state.query} onQueryChanged={this.handleQueryChange} history={this.props.history}/>
-            <SearchTabs query={this.state.query} onTabChanged={this.handleTabChange} onPageChange={this.handlePageChange} selected={this.state.who} page={this.state.page}/>
+            {this.state.query &&
+                <SearchTabs query={this.state.query} onTabChanged={this.handleTabChange} onPageChange={this.handlePageChange} selected={this.state.who} page={this.state.page}/>
+            }
         </Fragment>
     );
 }
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index fda658d..bd46c16 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -7,32 +7,27 @@ export default class SearchBar extends React.Component {
         this.state = {
             query: this.props.query ? this.props.query : ''
         };
-
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
     }
 
-    handleChange(event) {
+    handleChange = event => {
         const query = event.target.value;
         this.setState({query: query});
-    }
+    };
+
+    handleSubmit = (who) => (event) => {
+        const query = this.state.query;
+        if (!query) return;
 
-    handleSubmit(event, who) {
         if (event.key === 'Enter' || who === 'button') {
-            const query = this.state.query;
             const onQueryChanged = this.props.onQueryChanged;
-
-            this.props.history.push(`/search?query=${query}`)
-            if(onQueryChanged) onQueryChanged(query)
+            if (onQueryChanged) onQueryChanged(query)
         }
-    }
+    };
 
-    render() {
-        return (
-            <div className='input-with-icon'>
-                <input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit} onChange={this.handleChange}/>
-                <button onClick={(e) => this.handleSubmit(e, 'button')}><FaSearch/></button>
-            </div>
-        );
-    }
+    render = () => (
+        <div className='input-with-icon'>
+            <input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit('input')} onChange={this.handleChange}/>
+            <button onClick={this.handleSubmit('button')}><FaSearch/></button>
+        </div>
+    );
 }
diff --git a/src/index.jsx b/src/index.jsx
index d851664..b18ea68 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -10,12 +10,16 @@ import {Nav} from "./components/Nav";
 
 import {BrowserRouter, Switch, Route} from "react-router-dom";
 
-const Main = (props) => (
-    <Fragment>
-        <h1>Busca la musica que te gusta!</h1>
-        <SearchBar history={props.history}/>
-    </Fragment>
-)
+const Main = (props) => {
+    const navigate = (query) => props.history.push(`/search?query=${query}`);
+
+    return (
+        <Fragment>
+            <h1>Busca la musica que te gusta!</h1>
+            <SearchBar history={props.history} onQueryChanged={navigate}/>
+        </Fragment>
+    )
+}
 
 const NoRoute = (props) => {
     return (