Skip to content

Instantly share code, notes, and snippets.

@anotherChowdhury

anotherChowdhury/Post.js

Created June 25, 2020 17:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anotherChowdhury/2f73940739926250379c92d2f18ba8c4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anotherChowdhury/2f73940739926250379c92d2f18ba8c4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. anotherChowdhury created this gist Jun 25, 2020.
    97 changes: 97 additions & 0 deletions Post.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,97 @@
    import React, { Component } from "react";
    import moment from "moment";
    import styled from "styled-components";
    import CommentBox from "./CommentBox";

    const PostContainer = styled.div`
    width: 100%;
    margin: 30px auto;
    border: 1px solid black;
    box-sizing: border-box;
    box-shadow: 10px 10px 20px #333;
    `;

    const PostImage = styled.img`
    width: 100%;
    `;

    const PostText = styled.p`
    color: #333;
    justify-content: flex-start;
    `;

    const ReactionBar = styled.div`
    border: 1px solid blue;
    width: 100%;
    height: 20px;
    `;

    const Reaction = styled.span`
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid yellow;
    margin: 0 10px 0 10px;
    `;

    class Post extends Component {
    constructor(props) {
    super(props);

    this.state = {
    id: props.post._id,
    name: props.post.user.name,
    text: props.post.text,
    link: props.post.imageLink,
    created: props.post.createdAt,
    upvotes: props.post.upvotes,
    downvotes: props.post.downvotes,
    index: props.index,
    };
    }

    handleUpvote = (e) => {
    this.setState({ upvotes: this.state.upvotes + 1 });
    };

    handleDownvote = (e) => {
    this.setState({ downvotes: this.state.downvotes + 1 });
    };

    render() {
    return (
    <PostContainer key={this.state.id}>
    <h3 style={{ margin: 0, fontWeight: 500 + "px" }}>{this.state.name}</h3>
    <p style={{ marginTop: 0, fontSize: 0.6 + "rem" }}>
    {moment(this.state.created).fromNow()}
    </p>
    {this.state.text && (
    <PostText key={`text${this.state.index}`}>{this.state.text}</PostText>
    )}
    {this.state.link && (
    <PostImage key={`image${this.state.index}`} src={this.state.link} />
    )}
    <ReactionBar>
    <Reaction
    role="img"
    aria-label="thumbsup"
    onClick={this.handleUpvote}
    >
    👍
    </Reaction>
    <span>{this.state.upvotes}</span>
    <Reaction
    role="img"
    aria-label="thumbsdown"
    onClick={this.handleDownvote}
    >
    👎
    </Reaction>
    <span>{this.state.downvotes}</span>
    </ReactionBar>
    {/* <CommentBox id={this.state.id} key={`comment${this.state.index}`} /> */}
    </PostContainer>
    );
    }
    }

    export default Post;