Breadcrumb!

3 files changed, 34 insertions, 5 deletions

diff --git a/src/App.js b/src/App.js
index 1226190..4c3df6c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -89,7 +89,7 @@ class App extends Component {
             <Thread boardList={this.state.boardList} path="/:dir/read/:id">
               <Thread path=":active" />
             </Thread>
-            <Board path="/board/:dir" />
+            <Board boardList={this.state.boardList} path="/board/:dir" />
             <NotFound default />
           </Router>
         </Container>
diff --git a/src/Board.js b/src/Board.js
index 34c7967..e5997bc 100644
--- a/src/Board.js
+++ b/src/Board.js
@@ -6,7 +6,8 @@ import {
   Header,
   Image,
   Comment,
-  Divider
+  Divider,
+  Breadcrumb
 } from "semantic-ui-react";
 import { Link } from "@reach/router";
 import Moment from "react-moment";
@@ -76,8 +77,19 @@ class Board extends Component {
       );
     }
 
+    const currentBoard = this.props.boardList.find(board => {
+      return board.dir === this.props.dir;
+    });
+
     return (
-      <div>
+      <React.Fragment>
+        <Breadcrumb>
+          <Breadcrumb.Section link as={Link} to="/">
+            Home
+          </Breadcrumb.Section>
+          <Breadcrumb.Divider icon="right chevron" />
+          <Breadcrumb.Section link>{currentBoard.name}</Breadcrumb.Section>
+        </Breadcrumb>
         {threadList.map(thread => (
           <Segment.Group key={thread.id}>
             <Header as="h4" attached>
@@ -109,7 +121,7 @@ class Board extends Component {
             </Segment>
           </Segment.Group>
         ))}
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/Thread.js b/src/Thread.js
index 20dd907..a5d26c2 100644
--- a/src/Thread.js
+++ b/src/Thread.js
@@ -5,12 +5,14 @@ import {
   Loader,
   Message,
   Segment,
-  Comment
+  Comment,
+  Breadcrumb
 } from "semantic-ui-react";
 import Moment from "react-moment";
 import "moment/locale/es";
 import Post from "./Post";
 import ReplyForm from "./ReplyForm";
+import { Link } from "@reach/router";
 
 class Thread extends Component {
   constructor(props) {
@@ -75,8 +77,23 @@ class Thread extends Component {
     } = this.state.thread;
     document.title = subject;
 
+    const currentBoard = this.props.boardList.find(board => {
+      return board.dir === this.props.dir;
+    });
+
     return (
       <React.Fragment>
+        <Breadcrumb>
+          <Breadcrumb.Section link as={Link} to="/">
+            Home
+          </Breadcrumb.Section>
+          <Breadcrumb.Divider icon="right chevron" />
+          <Breadcrumb.Section link as={Link} to={`/board/${currentBoard.dir}`}>
+            {currentBoard.name}
+          </Breadcrumb.Section>
+          <Breadcrumb.Divider icon="right arrow" />
+          <Breadcrumb.Section active>{subject}</Breadcrumb.Section>
+        </Breadcrumb>
         <Header as="h2">
           <Header.Content className="postMessage">
             {subject}