-
Notifications
You must be signed in to change notification settings - Fork 61
/
BlogPostPreviewList.js
125 lines (113 loc) · 3.31 KB
/
BlogPostPreviewList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import * as React from "react";
import * as Scrivito from "scrivito";
import { groupBy, truncate } from "lodash-es";
import BlogPostDate from "./BlogPostDate";
import formatDate from "../../utils/formatDate";
import InPlaceEditingPlaceholder from "../InPlaceEditingPlaceholder";
import isImage from "../../utils/isImage";
const BlogPostPreviewList = Scrivito.connect(
({ maxItems, author, tag, filterBlogPostId }) => {
let blogPosts = Scrivito.getClass("BlogPost")
.all()
.order("publishedAt", "desc");
if (author) {
blogPosts = blogPosts.and("author", "refersTo", author);
}
if (tag) {
blogPosts = blogPosts.and("tags", "equals", tag);
}
if (filterBlogPostId) {
blogPosts = blogPosts.andNot("id", "equals", filterBlogPostId);
}
let posts;
if (maxItems) {
posts = blogPosts.take(maxItems);
} else {
posts = [...blogPosts];
}
if (!posts.length) {
return (
<InPlaceEditingPlaceholder center>
There are no blog posts. Create one using the page menu.
</InPlaceEditingPlaceholder>
);
}
const months = groupBy(posts, post => {
const publishedAt = post.get("publishedAt");
return publishedAt && formatDate(publishedAt, "mmmm yyyy");
});
return (
<React.Fragment>
{Object.entries(months).map(([month, monthPosts]) => (
<React.Fragment key={`month: ${month}`}>
<MonthHeadline date={monthPosts[0].get("publishedAt")} />
<PostsTimeline posts={monthPosts} />
</React.Fragment>
))}
</React.Fragment>
);
}
);
const MonthHeadline = Scrivito.connect(({ date }) => {
if (!date) {
return null;
}
return (
<div className="blog-timeline--divider">
<time dateTime={formatDate(date, "yyyy-mm")}>
{formatDate(date, "mmmm yyyy")}
</time>
</div>
);
});
const PostsTimeline = Scrivito.connect(({ posts }) => (
<ul className="blog-timeline">
{posts.map(post => (
<BlogPostPreview key={post.id()} post={post} />
))}
</ul>
));
const BlogPostPreview = Scrivito.connect(({ post }) => {
return (
<li>
<BlogPostDate post={post} />
<div className="blog-timeline--panel">
<div className="blog-timeline--body">
<BlogPostTitleImage post={post} />
<h3>
<Scrivito.LinkTag to={post}>{post.get("title")}</Scrivito.LinkTag>
</h3>
<h4>{post.get("subtitle")}</h4>
<p>
{truncate(Scrivito.extractText(post, { length: 330 }), {
length: 300,
separator: /,? +/,
})}
</p>
</div>
<div className="blog-timeline--footer">
<Scrivito.LinkTag to={post} className="btn btn-clear">
Read more
<i className="fa fa-angle-right fa-4" aria-hidden="true" />
</Scrivito.LinkTag>
</div>
</div>
</li>
);
});
const BlogPostTitleImage = Scrivito.connect(({ post }) => {
const titleImage = post.get("titleImage");
if (!isImage(titleImage)) {
return null;
}
return (
<Scrivito.LinkTag to={post}>
<Scrivito.ImageTag
content={titleImage}
className="img-responsive"
alt={titleImage.get("alternativeText")}
/>
</Scrivito.LinkTag>
);
});
export default BlogPostPreviewList;