diff options
| -rw-r--r-- | src/App.css | 5 | ||||
| -rw-r--r-- | src/BBSThread.js | 19 | ||||
| -rw-r--r-- | src/Board.js | 29 |
3 files changed, 41 insertions, 12 deletions
diff --git a/src/App.css b/src/App.css index e69de29..d68f434 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,5 @@ +.postMessage { + word-break: break-word; + overflow-wrap: anywhere; + text-overflow: ellipsis; +}
\ No newline at end of file diff --git a/src/BBSThread.js b/src/BBSThread.js index bac1b9a..9d11537 100644 --- a/src/BBSThread.js +++ b/src/BBSThread.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { Header, Icon, Loader, Message, Segment } from "semantic-ui-react"; +import { Header, Icon, Loader, Message, Segment, Image, Button } from "semantic-ui-react"; import Moment from "react-moment"; import "moment/locale/es"; @@ -75,13 +75,16 @@ class BBSThread extends Component { <Moment fromNow unix locale="es" date={post.timestamp} /> </Header.Subheader> </Header> - <Segment attached> - <div dangerouslySetInnerHTML={{ __html: post.message }} /> - </Segment> - <Segment attached='bottom' textAlign='right' tertiary style={{ "padding": "0.5em", "font-size": "0.75em" }}> - <Icon name="reply" /> Responder ― - <Icon name="exclamation circle" /> Reportar - </Segment> + + <Segment.Group horizontal> + {post.file != "" ? <Segment compact> <Image src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${post.thumb}`} /></Segment> : null} + <Segment> + <div className="postMessage" dangerouslySetInnerHTML={{ __html: post.message }} /> + <Icon name="reply" />Responder + + <Icon name="exclamation circle" />Reportar + </Segment> + </Segment.Group> </Segment.Group> ) : null) } diff --git a/src/Board.js b/src/Board.js index 759079b..5a4e620 100644 --- a/src/Board.js +++ b/src/Board.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { Loader, Message, Segment, Header } from "semantic-ui-react"; +import { Loader, Message, Segment, Header, Icon, Image } from "semantic-ui-react"; import { Link } from "@reach/router"; import Moment from "react-moment"; import "moment/locale/es"; @@ -27,6 +27,22 @@ class Board extends Component { .catch(console.error) } + componentWillUnmount() { + console.log("will unmount") + } + + componentDidUpdate(prevProps) { + // Uso tipico (no olvides de comparar los props): + if (this.props.dir !== prevProps.dir) { + this.setState({ + isLoaded: false, + threadList: [], + error: null + }) + this.componentDidMount(); + } + } + render() { const { isLoaded, error, threadList } = this.state; @@ -63,9 +79,14 @@ class Board extends Component { <div dangerouslySetInnerHTML={{ __html: thread.message }} /> </Segment> {thread.replies.map(reply => - <Segment attached> - <div dangerouslySetInnerHTML={{ __html: reply.message }} /> - </Segment> + <Segment.Group horizontal key={reply.id}> + {reply.file != "" ? <Segment compact> <Image src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${reply.thumb}`} /></Segment> : null} + <Segment> + <div className="postMessage" dangerouslySetInnerHTML={{ __html: reply.message }} /> + <Icon name="reply" />Responder + <Icon name="exclamation circle" />Reportar + </Segment> + </Segment.Group> )} </Segment.Group> |