From 26a08336714538f1190846a51ac241181e5ea479 Mon Sep 17 00:00:00 2001
From: notnull <notnull@anarchyplanet.org>
Date: Sat, 23 Mar 2019 17:18:17 -0400
Subject: [PATCH] updated episode and captions view components

---
 src/components/captions/CaptionList.js |  7 +++----
 src/components/captions/Captions.js    | 20 ++++++++++++++++----
 src/components/episodes/EpisodeList.js | 13 +++++++++----
 src/components/episodes/Episodes.js    | 13 ++++++++++---
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/captions/CaptionList.js b/src/components/captions/CaptionList.js
index 8de53ab..eb0cad7 100644
--- a/src/components/captions/CaptionList.js
+++ b/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>
diff --git a/src/components/captions/Captions.js b/src/components/captions/Captions.js
index 1ccb217..a601356 100644
--- a/src/components/captions/Captions.js
+++ b/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)
diff --git a/src/components/episodes/EpisodeList.js b/src/components/episodes/EpisodeList.js
index 4da8feb..f2ffc68 100644
--- a/src/components/episodes/EpisodeList.js
+++ b/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>
diff --git a/src/components/episodes/Episodes.js b/src/components/episodes/Episodes.js
index f5e641f..0d9b8d6 100644
--- a/src/components/episodes/Episodes.js
+++ b/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)