Fix: Imagenes y componentUpdate

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 ― &nbsp;
-                                <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>