{"size": 1680, "ext": "js", "max_stars_repo_path": "client/src/Main.js", "max_stars_repo_name": "BrianMwangi21/trueKenyan", "max_stars_repo_stars_event_min_datetime": "2020-02-19T08:24:42.000Z", "max_stars_repo_stars_event_max_datetime": "2021-07-14T15:58:37.000Z", "max_issues_repo_path": "client/src/Main.js", "max_issues_repo_name": "BrianMwangi21/trueKenyan", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/Main.js", "max_forks_repo_name": "BrianMwangi21/trueKenyan", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.3076923077, "max_line_length": 131, "alphanum_fraction": 0.4583333333}
import React, { Component } from "react";
import ReactHtmlParser from 'react-html-parser';
import Masonry from "react-masonry-css";
import Card from 'react-bootstrap/Card';
import "./App.css";

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            breakpointColumnsObj: {
                default: 3,
            }
        };
    }

    render() {
        const articles = this.props.all_articles.map((article, index) => {
            return (
                <Card key={index}>
                    <Card.Title style={{ "margin": "20px" }}>
                        <h2>{article.articleTitle}</h2>
                    </Card.Title>
                    <Card.Text style={{ "marginLeft": "20px", "marginRight": "20px", "marginBottom": "20px", "marginTop": "0px" }}>
                        <hr />
                        {ReactHtmlParser(article.articleContent)}
                    </Card.Text>
                    <Card.Footer>
                        <p>by <strong>{article.authorName}</strong> at <strong>{article.dateCreated}</strong></p>
                    </Card.Footer>
                </Card>
            )
        });

        return (
            <div class="site-section"  style={{"padding":"10px"}}>
                <div class="container">
                    <Masonry
                        breakpointCols={this.state.breakpointColumnsObj}
                        className="my-masonry-grid"
                        columnClassName="my-masonry-grid_column" >

                        {articles}

                    </Masonry>
                </div>
            </div>
        );
    }
}

export default Main;