diff options
| -rw-r--r-- | src/BBSThread.js | 29 | ||||
| -rw-r--r-- | src/Post.js | 36 |
2 files changed, 38 insertions, 27 deletions
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 |