updated episode and captions view components

src/components/captions/CaptionList.js

@@ -1,16 +1,15 @@
 import React from 'react'
 
 const CaptionList = props => {
-  console.log('CAPTION LIST MOTHERFUCKER!!!!!', props)
-  const { handleClick, captions } = props
+  const { captions } = props
   return (
     <tbody>
       {Object.keys(captions).map(key => {
         return captions[key].map(caption => {
           return (
-            <tr key = {key}
+            <tr key = {key+caption.text}
               onClick={() =>
-                handleClick({ nick: caption.nick, text: caption.text })
+                console.log({ nick: caption.nick, text: caption.text })
               }
             >
               <td>{caption.nick}</td>

src/components/captions/Captions.js

@@ -1,19 +1,31 @@
 import React from 'react'
 import CaptionList from './CaptionList'
 import Table from 'react-bootstrap/Table'
+import {connect} from 'react-redux'
 const Captions = props => {
-  const { handleClick, captions } = props
+
+  const captions = props.captions.all.find(captionSet=>captionSet.slug===props.match.params.slug)
+
+  if(!captions) return <div>No show with that id.</div>
 
   return (
     <Table striped bordered hover>
       <thead>
         <tr>
-          <th>Episodes</th>
+          <th>Nick</th>
+          <th>Comment</th>
         </tr>
       </thead>
-      <CaptionList handleClick={handleClick} captions={captions} />
+      <CaptionList captions={captions.captions} />
     </Table>
   )
 }
 
-export default Captions
+const mapState = state => {
+  return {
+    episodes: state.episodes,
+    captions: state.captions
+  }
+}
+
+export default connect(mapState)(Captions)

src/components/episodes/EpisodeList.js

@@ -1,13 +1,18 @@
 import React from 'react'
+import {NavLink} from 'react-router-dom'
 
 const EpisodeList = props => {
-  const { episodes, fetchEpisodeComments } = props
-  console.log('EPISODELIST', episodes)
+  const { episodes } = props
   return (
     <tbody>
       {episodes.map(episode => (
-        <tr onClick={() => fetchEpisodeComments(episode.slug)}>
-          <td>{episode.title}</td>
+        <tr key={episode.slug}>
+          <td>
+            <NavLink to={`/captions/${episode.slug}`}>
+              {episode.title}
+            </NavLink>
+          </td>
+
         </tr>
       ))}
     </tbody>

src/components/episodes/Episodes.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import EpisodeList from './EpisodeList'
 import Table from 'react-bootstrap/Table'
+import {connect} from 'react-redux'
+
 const Episodes = props => {
-  const { episodes, fetchEpisodeComments } = props
+  const { episodes } = props
   console.log(props)
 
   return (
@@ -12,9 +14,14 @@ const Episodes = props => {
           <th>Episodes</th>
         </tr>
       </thead>
-      <EpisodeList fetchEpisodeComments={fetchEpisodeComments} episodes={episodes} />
+      <EpisodeList episodes={episodes} />
     </Table>
   )
 }
 
-export default Episodes
+const mapState = state => {
+  return {
+    episodes: state.episodes
+  }
+}
+export default connect(mapState)(Episodes)