Display selected album in Modal

A new Component and Container is introduced: Modal.

It dispatches an UNSELECT_ALBUM action when clicked on.

Some CSS is added to bur out the background and display the modal
content properly.

assets/style.css

@@ -42,7 +42,7 @@ input {
     border-width: 0;
     border-bottom: 3px solid #555;
     font-size: large;
-    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
     padding: .5rem 1rem;
     min-width: 17em;
 }
@@ -67,13 +67,6 @@ footer {
     right: 0;
 }
 
-#albums {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-gap: 10px;
-    text-transform: uppercase;
-}
-
 article {
     display: flex;
     align-items: center;
@@ -103,4 +96,65 @@ figure img {
     display: block;
     border: 1px solid #a83;
     background-color: #000;
+}
+
+#selected-album > div {
+    display: grid;
+    max-width: 80%;
+    transform: translateY(-3em);
+    grid-template-columns: 1fr 1fr; 
+    grid-template-rows: 1fr 2fr; 
+}
+
+#selected-album figure {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    margin: 0;
+}
+
+#selected-album span {
+    align-self: end;
+    text-transform: uppercase;
+    padding: 0 1rem;
+}
+
+#selected-album p {
+    color: #fff;
+    margin: 0;
+    font-size: 1.5rem;
+    align-self: start;
+    padding: 0 1rem;
+}
+
+#selected-album img {
+    width: 100%;
+    padding: 0;
+    border: 0;
+    height: 100%;
+    object-fit: cover;
+}
+
+@media (min-width: 600px) {
+    #albums {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        grid-gap: 10px;
+        text-transform: uppercase;
+    }
+
+    #selected-album {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+    }
+}
+
+.blur {
+    filter: blur(25px);
 }

src/components/app.jsx

@@ -1,18 +1,19 @@
 import React, { Component } from 'react';
-import AlbumListContainer from '../containers/album-list';
-import FilterInputContainer from '../containers/filter-input';
-//import SortSelectContainer from '../containers/sort-select';
+import AlbumList from '../containers/album-list';
+import FilterInput from '../containers/filter-input';
+import Modal from '../containers/modal';
 
 export default class App extends Component {
     render() {
         return (
-            <div>
+            <React.Fragment>
                 <header>
                     <h1>Brütal Legend</h1>
-                    <FilterInputContainer />
+                    <FilterInput />
                 </header>
-                <AlbumListContainer />
-            </div>
+                <AlbumList />
+                <Modal />
+            </React.Fragment>
         );
     }
 }

src/components/modal.jsx

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+
+export default class Modal extends Component {
+    render() {
+        const {
+            id,
+            artist,
+            title,
+            songs,
+            year,
+            img,
+            description,
+            handleOnClick,
+        } = this.props;
+        if (id === undefined) {
+            return '';
+        }
+        const imagePath = `assets/covers/${img}`;
+        const song = songs.join(', ');
+        return (
+            <div id="selected-album" tabIndex="0" onClick={handleOnClick}>
+                <div>
+                    <figure>
+                        <img src={imagePath} alt="cover" />
+                    </figure>
+                    <span>
+                        #{id+1}: {artist} - {song}, från "{title}" ({year})<br />
+                    </span>
+                    <p>
+                        {description.split('\n\n').map(text => (
+                            <React.Fragment>
+                                {text}
+                                <br />
+                                <br />
+                            </React.Fragment>
+                        ))}
+                    </p>
+                </div>
+            </div>
+        )
+    }
+}

src/containers/modal.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Modal from '../components/modal';
+import { unselectAlbum } from '../actions';
+
+const mapStateToProps = state => ({
+    ...state.selectedAlbum,
+});
+
+const mapDispatchToProps = dispatch => ({
+    handleOnClick: album => dispatch(unselectAlbum(album)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Modal);