Login and artist search pages

src/App.js

@@ -1,29 +1,10 @@
-import React, { useState, useEffect } from 'react'
-import logo from './logo.svg'
-import './App.css'
+import React from 'react'
+import Router from './components/Router'
 
 function App() {
-  let [token, setToken] = useState(null)
-
-  useEffect(() => {
-    const search = window.location.search
-    const params = new URLSearchParams(search)
-    setToken(params.get('access_token'))
-  }, [])
-
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-
-        <a href='http://localhost:8888/login' className='App-link'> Login to Spotify </a>
-
-        <p>{token}</p>
-      </header>
+    <div className="app">
+      <Router />
     </div>
   )
 }

src/components/Router.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Router as ReactRouter, Route, Switch } from 'react-router-dom'
+import history from '../history.js'
+import ArtistSearch from '../views/ArtistSearch'
+import Login from '../views/Login'
+
+history.listen(() => {
+  window.scrollTo(0, 0)
+})
+
+export default function Router() {
+  return (
+    <ReactRouter history={history}>
+      <Switch>
+        <Route exact path="/" render={() => <Login />} />
+        <Route exact path="/artist-search" render={() => <ArtistSearch />} />
+      </Switch>
+    </ReactRouter>
+  )
+}

src/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history'
+
+export default createBrowserHistory()

src/views/ArtistSearch.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 
 function ArtistSearch() {
   let [token, setToken] = useState(null)
+  let [search, setSearch] = useState(null)
 
   useEffect(() => {
     const search = window.location.search
@@ -9,11 +10,19 @@ function ArtistSearch() {
     setToken(params.get('access_token'))
   }, [])
 
+  useEffect(() => {
+    console.log(search)
+  }, [search])
+
+  const handleChange = e => {
+    setSearch(e.currentTarget.value)
+  }
+
   return (
     <div className="artist-search">
       <h1>Artist search</h1>
 
-      <p>{token}</p>
+      <input placeholder='Search for an artist' onChange={handleChange} />
     </div>
   )
 }

src/views/Login.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function Login() {
+  return (
+    <div className="artist-search">
+      <h1>Touch Tunes</h1>
+
+      <a href='http://localhost:8888/login' className='App-link'> Login to Spotify </a>
+    </div>
+  )
+}
+
+export default Login