Search bar no hace search y correccion de bug en makelink

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);
+        super(props);
-       this.state = {
+        this.state = {
-           loading: true
+            loading: true
-       }
+        }
     }
 
     handleLoad = () => {
@@ -22,15 +22,15 @@ class CoverArt extends React.Component  {
     };
 
     render() {
-        if(this.props.cover_art){
+        if (this.props.cover_art) {
-            if(this.state.loading){
+            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>
     );
 }

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;
-
+            if (onQueryChanged) onQueryChanged(query)
-            this.props.history.push(`/search?query=${query}`)
-            if(onQueryChanged) onQueryChanged(query)
         }
-    }
+    };
 
-    render() {
+    render = () => (
-        return (
+        <div className='input-with-icon'>
-            <div className='input-with-icon'>
+            <input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit('input')} onChange={this.handleChange}/>
-                <input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit} onChange={this.handleChange}/>
+            <button onClick={this.handleSubmit('button')}><FaSearch/></button>
-                <button onClick={(e) => this.handleSubmit(e, 'button')}><FaSearch/></button>
+        </div>
-            </div>
+    );
-        );
-    }
 }

src/index.jsx

@@ -10,12 +10,16 @@ import {Nav} from "./components/Nav";
 
 import {BrowserRouter, Switch, Route} from "react-router-dom";
 
-const Main = (props) => (
+const Main = (props) => {
-    <Fragment>
+    const navigate = (query) => props.history.push(`/search?query=${query}`);
-        <h1>Busca la musica que te gusta!</h1>
+
-        <SearchBar history={props.history}/>
+    return (
-    </Fragment>
+        <Fragment>
-)
+            <h1>Busca la musica que te gusta!</h1>
+            <SearchBar history={props.history} onQueryChanged={navigate}/>
+        </Fragment>
+    )
+}
 
 const NoRoute = (props) => {
     return (