83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
import {BrowserRouter, Switch, Route} from "react-router-dom";
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
|
|
import './styles/reset.css';
|
|
import './styles/main.scss';
|
|
import './styles/tabs.scss';
|
|
|
|
import {StateProvider} from "./services/State";
|
|
|
|
import {Nav} from "./components/Nav";
|
|
import {SearchBar} from "./components/SearchBar";
|
|
import {ScrollToTopRouter} from "./components/ScrollToTop";
|
|
|
|
import {Search} from './views/Search';
|
|
import {ArtistView} from "./views/Artist";
|
|
import {DiscView} from "./views/Disc";
|
|
import {ReleaseView} from "./views/Release";
|
|
import {Recomended} from "./views/Recomended";
|
|
import {SongView} from "./views/Song";
|
|
import {Grid, RowCol} from './components/Grid';
|
|
import {AuthCallback, AuthLogin, AuthLogout} from "./components/Auth";
|
|
|
|
const Main = (props) => {
|
|
const navigate = (query) => props.history.push(`/search?query=${query}`);
|
|
|
|
return (
|
|
<Grid>
|
|
<RowCol><h1>Busca la musica que te gusta!</h1></RowCol>
|
|
<RowCol><SearchBar history={props.history} onQueryChanged={navigate}/></RowCol>
|
|
<RowCol><Recomended/></RowCol>
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
const NoRoute = (props) => {
|
|
return (
|
|
<Grid>
|
|
<RowCol><h1>Esa pagina no existe</h1></RowCol>
|
|
<RowCol>
|
|
<button className='link' onClick={() => props.history.goBack()}>Volver</button>
|
|
</RowCol>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
const App = () => (
|
|
<main>
|
|
<BrowserRouter>
|
|
<ScrollToTopRouter/>
|
|
<Nav/>
|
|
<Switch>
|
|
<Route path='/search/:who?' component={Search}/>
|
|
|
|
<Route path='/artist/:mbid?' component={ArtistView}/>
|
|
<Route path='/disc/:mbid?' component={DiscView}/>
|
|
<Route path='/release/:mbid?' component={ReleaseView}/>
|
|
<Route path='/song/:mbid?' component={SongView}/>
|
|
|
|
<Route exact path='/login' component={AuthLogin}/>
|
|
<Route exact path='/logout' component={AuthLogout}/>
|
|
<Route exact path='/auth_callback' component={AuthCallback}/>
|
|
|
|
<Route exact path='/' component={Main}/>
|
|
<Route path='*' component={NoRoute}/>
|
|
</Switch>
|
|
</BrowserRouter>
|
|
</main>
|
|
);
|
|
|
|
const AppWithState = () => {
|
|
return (
|
|
<StateProvider>
|
|
<App/>
|
|
</StateProvider>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<AppWithState/>,
|
|
document.getElementById('root')
|
|
);
|