From 86d999f004037b357ee7b18fc2a34fba9368c834 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Fri, 5 Jun 2020 21:24:01 -0400
Subject: [PATCH] SearchBar Funcional

---
 src/components/Search.jsx    |  2 +-
 src/components/SearchBar.jsx | 33 +++++++++++----------------------
 src/index.jsx                |  2 +-
 3 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index 4d89106..15113fa 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -2,7 +2,7 @@ import React, {Fragment, useEffect, useState} from "react";
 import queryString from "query-string";
 
 import {searchArtist, searchDisc, searchSong} from "../services/search_service";
-import SearchBar from "./SearchBar";
+import {SearchBar} from "./SearchBar";
 import {Paginate} from "./Paginate";
 import {Link} from "react-router-dom";
 import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index bd46c16..90f47eb 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -1,33 +1,22 @@
-import React from "react";
+import React, {useState} from "react";
 import {FaSearch} from 'react-icons/fa';
 
-export default class SearchBar extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            query: this.props.query ? this.props.query : ''
-        };
-    }
+export const SearchBar = (props) => {
+    const [query, setQuery] = useState(props.query ? props.query : '')
+    const onQueryChanged = props.onQueryChanged;
 
-    handleChange = event => {
-        const query = event.target.value;
-        this.setState({query: query});
-    };
+    const handleChange = event => setQuery(event.target.value);
 
-    handleSubmit = (who) => (event) => {
-        const query = this.state.query;
-        if (!query) return;
-
-        if (event.key === 'Enter' || who === 'button') {
-            const onQueryChanged = this.props.onQueryChanged;
-            if (onQueryChanged) onQueryChanged(query)
+    const handleSubmit = (who) => (event) => {
+        if ((query && onQueryChanged) && (event.key === 'Enter' || who === 'button')) {
+            onQueryChanged(query)
         }
     };
 
-    render = () => (
+    return (
         <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>
+            <input className='full-width' value={query} onKeyUp={handleSubmit('input')} onChange={handleChange}/>
+            <button onClick={handleSubmit('button')}><FaSearch/></button>
         </div>
     );
 }
diff --git a/src/index.jsx b/src/index.jsx
index b18ea68..edd0531 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,7 +1,7 @@
 import React, {Fragment} from 'react';
 import ReactDOM from 'react-dom';
 import {Search} from './components/Search';
-import SearchBar from "./components/SearchBar";
+import {SearchBar} from "./components/SearchBar";
 
 import './styles/reset.css';
 import './styles/main.scss';