From f4dce4653f42f2079d2cff3f14c806a21a0d3064 Mon Sep 17 00:00:00 2001
From: Rodrigo Pinto <rodrigo_plp@yahoo.com>
Date: Sat, 14 Dec 2019 12:32:28 -0500
Subject: [PATCH] Login and artist search pages

---
 src/App.js                 | 27 ++++-----------------------
 src/components/Router.jsx  | 20 ++++++++++++++++++++
 src/history.js             |  3 +++
 src/views/ArtistSearch.jsx | 11 ++++++++++-
 src/views/Login.jsx        | 13 +++++++++++++
 5 files changed, 50 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Router.jsx
 create mode 100644 src/history.js
 create mode 100644 src/views/Login.jsx

diff --git a/src/App.js b/src/App.js
index 805806c..ea8b92c 100644
--- a/src/App.js
+++ b/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>
   )
 }
diff --git a/src/components/Router.jsx b/src/components/Router.jsx
new file mode 100644
index 0000000..2112424
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/history.js b/src/history.js
new file mode 100644
index 0000000..e5987c4
--- /dev/null
+++ b/src/history.js
@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history'
+
+export default createBrowserHistory()
diff --git a/src/views/ArtistSearch.jsx b/src/views/ArtistSearch.jsx
index 7fadf32..c42fcf1 100644
--- a/src/views/ArtistSearch.jsx
+++ b/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>
   )
 }
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
new file mode 100644
index 0000000..bff7f50
--- /dev/null
+++ b/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