From 1b1a6e8f787cbb5fe9dc8e182c0d36a21aaeadf2 Mon Sep 17 00:00:00 2001
From: notnull <notnull@anarchyplanet.org>
Date: Sat, 23 Mar 2019 17:19:25 -0400
Subject: [PATCH] updated navbar - dropdown now iterates over episodes - uses
 client-side routing to find episode comments

---
 src/components/navbar.js | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/navbar.js b/src/components/navbar.js
index 72f1918..607e11f 100644
--- a/src/components/navbar.js
+++ b/src/components/navbar.js
@@ -1,25 +1,27 @@
 import React from 'react'
+import {connect} from 'react-redux'
 import { Navbar, Nav, NavDropdown, FormControl, Form, Button } from 'react-bootstrap'
-import fetchEpisodes from './fetchEpisodes'
-const MainNav = () => {
+import {LinkContainer} from 'react-router-bootstrap'
+import {NavLink} from 'react-router-dom'
+
+const MainNav = (props) => {
+  const {episodes, captions} = props
+
   return (
     <Navbar bg="dark" variant="dark" expand="lg">
-      <Navbar.Brand href="#home">Anarchy Planet</Navbar.Brand>
+      <Navbar.Brand href="/">Anarchy Planet</Navbar.Brand>
       <Navbar.Toggle aria-controls="basic-navbar-nav" />
       <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="mr-auto">
-          <Nav.Link href="#" onClick={fetchEpisodes}>
-            Episodes
-          </Nav.Link>
-          <Nav.Link href="#link">Link</Nav.Link>
-          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
-            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
-            <NavDropdown.Divider />
-            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
+          <NavDropdown title="Episodes" id="episodes">
+            {episodes.map(episode=>
+              <NavLink className="dropdown-item" key={episode.slug} to={`/captions/${episode.slug}`}>
+                {episode.title}
+              </NavLink>
+            )}
           </NavDropdown>
         </Nav>
+
         <Form inline>
           <FormControl type="text" placeholder="Search" className="mr-sm-2" />
           <Button variant="outline-success">Search</Button>
@@ -29,4 +31,12 @@ const MainNav = () => {
   )
 }
 
-export default MainNav
+const mapState = state => {
+  return {
+    episodes: state.episodes,
+    captions: state.captions
+  }
+}
+
+
+export default connect(mapState)(MainNav)