Implementing connect fn for the songDetail component

songs-redux/src/components/App.js

@@ -1,9 +1,19 @@
 import React from 'react';
+import SongsList from './SongsList';
+import SongDetail from './SongDetails';
+
 
 const App = () => {
   return (
-    <div>
-      App
+    <div className="ui container grid">
+      <div className="ui row">
+        <div className="column eight wide">
+          <SongsList />
+        </div>
+        <div className="column eight wide">
+          <SongDetail />
+        </div>
+      </div>
     </div>
   )
 }

songs-redux/src/components/SongDetails.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+const SongDetail = (props) => {
+  if (props.selected) {
+    return (
+      <div className="ui card">
+        <div className="content">
+          <div className="header">Song Details: </div>
+        </div>
+        <div className="content">
+          <h4 className="ui sub header">Title : {props.selected.title}</h4>
+          <div className="ui small feed">
+            <div className="event">
+              <div className="content">
+                <div className="summary">
+                  An Umm-Kalthoum Song with A duration of { props.selected.duration }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <div>Select A song to get its details.</div>
+}
+
+const mapStateToProps = state => {
+  return { selected: state.selectedSong }
+}
+
+export default connect(mapStateToProps)(SongDetail);

songs-redux/src/components/SongsList.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { selectSong } from '../actions';
+class SongsList extends React.Component {
+
+  render () {
+    console.log(" > render")
+    const renderedList = this.props.songs.map(s => {
+      return (
+        <div key={s.title} className="item">
+          <div className="right floated content">
+            <button
+              onClick={() => this.props.selectSong(s)}
+              className="ui button primary" 
+            >
+              Select
+            </button>
+          </div>
+          <div className="content">
+            {s.title}
+          </div>
+        </div>
+      )
+    })    
+    return (
+      <div className="ui divided list">
+        {renderedList}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return { songs: state.songs };
+}
+
+export default connect(mapStateToProps, { selectSong })(SongsList);