-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.jsx
98 lines (81 loc) · 2.19 KB
/
index.jsx
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
import React, { useState, useEffect } from "react"
import styled from "styled-components"
import _ from "lodash"
import { Link } from "gatsby"
import Title from "components/Title"
import Divider from "components/Divider"
import TagList from "components/TagList"
const PostListWrapper = styled.div`
@media (max-width: 768px) {
padding: 0 10px;
}
`
const PostWrapper = styled.div`
position: relative;
top: 0;
transition: all 0.5s;
@media (max-width: 768px) {
padding: 0 5px;
}
`
const Date = styled.p`
margin-bottom: 16px;
font-size: 14.4px;
color: ${props => props.theme.colors.tertiaryText};
`
const Excerpt = styled.p`
margin-bottom: 32px;
line-height: 1.7;
font-size: 15px;
color: ${props => props.theme.colors.secondaryText};
word-break: break-all;
`
const checkIsScrollAtBottom = () => {
return (
document.documentElement.scrollHeight -
document.documentElement.scrollTop <=
document.documentElement.clientHeight + 100
)
}
const PostList = ({ postList }) => {
const [postCount, setPostCount] = useState(10)
const handleMoreLoad = _.throttle(() => {
if (checkIsScrollAtBottom() && postCount < postList.length) {
setTimeout(() => setPostCount(postCount + 10), 300)
}
}, 250)
useEffect(() => {
window.addEventListener("scroll", handleMoreLoad)
return () => {
window.removeEventListener("scroll", handleMoreLoad)
}
}, [postCount, postList])
useEffect(() => {
setPostCount(10)
}, [postList])
return (
<PostListWrapper>
{postList.slice(0, postCount).map((post, i) => {
const { title, date, tags } = post.frontmatter
const { excerpt } = post
const { slug } = post.fields
return (
<>
<PostWrapper>
<Title size="bg">
<Link to={slug}>{title}</Link>
</Title>
<Date>{date}</Date>
<Excerpt>{excerpt}</Excerpt>
<TagList tagList={tags} />
</PostWrapper>
{postCount - 1 !== i && postList.length - 1 !== i && (
<Divider mt="48px" mb="32px" />
)}
</>
)
})}
</PostListWrapper>
)
}
export default PostList