GcbWSAP2

1import Link from 'next/link';
2import Layout from '../../components/layout';
3import { listBlogWithCategoryAndTags } from '../../actions/blog';
4import { API } from '../../config';
5import renderHTML from 'react-render-html'
6import moment from 'moment'
7
8const Blogs = ({ blogs, category, tags, size }) => {
9    const showAllBlogs = () => {
10        return blogs.map((blog, i) => {
11            return <article key={i}>
12                <div className="lead pb-4">
13                    <header>
14                        <Link href={`/blogs/${blog.slug}`}>
15                            <a><h2 className="pt-3 pb-3 font-weight-bold">{blog.title}</h2></a>
16                        </Link>
17                    </header>
18                    <section>
19                        <p className="mark ml-1 pt-2 pb-2">
20                            writen by {blog.postedBy.name} | published | {moment(blog.updatedAt).fromNow()}{blog.createdAt}
21                        </p>
22                    </section>
23                    <div className="row">
24                        <div className="col-md-4">image</div>
25                        <div className="col-md-8">
26                            <section>
27                                <div className="pb-3">{renderHTML(blog.excerpt)}</div>
28                                <Link href={`/blogs/${blog.slug}`}>
29                                    <a className="btn btn-primary pt-2">read more</a>
30                                </Link>
31                            </section>
32                        </div>
33                        <div className="col-md-4">blog and tags</div>
34                    </div>
35                </div>
36                <hr/>
37            </article>
38        })
39    }
40
41    return (
42            <Layout>
43                <main>
44                    <div className="container-fluid">
45                        <header>
46                            <div className="col-md-12 pt-3">
47                                <h1 className="display-4 font-weight-bold">Programing blog</h1>
48                            </div>
49                            <section>
50                                <p>show category and tags</p>
51                            </section>
52                        </header>
53                    </div>
54                    <div className="container-fluid">
55                        <div className="col-md-12">{showAllBlogs()}</div>
56                    </div>
57                </main>
58            </Layout>
59    );
60};
61
62Blogs.getInitialProps = () => {
63    return listBlogWithCategoryAndTags().then(data => {
64        if(data.error) {
65            console.log(data.error);
66        }else{
67            return {
68                blogs: data.blogs, category: data.category, tags: data.tags, size: data.size
69            };
70        }
71    });
72};
73
74export default Blogs; // getInitialProps