diff options
| -rw-r--r-- | src/App.js | 2 | ||||
| -rw-r--r-- | src/Board.js | 18 | ||||
| -rw-r--r-- | src/Thread.js | 19 |
3 files changed, 34 insertions, 5 deletions
@@ -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} |