50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
import React, {Fragment} from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import {Search} from './components/Search';
|
|
import SearchBar from "./components/SearchBar";
|
|
|
|
import './styles/reset.css';
|
|
import './styles/main.scss';
|
|
|
|
import {Nav} from "./components/Nav";
|
|
|
|
import {BrowserRouter, Switch, Route} from "react-router-dom";
|
|
|
|
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 (
|
|
<div>
|
|
<h1>Esa pagina no existe</h1>
|
|
<button className='link' onClick={() => props.history.goBack()}>Volver</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const App = () => (
|
|
<main>
|
|
<BrowserRouter>
|
|
<Nav/>
|
|
<Switch>
|
|
<Route path='/search/:who?' component={Search}/>
|
|
<Route exact path='/' component={Main}/>
|
|
<Route path='*' component={NoRoute}/>
|
|
</Switch>
|
|
</BrowserRouter>
|
|
</main>
|
|
);
|
|
|
|
ReactDOM.render(
|
|
<App/>,
|
|
document.getElementById('root')
|
|
);
|