From e7745c7fa1d368bfaa3c3952d0ffbc27428f23e9 Mon Sep 17 00:00:00 2001
From: Renard
Date: Mon, 16 Sep 2019 12:08:48 -0300
Subject: Breadcrumb!
---
src/App.js | 2 +-
src/Board.js | 18 +++++++++++++++---
src/Thread.js | 19 ++++++++++++++++++-
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}
--
cgit v1.2.1-18-gbd029