diff options
| -rw-r--r-- | src/App.js | 6 | ||||
| -rw-r--r-- | src/Board.js | 15 | ||||
| -rw-r--r-- | src/ThreadList.js | 84 |
3 files changed, 104 insertions, 1 deletions
@@ -16,6 +16,7 @@ import Home from "./Home"; import Thread from "./Thread"; import Board from "./Board"; import NotFound from "./NotFound"; +import ThreadList from "./ThreadList"; class App extends Component { constructor() { @@ -140,6 +141,11 @@ class App extends Component { path="/board/:dir" nightMode={this.state.nightMode} /> + <ThreadList + boardList={this.state.boardList} + path="/list/:dir" + nightMode={this.state.nightMode} + /> <NotFound default /> </Router> </Container> diff --git a/src/Board.js b/src/Board.js index 41727bc..b15f050 100644 --- a/src/Board.js +++ b/src/Board.js @@ -35,7 +35,12 @@ class Board extends Component { if (resource["state"] === "error") { this.setState({ error: resource }); } - this.setState({ isLoaded: true, threadList: resource["threads"] }); + this.setState( + { isLoaded: true, threadList: resource["threads"] }, + () => { + window.scrollTo(0, 0); + } + ); }); window.scrollTo(0, 0); window.addEventListener("scroll", this.handleScroll); @@ -127,6 +132,14 @@ class Board extends Component { <Breadcrumb.Divider icon="right chevron" /> <Breadcrumb.Section link>{currentBoard.name}</Breadcrumb.Section> </Breadcrumb> + <Segment basic> + <Header as="h1"> + {currentBoard.name} + <Header.Subheader>/{currentBoard.dir}/</Header.Subheader> + </Header> + <Link to={`/list/${currentBoard.dir}`}>Lista de hilos</Link> + </Segment> + {threadList.map(thread => ( <Segment.Group key={"seg_" + thread.timestamp + thread.id}> <Header as="h3" attached inverted={nightMode}> diff --git a/src/ThreadList.js b/src/ThreadList.js new file mode 100644 index 0000000..c5eb990 --- /dev/null +++ b/src/ThreadList.js @@ -0,0 +1,84 @@ +import React, { Component } from "react"; +import { Header, Loader, List, Card, Image, Icon } from "semantic-ui-react"; +import { Link } from "@reach/router"; +import Moment from "react-moment"; +import "moment/locale/es"; + +class ThreadList extends Component { + constructor(props) { + super(props); + this.state = { isLoading: true, threadList: [] }; + } + + componentDidMount() { + const { dir } = this.props; + fetch( + `https://bienvenidoainternet.org/cgi/api/list?dir=${dir}&replies=0&limit=30&nohtml=1` + ) + .then(response => { + return response.json(); + }) + .then(resource => { + this.setState({ threadList: resource.threads, isLoading: false }); + }); + } + + render() { + const { dir, boardList } = this.props; + const { threadList, isLoading } = this.state; + + const currentBoard = boardList.find(board => { + return board.dir === dir; + }); + + if (isLoading) { + return ( + <Loader active centered="true"> + Cargando lista de hilos ... + </Loader> + ); + } + + const stripHtml = RegExp( + /(<script(\s|\S)*?<\/script>)|(<style(\s|\S)*?<\/style>)|(<!--(\s|\S)*?-->)|(<\/?(\s|\S)*?>)/g + ); + + return ( + <Card.Group centered itemsPerRow={4} stackable> + {threadList.map((thread, index) => { + return ( + <Card key={index} raised> + {currentBoard.allow_images === 1 ? ( + <Image + src={`https://bienvenidoainternet.org/${dir}/thumb/${thread.thumb}`} + ui={false} + style={{ maxHeight: "250px" }} + /> + ) : null} + <Card.Content> + <Card.Header as={Link} to={`/${dir}/read/${thread.id}`}> + {thread.subject} + </Card.Header> + <Card.Meta> + <span className="date"> + <Moment fromNow unix date={thread.timestamp} /> + </span> + </Card.Meta> + <Card.Description> + {thread.message.replace(stripHtml, "").substring(0, 200) + + " ..."} + </Card.Description> + </Card.Content> + <Card.Content extra> + <Icon name="reply" /> + {thread.total_replies} Respuestas + </Card.Content> + </Card> + ); + })} + </Card.Group> + ); + } +} + +export default ThreadList; |