Implementación de nuevo estilo de post en boards

3 files changed, 45 insertions, 67 deletions

diff --git a/src/App.css b/src/App.css
index bdeb084..07441e4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -42,5 +42,30 @@
 
 .postImage {
   padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+
+.imageContainer {
+  display: inline-block;
+  text-align: center;
+  font-size: 0.75em;
   padding-bottom: 1em;
+}
+
+.yt {
+  border: 1px solid #ccc;
+  font-size: 12px;
+  display: inline-block;
+  line-height: 13px;
+  margin: 2px 0;
+  padding: 5px;
+  text-decoration: none;
+}
+
+.yt .pvw {
+  width: 100px;
+  height: 60px;
+  overflow: hidden;
+  float: left;
+  margin-right: 5px;
 }
\ No newline at end of file
diff --git a/src/Board.js b/src/Board.js
index daa2f39..6fece58 100644
--- a/src/Board.js
+++ b/src/Board.js
@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Loader, Message, Segment, Header, Image, SegmentGroup } from "semantic-ui-react";
+import { Loader, Message, Segment, Header, Image, Comment } from "semantic-ui-react";
 import { Link } from "@reach/router";
 import Moment from "react-moment";
 import "moment/locale/es";
+import Post from "./Post";
 class Board extends Component {
     constructor() {
         super();
@@ -71,42 +72,15 @@ class Board extends Component {
                     <Segment.Group>
                         <Header as="h4" attached>
                             <Link to={`/${this.props.dir}/read/${thread.id}`}>{thread.subject}</Link>
-                            <Header.Subheader>
-                                {thread.name} ― <Moment fromNow unix locale="es" date={thread.timestamp} />
-                            </Header.Subheader>
                         </Header>
-                        <Segment.Group horizontal attached>
-                            {thread.file !== "" ?
-                                <Segment compact className="imageSegment">
-                                    <Image size="small" src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${thread.thumb}`} />
-                                </Segment>
-
-                                : null}
-                            <Segment attached>
-                                <div dangerouslySetInnerHTML={{ __html: thread.message }} />
-                            </Segment>
-                        </Segment.Group>
-
-                        {thread.replies.map((reply, index, replies) =>
-                            <Segment.Group horizontal attached>
-                                {reply.file !== "" ?
-                                    <Segment compact className="imageSegment">
-                                        <Image size="small" fluid src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${reply.thumb}`} />
-                                    </Segment>
-                                    : null}
-                                <Segment attached>
-
-                                    <Header key={index} as="h5">
-                                        #{thread.total_replies - replies.length + index + 1} {reply.name}
-                                        <Header.Subheader>
-                                            <div className={`postMessage ${this.props.dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: reply.message }} />
-                                        </Header.Subheader>
-                                    </Header>
-                                </Segment>
-                            </Segment.Group>
-
-                        )}
-
+                        <Segment>
+                            <Comment.Group>
+                                <Post index={0} post={thread} locked={thread.locked} threadId={thread.id} dir={this.props.dir} />
+                                {thread.replies.map((reply, index, replies) =>
+                                    <Post index={thread.total_replies - replies.length + index + 1} post={reply} locked={thread.locked} threadId={thread.id} dir={this.props.dir} />
+                                )}
+                            </Comment.Group>
+                        </Segment>
                     </Segment.Group>
                 )}
             </div>
diff --git a/src/Post.js b/src/Post.js
index 2525184..e175f91 100644
--- a/src/Post.js
+++ b/src/Post.js
@@ -14,6 +14,10 @@ const ImageModal = ({ href, trigger }) => (
 );
 
 const Post = ({ index, post, locked, dir, threadId }) => {
+    if (post.IS_DELETED > 0) {
+        return null;
+    }
+    console.log(post);
     const filesize = require('filesize');
     const seedrandom = require("seedrandom");
     const rng = seedrandom(threadId + index);
@@ -28,11 +32,15 @@ const Post = ({ index, post, locked, dir, threadId }) => {
             <Comment.Content>
                 <Comment.Author as='a'>#{index + 1} <span className={post.email === "sage" ? "username sage" : "username"}>{post.name}</span><span className="tripcode">{post.tripcode}</span></Comment.Author>
                 <Comment.Metadata>
-                    <Moment fromNow unix locale="es" date={post.timestamp} />
+                    <div><Moment fromNow unix locale="es" date={post.timestamp} /></div>
+                    <div><Icon name="star" />{user_id}</div>
                 </Comment.Metadata>
                 <Comment.Text>
                     {post.file !== "" ?
-                        <ImageModal href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`} trigger={<Image className="postImage" src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />} />
+                        <div className="imageContainer">
+                            <ImageModal href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`} trigger={<Image className="postImage" src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />} />
+                            {post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })}
+                        </div>
                         : null}
                     <div className={`postMessage ${dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: post.message }} />
                 </Comment.Text>
@@ -42,35 +50,6 @@ const Post = ({ index, post, locked, dir, threadId }) => {
             </Comment.Content>
         </Comment>
     );
-
-    return (
-        <Segment.Group>
-            <Header as="h5" attached>
-                #{index + 1} <span className={post.email === "sage" ? "username sage" : "username"}>{post.name}</span><span className="tripcode">{post.tripcode}</span>
-
-                <Header.Subheader className="inlineSubHeader">
-                    <Moment fromNow unix locale="es" date={post.timestamp} />
-                </Header.Subheader>
-                {user_id ? <Label size="mini">{user_id}</Label> : null}
-            </Header>
-
-            <Segment.Group horizontal>
-                {post.file !== "" ?
-                    <Segment compact className="imageSegment">
-                        <Label size="tiny" attached='bottom'>{post.file} {post.image_width}x{post.image_height}
-                            <Label.Detail>{filesize(post.file_size, { bits: true })}</Label.Detail>
-                        </Label>
-                        <ImageModal href={`https://bienvenidoainternet.org/${dir}/src/${post.file}`} trigger={<Image fluid src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />} />
-                    </Segment> : null}
-                <Segment>
-                    <div className={`postMessage ${dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: post.message }} />
-                    {locked ? null :
-                        (<Label attached='bottom right'>
-                            <Icon name="reply" />Responder
-                                    </Label>)}
-                </Segment>
-            </Segment.Group>
-        </Segment.Group>);
 }
 
 export default Post;
\ No newline at end of file