From 87f100049cb00ab809396addf7e1f868ea3fea02 Mon Sep 17 00:00:00 2001
From: Renard
Date: Thu, 12 Sep 2019 15:40:15 -0300
Subject: Post as object

---
 src/BBSThread.js | 29 ++---------------------------
 src/Post.js      | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 27 deletions(-)
 create mode 100644 src/Post.js

diff --git a/src/BBSThread.js b/src/BBSThread.js
index 68fca92..747682b 100644
--- a/src/BBSThread.js
+++ b/src/BBSThread.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { Header, Icon, Loader, Message, Segment, Image, Label } from "semantic-ui-react";
 import Moment from "react-moment";
 import "moment/locale/es";
+import Post from "./Post";
 
 
 class BBSThread extends Component {
@@ -76,33 +77,7 @@ class BBSThread extends Component {
 
                 {posts.map((post, index) =>
                     post.IS_DELETED === 0 ?
-                        (<Segment.Group>
-                            <Header as="h5" attached>
-                                #{index + 1} {post.name}
-                                <Header.Subheader className="inlineSubHeader">
-                                    <Moment fromNow unix locale="es" date={post.timestamp} />
-                                </Header.Subheader>
-                            </Header>
-
-                            <Segment.Group horizontal>
-                                {post.file != "" ?
-                                    <Segment padded compact className="imageSegment">
-                                        <Label attached='bottom'>{post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })}</Label>
-                                        <Image fluid src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${post.thumb}`} />
-
-                                    </Segment> : null}
-                                <Segment padded>
-
-                                    <div className={`postMessage ${this.props.dir === "zonavip" ? "vipFont" : null}`} dangerouslySetInnerHTML={{ __html: post.message }} />
-                                    {locked ? null :
-                                        (<Label attached='bottom right'>
-                                            <Icon name="reply" />Responder
-                                    </Label>)}
-
-                                </Segment>
-                            </Segment.Group>
-                        </Segment.Group>
-                        ) : null)
+                        (<Post key={index} index={index} post={post} locked={locked} dir={this.props.dir} />) : null)
                 }
 
                 <a href={`https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&id=${this.props.id}`}>API Link</a>
diff --git a/src/Post.js b/src/Post.js
new file mode 100644
index 0000000..99eadb5
--- /dev/null
+++ b/src/Post.js
@@ -0,0 +1,36 @@
+import React from "react";
+import { Segment, Header, Image, Label, Icon } from "semantic-ui-react";
+import Moment from "react-moment";
+import "moment/locale/es";
+
+const Post = ({ index, post, locked, dir }) => {
+    const filesize = require('filesize');
+    return (
+        <Segment.Group>
+            <Header as="h5" attached>
+                #{index + 1} {post.name}
+                <Header.Subheader className="inlineSubHeader">
+                    <Moment fromNow unix locale="es" date={post.timestamp} />
+                </Header.Subheader>
+            </Header>
+
+            <Segment.Group horizontal>
+                {post.file != "" ?
+                    <Segment padded compact className="imageSegment">
+                        <Label attached='bottom'>{post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })}</Label>
+                        <Image fluid src={`https://bienvenidoainternet.org/${dir}/thumb/${post.thumb}`} />
+
+                    </Segment> : null}
+                <Segment padded>
+
+                    <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
-- 
cgit v1.2.1-18-gbd029