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>
   )