Album page. Passing props through router.

src/components/Artist.jsx

@@ -11,7 +11,7 @@ const star = (
   </svg>
 )
 
-function Artist({ props }) {
+function Artist({ props, callback }) {
   let [rate, setRate] = useState([])
 
   useEffect(() => {
@@ -23,8 +23,12 @@ function Artist({ props }) {
     setRate(stars)
   }, [props])
 
+  const openAlbums = () => {
+    callback(props.id)
+  }
+
   return (
-    <div className='artist'>
+    <div className='artist' onClick={openAlbums}>
       <div className='picture'>
         {props.images.length > 0 && (
           <img src={props.images[0].url} />
@@ -38,7 +42,13 @@ function Artist({ props }) {
         </div>
 
         <div className='rate'>
-          {rate}
+          <ul>
+            {rate.map((point, index) => (
+              <li key={index}>
+                {point}
+              </li>
+            ))}
+          </ul>
         </div>
 
       </div>

src/components/Artist.scss

@@ -2,6 +2,7 @@
   border: solid thin #b6b6b6;
   width: 12em;
   height: 16em;
+  cursor: pointer;
 
   .picture {
     border-bottom: solid thin #b6b6b6;
@@ -45,6 +46,10 @@
       padding-left: 1em;
       padding-bottom: 10px;
 
+      li {
+        margin: 0 1px;
+      }
+
       svg {
         height: 20px;
         width: 20px;
@@ -52,5 +57,4 @@
       }
     }
   }
-
 }

src/components/Router.jsx

@@ -1,19 +1,38 @@
-import React from 'react'
+import React, { useState } 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'
+import Albums from '../views/Albums'
 
 history.listen(() => {
   window.scrollTo(0, 0)
 })
 
 export default function Router() {
+  let [artistId, setArtistId] = useState(null)
+  let [searchTerm, setSearchTerm] = useState(null)
+
+  let idCallback = id => {
+    setArtistId(id)
+  }
+
+  let termCallback = term => {
+    setSearchTerm(term)
+  }
+
+  let artistProps = {
+    idCb: idCallback,
+    searchCb: termCallback,
+    searchTerm: searchTerm
+  }
+
   return (
     <ReactRouter history={history}>
       <Switch>
-        <Route exact path="/" render={() => <Login />} />
-        <Route exact path="/artist-search" render={() => <ArtistSearch />} />
+        <Route exact path='/' render={() => <Login />} />
+        <Route exact path='/artist-search' render={() => <ArtistSearch props={artistProps} />} />
+        <Route exact path='/albums' render={() => <Albums props={artistId} />} />
       </Switch>
     </ReactRouter>
   )

src/views/Albums.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function Albums({ props }) {
+  return (
+    <div className='albums'>
+      <h1>Albums</h1>
+
+      <p>{props}</p>
+    </div>
+  )
+}
+
+export default Albums

src/views/ArtistSearch.jsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import SpotifyWebApi from 'spotify-web-api-js'
 import Artist from '../components/Artist'
+import history from '../history.js'
 import './ArtistSearch.scss'
 
 const spotifyApi = new SpotifyWebApi()
 
-function ArtistSearch() {
+function ArtistSearch({ props }) {
   let [search, setSearch] = useState(null)
   let [artists, setArtists] = useState(null)
 
@@ -28,8 +29,18 @@ function ArtistSearch() {
     }
   }, [search])
 
+  useEffect(() => {
+    setSearch(props.searchTerm)
+  }, [props.searchTerm])
+
   const handleChange = e => {
     setSearch(e.currentTarget.value)
+    props.searchCb(e.currentTarget.value)
+  }
+
+  const albumsCallback = id => {
+    props.idCb(id)
+    history.push('/albums')
   }
 
   return (
@@ -43,7 +54,7 @@ function ArtistSearch() {
           <ul className='list'>
             {artists.map((artist, index) => (
               <li className='list-item' key={index}>
-                <Artist props={artist} />
+                <Artist props={artist} callback={albumsCallback} />
               </li>
             ))}
           </ul>